Chrome 調試技巧

寫在前面本文包括瀏覽器調試，不包括web移動端調試。 本文調試均在chrome瀏覽器進行

alert

這個不用多說了，不言自明

console

基本輸出

想必大家都在用console.log在控制台輸出點東西，其實console還有其它的方法：

注意上面輸出的error和throw出的error不一樣，前者只是輸出錯誤信息，無法捕獲，不會冒泡，更不會中止程序運行。

格式化輸出

除此以外，console還支持自定義樣式和類似c語言的printf形式

DOM輸出

下面幾個比較簡單的，就不舉例子了，簡單說一下：

對象輸出

對於多個對象的集合，你可以這樣，輸出更清晰：

成組輸出

函數計數和跟蹤

註：Chrome開發者工具中的Sources標籤頁也在Watch表達式下面顯示調用棧。

計時

斷言語句，這個c++調試裡面也經常用到。js中，當第一個表達式或參數為true時候什麼也不發生，為false時終止程序並報錯

性能分析

註：Chrome開發者工具中的Audits標籤頁也可以實現性能分析。

debugger

這個重量級的是博主最常用的，可能是c++出身，對於單步調試由衷的熱愛。單步調試就是點一下，執行一句程序，並且可以查看當前作用域可見的所有變數和值。而debugger就是告訴程序在那裡停下來進行單步調試，俗稱斷點。

右邊按鈕如下：

Pause/Resume script execution：暫停/恢復腳本執行（程序執行到下一斷點停止）。

Step over next function call：執行到下一步的函數調用（跳到下一行）。

Step into next function call：進入當前函數。

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

Deactive/Active all breakpoints：關閉/開啟所有斷點（不會取消）。

Pause on exceptions：異常情況自動斷點設置。

其實右側還有很多強大的功能

Watch：Watch表達式

Call Stack: 棧中變數的調用，這裡是遞歸調用，肯定是在內存棧部分調用。

Scope：當前作用域變數觀察。

BreakPoints：當前斷點變數觀察。

XHR BreakPoints：面向Ajax，專為非同步而生的斷點調試功能。

DOM BreakPoints：主要包括下列DOM斷點，註冊方式見下圖

當節點屬性發生變化時斷點（Break on attributes modifications）

當節點內部子節點變化時斷點（Break on subtree modifications）

當節點被移除時斷點（Break on node removal）

Global Listeners：全局事件監聽

Event Listener Breakpoints：事件監聽器斷點，列出了所有頁面及腳本事件，包括：滑鼠、鍵盤、動畫、定時器、XHR等等。

chrome中的調試技巧

DOM元素的控制台書籤

Chrome開發者工具和Firebug都提供了書籤功能，用於顯示你在元素標籤頁（Chrome）或HTML標籤頁（Firebug）中最後點擊的DOM元素。如果你依次選擇了A元素、B元素和C元素，那麼$0 表示C元素，$1 表示B元素，$2 表示A元素。（這個和正則表達式的$符號類似，不過順序不同）

如果你想調試f函數，用debug(f)語句可以增加這種斷點。

Sources標籤頁左側面板上有一個代碼片段（Snippet）子標籤頁，可用於保存代碼片段，幫你調試代碼。

可以用Chrome開發者工具Sources標籤頁中的格式化按鈕（Pretty Print Button）格式化壓縮後的代碼。

在Network面板，選擇一個資源文件，右鍵Copy Response可快速複製響應內容。

利用媒體查詢，這個主要是在Device Mode調節不同的解析度顯示。

選擇Elements，按 Esc > Emulation > Sensors進行感測器模擬。

點擊漸入效果樣式圖標（紫色圖標），可以預覽動畫效果，並可對相應的貝塞爾曲線(cubic-bezier)進行調節動畫效果。

在Source中按住Alt鍵並拖動滑鼠進行多列內容選擇。

Elements面板右鍵執行DOM元素節點，選擇Force Element State或者點擊右側Toggle Element State圖標可以出發偽類。

Network面板中選擇一張圖片，在右側圖片上滑鼠右鍵選擇copy it as a Data URI,就可以獲取圖片的Data URL (base64編碼)。

通過按住Ctrl鍵可以添加多個編輯游標，同時對多處進行編輯。按下Ctrl + U可以撤銷編輯。

Elements面板右側的Style編輯器中，點擊顏色十六進位編碼前的小色塊，會彈出一個調色板。

按下Alt鍵並且滑鼠雙擊選擇DOM元素前面的箭頭，就會展開該DOM元素下的所有位元組點元素.

快捷鍵：

快速定位到行：快捷鍵 (Mac: ),輸入：行號:列號 來進行定位

元素搜索：快捷鍵 (Mac: ),試試在搜索欄輸入ID選擇符或者類選擇符就可以定位到元素啦

調試過程注意事項

1.避免記錄引用類型 當記錄對象或數組時，永遠記得你在記錄什麼。記錄原始類型時，使用帶斷點的watch表達式。如果是非同步代碼，避免記錄引用類型。

這裡，第一個屬性中對象引用的值是不可靠的。當你第一次在開發者工具中顯示這個屬性時，num的值就已經確定了。之後無論你對同一個引用重新打開多少次都不會變化。

2.儘可能使用 source map。有時生產代碼不能使用source map，但不管怎樣，你都不應該直接對生產代碼進行調試。

作者：Faremax

https://segmentfault.com/a/1190000016256731

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