-
介紹的過程還是以一個測試例子來演示，這樣更直觀也更容易理解
使用谷歌瀏覽器打開一個測試的html文件，裏面包含簡單的js代碼（只做演示）
-
按F12打開網頁調試工具，默認打開的是Elements，顯示的是網頁標籤元素，如下圖
-
給js代碼打斷點，首先需要找到js資源文件，選擇Source的tab標籤，出現資源文件目錄，選擇對應的js代碼文件
-
在js代碼文件左側欄單擊可以添加斷點，再點擊可以移除斷點
-
斷點添加完成之後，F5刷新瀏覽器，可以看到代碼執行到斷點位置停了下來。光標放在變量名上，可以顯示出變量值
-
還可以選擇一個表達式，可以直接顯示出這個表達式執行的結果
-
點擊右側單步跳轉，可以逐行調試，也可以點擊進入某個函數方法內部，可以從某個函數方法直接跳出，也可以點擊第一個按鈕，直接跳轉到下一個斷點或直接結束。下方可以看到斷點的詳細信息，如監控變量、調用棧、事件等。如下圖所示
