利用chrome進行javacript debug

Google出產的chrome不單單是瀏灠器，

更是工程師的好利器，

它可以來直接變更HTML、CSS，

並且可以看到調整後的效果，

不過這次要說的是javascript的debug功能。

1．連結到想debug的頁面。

2．滑鼠右鍵「檢查元素」，此時會跑出一個視窗，預設的頁籤是「Elements」（HTML、CSS都可以在這邊直接進行調整，可以直接看到修改的效果，當然啦，調整後的值必需再設定回Server，不然只是改好玩的。）

3．切到「Source」頁籤

4．預設的左方「檔案選擇器」是隱藏的，左上角有一個可以按的按鈕按下去，可以把「檔案選擇器」叫出來，選擇要針對那一個檔案（頁面）做Debug。

5．選擇檔案後，可以看到HTML原始碼跑出來了，找到想暫停的地方，點選左方的行號。

6．重新整理網頁。

7．如此就可以看到javascript被中斷了，剩下的只要有一些Debug經驗的人，應該都沒問題了。

值得一提的是Chrome還有一個很好用的Console，可以直接下javascript並生效。

它隱藏的位置在「檢查元素」頁面的左下角第二個按鈕。

叫出來後，它也會告訴你目前的頁面有那些錯誤（包含HTML找不到圖都會跟你講），

那個部份可直接打字，可以試著輸入

alert('test');

你就可以直接看到視窗跳一個alert出來了，如果在中斷點的話，直接輸入變數，

它也會告訴你目前這個變數值為何！！

Google Chrome，這真是太神奇了！！