如何用Chrome開發者工具來調試腳本？

Javascript腳本在網頁開發中經常會用到，在開發過程中，如果遇到一些程序問題，我們怎樣進行調試？怎樣查找到程序出問題的地方？可以利用Chrome瀏覽器的開發者工具來進行腳本調試。下面一起來看下具體怎麼操作。

操作方法

（01）我們例子的Html代碼很簡單，如圖，就是一個按鈕，點擊這個按鈕，會觸發點擊事件。

（02）點擊事件的腳本代碼如圖，也很簡單，主要是對二個數做相加操作，然後alert彈出相加的結果。邏輯很簡單，我們這裏主要是演示調試的過程。

（03）代碼都寫好了，我們用Chrome瀏覽器打開這個網頁。如圖，

（04）點擊瀏覽器右邊的‘三點’按鈕，在彈出的菜單上的‘更多工具’裏，有個‘開發者工具’，點擊它打開這個工具

（05）打開後，如圖，這個就是chrome的開發者工具。我們點擊工具條上的‘Sources'欄

（06）點擊後，我們就可以看到我們網頁的源代碼了，因為我們的腳本文件是直接寫在文件上的，我們在左邊的目錄上，點擊選中這個文件，在右邊就可以看到這個文件的腳本代碼了，如圖，可以看到我們寫的二個function的代碼。

（07）我們點擊這腳本上的某一行，就在這行添加了一個斷點，當程序運行到這個斷點，就會產生中斷，讓我們一步步的調試。

（08）我們來試下中斷，點擊頁面上的‘求和’按鈕，可以看到，程序在剛才的斷點上中斷了，

（09）我們可以點擊右邊的‘運行’按鈕，點擊一次，代碼就往前運行一次，以便我們逐步調試。在代碼運行的時候，在右邊的監控欄，還會實時顯示出當前代碼變量的值，比如我們代碼裏的 n1, n2, 和這二個值相加後的結果值 result，都可以在這裏顯示出來。以便我們判斷程序有沒有正確執行。

（10）除了在開發者工具裏點擊代碼添加斷點，我們還可以直接在代碼里加上斷點標誌，‘debugger;' 當程序運行到這個標誌所在的地方時，就會產生中斷。

（11）如圖，程序運行到這個debugger標誌的地方時，就產生了中斷。所以我們在代碼開發時，如果想要在某一行代碼裏進行中斷調試，就可以直接在這行添加debugger標誌。