Chrome 開發者工具代碼行斷點調試

想法丨發現丨習慣

同道者同行 同行者同享

作為一名前端開發者，當代碼出現問題時你是怎麼去排查的呢？相信大部分童鞋是通過 alert 和 console 來解決的。通過這種方式能夠解決我們平時遇到的大部分問題，但當我們遇到更為複雜的問題時，上述的方式並不能幫助我們高效地解決問題，這時我們可以通過 Chrome 開發者工具的斷點調試功能來幫助我們更高效地排查和解決問題。

一般來說，打開 Chrome 開發者工具有以下三種方法：

在Chrome菜單中選擇「更多工具 - 開發者工具」

在頁面元素上右鍵點擊，選擇「檢查」

使用 快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

Chrome 開發者工具提供了各種方便開發者調試的功能，主要有

代碼行斷點、DOM 斷點、XHR 斷點、事件監聽器斷點、異常斷點和功能斷點。本章主要講的是最經常用到的也是最方便調試的代碼行斷點。

在進行代碼行斷點調試時，Chrome 開發者工具中的 Sources 面板是我們主要操作的功能區域，我們可以在該面板中對已請求資源進行觀察調試。

Source 面板主要分為內容源區（左）、顯示區（中）、調試功能區（右）三個區域。

內容源區，分為 Sources、Content scripts 和 Snippets 三個標籤 。其中Sources 是指頁面中請求的各種資源，它是按照域來劃分各種不同的請求資源的（如果你有使用抓包工具 Charles 的經驗，那麼你會發現這裡跟 Charles 中的 Structure 模式是類似的）；Content scripts 是指谷歌的擴展程序；而 Snippets 是指創建的小腳本，我們可以在該標籤內創建我們自己的腳本並執行它。這裡我們只需要關心 Sources 即可。

顯示區，顯示所選擇的資源內容，在進行代碼行斷點調試中，我們需要在該區域設置斷點，並且在調試過程中，我們可以在該區域獲得許多關於變數和函數的信息。

調試功能區，在該區域我們根據不同的調試需求進行不同的操作，如執行下一步代碼、激活和禁用斷點等，在斷點調試中觀察程序在執行中的執行上下文棧（Call Stack）、作用域鏈（Scope），以及設置其它各種不同類型的斷點等等。

接下來對調試功能區進行詳細的介紹，調試功能區如下圖所示：

我們可以看到調試功能區上方有各個不同的按鈕，當滑鼠移至該按鈕上方時會出現對該按鈕功能的簡短介紹，從左至右如下：

Pause/Resume script execution ：暫停/恢復腳本執行。

Step over next function call ：跳過下一個函數上下文。即不遇到函數時，執行下一步；遇到函數時，不進入函數直接執行下一步。

Step into next function call ：跳進下一個函數上下文。即不遇到函數時，執行下一步；遇到函數時，進入函數上下文。

Step out of current function ：跳出當前函數。

Deactivate/Activate breakpoints ：停用/激活全部斷點。

Pause on exceptions/Don"t pause on exceptions ：暫停捕獲異常/不暫停捕獲異常。

下方則是一些不同的斷點調試模式或者是調試過程中一些信息的觀察等：

Watch ：觀測表達式。為目前斷點添加表達式，使得每次斷點往下走一步都會執行你的代碼。

Call Stack ：執行上下文棧。執行上下文棧是指一個存放各個執行上下文的棧(一種先進後出的數據結構)。

Scope ：作用域鏈。每個執行上下文都有其作用域鏈，作用域鏈包含了當前執行上下文和上層執行上下文的變數對象。

Breakpoints ：代碼行斷點。

XHR Breakpoints ：XHR 斷點。

DOM Breakpoints ：DOM 斷點。

Global Listeners ：全局監聽。

Event Listener Breakpoints ：事件監聽器斷點。

介紹完 Sources 面板後，讓我們來看看如何進行代碼行斷點調試。

其中代碼行斷點還分為普通代碼行斷點調試和有條件的代碼行斷點調試。

斷點設置

代碼行斷點，顧名思義就是在具體的資源文件中的某一行代碼設置斷點，在前面我說過 Sources 面板主要分為內容源區（左）、顯示區（中）、調試功能區（右）三個部分，當我們在內容源區選擇了包含有 js 代碼的資源後，顯示區則會顯示相應的源代碼，只要在顯示區中顯示代碼行數的地方「左鍵」或者「右鍵 - Add breakpoint」即可設置普通代碼行斷點。

如果在顯示區中顯示代碼行數的地方「右鍵 - Add conditional breakpoint」，則會在代碼行下方出現一個輸入條件表達式的框，輸入觸發斷點的條件後按下 Enter，即可設置有條件的代碼行斷點。之後只有在觸發了條件表達式的情況下才會觸發該斷點。

設置後在調試功能區的 Breakpoints 則會顯示出我們當前設置的斷點，在這裡能夠激活禁用或刪除斷點。

觀察信息

設置了代碼行斷點後刷新頁面，程序會在執行這行代碼之前暫停，這時我們可以在顯示區觀察到當前環境的各個變數和函數信息，也能夠在調試功能區觀察當前環境的各種信息，如執行上下文棧、作用域鏈等。

上圖中的代碼是一個閉包的例子，可以看到函數 innerFn 的作用域鏈包含了自己執行上下文的變數對象、函數 outerFn 上下文的變數對下和全局對象，如下所示

在大多數情況下，我們會把 innerFn 當作是閉包，而在 Chrome 開發者工具中則會把 outerFn 當作閉包，如圖中顯示 Closure（outerFn），這一點我也在《 javascript 閉包詳解 》 中有提到過，感興趣的童鞋可以去看看。

執行下一步代碼

最後在調試功能區的的上方按鈕部分，我們根據需要點擊不同的按鈕，執行下一步的操作，觀察代碼執行情況和變數函數信息等。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！