使用中斷點來 Debug JavaScript

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

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

中斷點基本介紹

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

Google Chrome 操作

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

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

我們可以中間原本只知道 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 裡面（要一直按繼續執行）