Chrome開發(fā)者工具（簡稱DevTools）是一組網(wǎng)頁制作和調(diào)試的工具，內(nèi)嵌于Google Chrome瀏覽器中。通過使用DevTools，可以更加高效的定位頁面布局問題，設(shè)置JavaScript斷點(diǎn)并且更好的理解代碼優(yōu)化。

編寫多行命令

控制臺在多行編輯的模式下，你可以像在普通的文本編輯器中那樣輸入命令。 使用Shift + Enter 可以輸入普通的換行符，而實(shí)現(xiàn)多行的編輯。

image.png

快捷鍵打開審查元素模式

使用Ctrl + Shift + C 或 Cmd + Shift + C可以在DevTools中快速打開審查元素模式。(譯注：可能會與系統(tǒng)快捷鍵沖突)

image.png

預(yù)覽對象

通過log打印的對象可以直接在控制臺中預(yù)覽。

image.png

給控制臺設(shè)置樣式

你可以使用%c格式符，來為控制臺增加樣式：

console.log("%cBlue!", "color: blue;");

訪問最近的控制臺結(jié)果

在控制臺輸入$_可以獲控制臺最近一次的輸出結(jié)果。繼續(xù)以XPath表達(dá)式查詢?yōu)槔?/p>

image.png

使用 console.time() 和 console.timeEnd() 分析循環(huán)的性能

調(diào)用console.time()開啟一個計時器，調(diào)用 console.timeEnd()關(guān)閉計時器，并在終端輸出計時器消耗的時間。計時器在分析循環(huán)這樣的非函數(shù)內(nèi)操作的時候還是蠻有用的。

image.png

注意：console.time() 與console.timeEnd();里面的要對應(yīng)一致。

調(diào)試&DOM編輯

在元素上右鍵，選擇 ‘Break on Subtree Modifications’: 當(dāng)腳本遍歷到該元素子節(jié)點(diǎn)并且進(jìn)行修改操作時，斷點(diǎn)調(diào)試器就會自動被觸發(fā)。

image.png

同樣值得注意的是設(shè)置“ Attribute modifications”選項(xiàng)可以在元素的inline style變化時觸發(fā)調(diào)試器，這在調(diào)試DOM動畫的時候很有用。

條件斷點(diǎn)

DevTools支持條件斷點(diǎn)，我們都知道在代碼的行號上單擊鼠標(biāo)可以在當(dāng)前行設(shè)置一個普通斷點(diǎn)，程序執(zhí)行到這里就會暫停。
(或者在頁面js里寫debugger與普通斷點(diǎn)一樣）。

image.png

接著，你可以在斷點(diǎn)上右鍵然后選擇 "Edit Breakpoint"，這樣就可以看到一個表達(dá)式輸入框。在里面可以定義條件，如果條件為True，斷點(diǎn)就會生效。

image.png

一個通常的表達(dá)式可能是x === 5這種，然而在表達(dá)式寫console.log語句也是完全OK的。

image.png

這個條件表達(dá)式可以正常的工作，并且我們可以很明顯看到console.log語句在代碼經(jīng)過斷點(diǎn)的時候執(zhí)行了:

image.png

壓縮代碼顯示為正常結(jié)構(gòu)

一般web頁面的代碼都是minified壓縮的。DevTools支持將代碼格式化顯示，使代碼可讀

• 前往Source面板選擇你想要查看的JavaScript代碼
• 接下來，點(diǎn)擊"Pretty print" 按鈕 (大概這個樣子 {}）

之前

image.png

之后

image.png

檢索元素上注冊的事件

打開 Elements面板，在DOM樹中用鼠標(biāo)選中一個元素。注意：你也可以在控制臺中使用getEventListeners(targetNode)選擇。
接下來在右側(cè)窗口，展開"Event Listeners"選項(xiàng)。在這里會看到，當(dāng)前元素所綁定事件列表。

image.png

更加高效的處理斷點(diǎn)

當(dāng)你的程序在調(diào)試斷點(diǎn)暫停的時候，你可以進(jìn)行更多的操作：

image.png

你或許知道你可以通過 "Continue", "Step Over", "Step Into" 和 "Step Out" 控制程序執(zhí)行，其實(shí)每一項(xiàng)功能都有對應(yīng)的快捷鍵。學(xué)習(xí)這些快捷鍵操作可以在調(diào)代碼的過程中更加高效。

Watch Expressions (在窗口的右側(cè))會實(shí)時的現(xiàn)實(shí)表達(dá)式的值，所以你無須切換到控制臺去計算表達(dá)式(例如 X === Y)。
Call Stack (在Watch EXpressions下方)會列出當(dāng)前系統(tǒng)已經(jīng)執(zhí)行函數(shù)調(diào)用到哪里了。
在 Scope Variables 部分, 你可以在任何函數(shù)上右鍵然后選擇 "Jump to definition" 跳轉(zhuǎn)到函數(shù)定義的位置。
DOM Breakpoints 會顯示那些在 Elements面板被添加調(diào)試斷點(diǎn)的元素。這個部分將幫助你觀察那些事件是否已經(jīng)成功的綁定到了元素上,以及事件被觸發(fā)的時候執(zhí)行了哪些操作。
XHR Breakpoints 的作用在于為XMLHttpReauest請求設(shè)置了斷點(diǎn)，指定URL可以觀察具體的異步請求情況。

原文詳見：chrome DevTools中文手冊

??加油~