trunk-logo-white

最新消息

使用中斷點來 Debug JavaScript

Share This Post

分享在 facebook
分享在 linkedin
分享在 twitter
分享在 email

常開發網站肯定會寫到 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 裡面(要一直按繼續執行)

Do You Want To Boost Your Business?​

Drop Us A Line And Keep In Touch​