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代碼，不打斷點的話，可以通過方式打印日誌信息，也是不錯的調試方法