如何用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標誌。