前言
作為一名前端從業者，Chrome-devtools是最常用的工具之一。以前一直還覺得自己的這一塊還是比較熟悉的，結果偶然看到了Chrome-devtools的文件之後，才發現還有這麼多強大、炫酷，但是相對冷門的用法，覺得有必要來一次梳理和總結。
持續更新後中……
常用快捷鍵
-
在 Mac 上使用
Cmd + Shift + C)在審查模式下開啟開發者工具或是在開發者工具已經開啟的情況下開啟查閱選項。 -
在Source選項，
Cmd + o (Mac OS X)可以搜尋檔案，Cmd + Shift + o (Mac OS X)搜尋檔案中的對應函式/特定選擇器的一個選擇框。 -
Cmd + L (Mac OS X)跳轉到指定行號。 -
要開啟抽屜式控制檯，你需要在鍵盤上按下
Esc鍵或者點選開發者工具視窗右上角的 Show Drawer 按鈕。
Snippets
Snippets是一個新的可以在這個開發流程中使用的開發者工具，它允許你在源皮膚中建立，儲存和執行 JavaScript。
-
書籤 所有你的書籤可以作為片段進行儲存，特別是那些你可能想編輯的。
-
實用工具 除錯工具可以和當前頁面進行互動，並且可以儲存和除錯。一個社群企劃的列表已經被提供。
-
Debugging Snippets 提供了一個語法高亮顯示並且可持續的多行控制檯，這樣使得除錯程式碼比單行要更加便捷。
-
Monkey-patching code 你想要在執行時修復的程式碼可以通過
Snipptes來完成，儘管多數時候你可能只是在源皮膚中實時編輯程式碼。
如果你想在控制檯中，執行 Snippet 的一些特殊行中的程式碼，你可以在編輯器中選中這些程式碼，然後右鍵，選擇 Evaluate in Console 選項來進行執行。
控制檯
斷言
console.assert() 方法僅僅只當它的第一個引數為 false 時才顯示一個錯誤資訊字串（它的第二個引數）
在下面的程式碼中，如果在列表中的子節點的數量超過 500，將會在控制檯中引起錯誤資訊。
示例：
|
1 |
console.assert(list.childNodes.length 500"); |
結果：
輸出分組
你可以通過分組命令把相關聯的輸出資訊分在一起。group 命令通過一個字串的引數來給你的組命名。控制檯將會把所有所有的輸出資訊組合到一塊。要結束分組，你只需要呼叫 groupEnd 即可。
示例程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var user = "jsmith", authenticated = true, authorized = true; // Top-level group console.group("Authenticating user '%s'", user); if (authenticated) { console.log("User '%s' was authenticated", user); // Start nested group console.group("Authorizing user '%s'", user); if (authorized) { console.log("User '%s' was authorized.", user); } // End nested group console.groupEnd(); } // End top-level group console.groupEnd(); console.log("A group-less log trace."); |
結果：
瀏覽結構化資料
table() 方法提供一個簡單的方法來檢視相似資料物件。這將給一個資料提供屬性並且建立一個頭。行資料將會從每一個索引屬性值中獲取。
示例程式碼：
|
1 2 |
console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]); console.table([[1,2,3], [2,3,4]]); |
結果：
table() 中的第二個引數是可選項。你可以定義任何你想顯示的屬性字串陣列。
一個使用了物件集合的控制檯輸出表。
示例程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 |
function Person(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; } var family = {}; family.mother = new Person("Susan", "Doyle", 32); family.father = new Person("John", "Doyle", 33); family.daughter = new Person("Lily", "Doyle", 5); family.son = new Person("Mike", "Doyle", 8); console.table(family, ["firstName", "lastName", "age"]); |
結果：
將 DOM 元素格式化成 JavaScript 物件
當你想要在控制檯中記錄一個 DOM 元素，就顯示成了 XML 格式。在元素皮膚中也會是同樣的顯示。要顯示 JavaScript 格式的資訊，你可以使用 dir() 方法或者是在 log() 中使用佔位符來替換成你的 JavaScript。
使用 CSS 樣式來更改控制檯輸出形式
CSS 格式說明符可以修改在控制檯中輸出的樣式。以你要修飾的文字配上佔位符開始，然後在第二個引數中寫上你要展示的風格。
更改日誌樣式
示例程式碼：
|
1 |
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large"); |
結果：
更多請參考：在開發者工具上讓日誌有自己的風格 | G+
計算時間開銷
通過 time() 方法可以啟動一個計時器。你必須輸入一個字串來識別時間的標記。當你要結束計算的時候，使用 timeEnd() 方法，並且傳遞一個相同的字串給構造器。控制檯會在 timeEnd() 方法結束的時候，記錄下標籤以及時間的花銷。
關於 JavaScript 執行時間的示例程式碼以及輸出：
示例程式碼：
|
1 2 3 4 5 6 |
console.time("Array initialize"); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.timeEnd("Array initialize"); |
結果：
當 time() 方法正在執行期間，將會生成一個 時間軸 記錄併為其做出註解。這對於追蹤應用的使用以及其來源非常有用。
反向查詢元素
你也可以在任何一個元素上右鍵然後點選 Reveal in Elements Panel，這樣就可以在DOM 中找到它。
控制檯設定
在開發者工具的設定視窗中的常規選項卡里你可以修改四個控制檯設定。
| 選項 | 功能 |
|---|---|
| Hide network message | 讓控制檯不輸出有關網路問題的日誌資訊。比如： 404 和 500 系列的問題將不會被記錄。 |
| Log XMLHTTPRequests | 決定控制檯是否要記錄每一個 XMLHttpRequest。 |
| Preserve log upon navigation | 決定在導航到其他頁面的時候控制檯歷史記錄是否要刪除 |
| Show timestamps | 如果有一個語句呼叫了控制檯，該選項將會顯示每個呼叫的時間戳。這同時也會使 message stacking 失效 |