使用中斷點來 Debug JavaScript

常開發網站肯定會寫到 JavaScript 的,不管是直接寫 JavaScript 、還是引用 jQuery 來寫。

但是 JavaScript 寫多了,難免會遇到 bug 要修理,除了用 console.log 把執行過程的參數撈出來以外,有沒有其他方法可以知道程式執行的過程呢?試試中斷點吧。

中斷點基本介紹

中斷點,英文 Breakpoint ,一種除錯工具,可以在應用程式執行到一半時,暫停執行讓開發人員檢視現在的變數、參數是多少後再讓應用程式繼續執行。

Google Chrome 操作

打開開發者工具切到 Sources 後,可以看到左邊有各種 Code ,這裡我們用 player.js 示範,這裡我們在第 2 行的數字點一下,第 2 行就會像下圖被標記起來: Mark Line

標記起來後,我們重新讀取一次這個網頁,發現網頁是黑的,而開發者視窗發生了一些變化: Debugger

我們可以中間原本只知道 createVideoPlayer 這個 function 傳入了一個 wsUrl ,現在我們知道他的內容是 ws://localhost:8123/player ,有時候前面的人丟錯東西,可是前面的東西不是你寫的,你就可以用這個找出「它丟了什麼過來」。

除此之外,右邊也上面先列出了「這個 function 是怎麼被呼叫的 Call Stack 」,我們現在這裡是 createVideoPlayer ,往下是從 windows.onload 的事件被觸發,他在 index.js 的第 27 行,某個 function 被呼叫,而你不知道「為什麼它被呼叫」的時候,這東西超方便的!

再往下,下面還有一堆變數、物件被列出來,不過這裡還沒初始化,所以先丟著。這時按下右邊上面繼續符號就可以讓程式繼續跑。

接著我們想測試 adjustVideo ,所以我們暫停有用到這個功能的 83 行的,然後去按一下 zoom 按鈕,這時候旁邊就可以看到旁邊有我們要測試的 adjustVideo 了,對它右鍵→ Store as Global Variable 後,可以看到下面 Console 有把它存下來了,這時候我們就直接在 Console 對 temp 操作。

Firefox 操作

Firefox 的操作步驟跟 Google Chrome 相當類似,但是 Firefox 的呼叫堆疊( Call Stack )在右邊,另外 Firefox 沒有提供 Store as Global Variable 的選項。

使用範圍

目前我自己在開發過程中,認為以下幾個狀況適合使用中斷點來 Debug :

  • 我知道事情發生了,但是我不知道它怎麼來的
  • 有一大堆參數要看,光是寫 console.log 手就酸了的地方。
  • 我根本沒有權限動伺服器,可是我需要知道它怎麼故障的。

但是在以下的地方,我還是會用 console.log 把過程需要的東西顯示出來:

  • 迴圈、setInterval 裡面(要一直按繼續執行)