js程式碼如何斷點debug除錯

在網頁開發過程中，經常需要編寫js程式碼來實現動態效果。如果js程式碼較少，邏輯較簡單，往往沒有啥問題。但有時候前端需要實現複雜的功能，這個時間js程式碼往往會很多，邏輯也會較複雜，對於初級程式設計師來說，除錯問題往往難度較大。下面就來介紹下如何使用網頁除錯工具斷點除錯js程式碼

操作方法

（01）介紹的過程還是以一個測試例子來演示，這樣更直觀也更容易理解使用谷歌瀏覽器開啟一個測試的html檔案，裡面包含簡單的js程式碼（只做演示）

（02）按F12開啟網頁除錯工具，預設開啟的是Elements，顯示的是網頁標籤元素，如下圖

（03）給js程式碼打斷點，首先需要找到js資原始檔，選擇Source的tab標籤，出現資原始檔目錄，選擇對應的js程式碼檔案

（04）在js程式碼檔案左側欄單擊可以新增斷點，再點選可以移除斷點

（05）斷點新增完成之後，F5重新整理瀏覽器，可以看到程式碼執行到斷點位置停了下來。游標放在變數名上，可以顯示出變數值

（06）還可以選擇一個表示式，可以直接顯示出這個表示式執行的結果

（07）點選右側單步跳轉，可以逐行除錯，也可以點選進入某個函式方法內部，可以從某個函式方法直接跳出，也可以點選第一個按鈕，直接跳轉到下一個斷點或直接結束。下方可以看到斷點的詳細資訊，如監控變數、呼叫棧、事件等。如下圖所示

特別提示

斷點對於初級程式設計師也一個很好的幫助工具，提供除錯問題的效率

對於除錯js程式碼，不打斷點的話，可以通過方式列印日誌資訊，也是不錯的除錯方法