按F12開啟網頁除錯工具，預設開啟的是Elements，顯示的是網頁標籤元素。選擇Source，在左側找到對應的js程式碼檔案（這裡是在page標籤上找到的）

在需要打斷的程式碼上打斷點（打斷點時程式碼會執行到這個位置為止，但不會執行這段程式碼，比如下圖在53行打斷點，就不會執行53行的程式碼，此時的strArr為undefined）

重新整理瀏覽器或者點選觸發事件就能執行程式碼，開始除錯

滑鼠停留在某一變數上可以看到變數在執行到該斷點時的值。

在最右側的狀態列中，scope上可以看到執行到該斷點時的各個變數的值

執行斷點時可以選中觀察到紅箭頭指向的幾個按鈕。當你設定好斷點開始執行的時候，
第一個按鈕就會變成一個三角形，當你點選該三角形開始執行的時候，程式就會自動一次性往下執行，直到執行到下一個斷點的位置，若下面沒有斷點，它就會自動執行至結束。
第二個按鈕是逐行執行（也可以說是逐過程執行），如果這一行呼叫了一個函式，會一次性執行函式得到結果，而不會跳轉到函式內部去執行函式的過程 
第三個按鈕也是逐過程執行，一行一行地執行，只是當這一行是一個函式的時候，他會自動跳轉到函式內部的
第四個按鈕是跳出該函式
第五個按鈕，是忽略所有斷點，自動執行至結束。