作為一名前端從業(yè)者，Chrome-devtools是最常用的工具之一。以前一直還覺(jué)得自己的這一塊還是比較熟悉的，結果偶然看到了Chrome-devtools的文檔之后，才發(fā)現還有這么多強大、炫酷，但是相對冷門(mén)的用法，覺(jué)得有必要來(lái)一次梳理和總結。
持續更新中......
在 Mac 上使用 Cmd + Shift + C) 在審查模式下打開(kāi)開(kāi)發(fā)者工具或是在開(kāi)發(fā)者工具已經(jīng)打開(kāi)的情況下開(kāi)啟查閱選項。
在Source選項，Cmd + o (Mac OS X)可以搜索文件，Cmd + Shift + o (Mac OS X)搜索文件中的對應函數/特定選擇器的一個(gè)選擇框。
Cmd + L (Mac OS X)跳轉到指定行號。
要打開(kāi)抽屜式控制臺，你需要在鍵盤(pán)上按下 Esc 鍵或者點(diǎn)擊開(kāi)發(fā)者工具窗口右上角的 Show Drawer 按鈕。
Snippets是一個(gè)新的可以在這個(gè)開(kāi)發(fā)流程中使用的開(kāi)發(fā)者工具，它允許你在源面板中創(chuàng )建，存儲和執行 JavaScript。
書(shū)簽 所有你的書(shū)簽可以作為片段進(jìn)行存儲，特別是那些你可能想編輯的。
實(shí)用工具 調試工具可以和當前頁(yè)面進(jìn)行交互，并且可以保存和調試。一個(gè)社區企劃的列表已經(jīng)被提供。
Debugging Snippets 提供了一個(gè)語(yǔ)法高亮顯示并且可持續的多行控制臺，這樣使得調試代碼比單行要更加便捷。
Monkey-patching code 你想要在運行時(shí)修復的代碼可以通過(guò) Snipptes 來(lái)完成，盡管多數時(shí)候你可能只是在源面板中實(shí)時(shí)編輯代碼。
如果你想在控制臺中，執行 Snippet 的一些特殊行中的代碼，你可以在編輯器中選中這些代碼，然后右鍵，選擇 Evaluate in Console 選項來(lái)進(jìn)行執行。
console.assert() 方法僅僅只當它的第一個(gè)參數為 false 時(shí)才顯示一個(gè)錯誤信息字符串（它的第二個(gè)參數）
在下面的代碼中，如果在列表中的子節點(diǎn)的數量超過(guò) 500，將會(huì )在控制臺中引起錯誤信息。
示例：
console.assert(list.childNodes.length < 500, "Node count is > 500");結果：
你可以通過(guò)分組命令把相關(guān)聯(lián)的輸出信息分在一起。group 命令通過(guò)一個(gè)字符串的參數來(lái)給你的組命名?？刂婆_將會(huì )把所有所有的輸出信息組合到一塊。要結束分組，你只需要調用 groupEnd 即可。
示例代碼
var user = "jsmith", authenticated = true, authorized = true;// Top-level groupconsole.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 groupconsole.groupEnd();console.log("A group-less log trace.");結果：
table() 方法提供一個(gè)簡(jiǎn)單的方法來(lái)查看相似數據對象。這將給一個(gè)數據提供屬性并且創(chuàng )建一個(gè)頭。行數據將會(huì )從每一個(gè)索引屬性值中獲取。
示例代碼：
console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);console.table([[1,2,3], [2,3,4]]);結果：
table() 中的第二個(gè)參數是可選項。你可以定義任何你想顯示的屬性字符串數組。
一個(gè)使用了對象集合的控制臺輸出表。
示例代碼：
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"]);結果：
當你想要在控制臺中記錄一個(gè) DOM 元素，就顯示成了 XML 格式。在元素面板中也會(huì )是同樣的顯示。要顯示 JavaScript 格式的信息，你可以使用 dir() 方法或者是在 log() 中使用占位符來(lái)替換成你的 JavaScript。
CSS 格式說(shuō)明符可以修改在控制臺中輸出的樣式。以你要修飾的文字配上占位符開(kāi)始，然后在第二個(gè)參數中寫(xiě)上你要展示的風(fēng)格。
更改日志樣式
示例代碼：
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");結果：
更多請參考：在開(kāi)發(fā)者工具上讓日志有自己的風(fēng)格 | G+
通過(guò) time() 方法可以啟動(dòng)一個(gè)計時(shí)器。你必須輸入一個(gè)字符串來(lái)識別時(shí)間的標記。當你要結束計算的時(shí)候，使用 timeEnd() 方法，并且傳遞一個(gè)相同的字符串給構造器?？刂婆_會(huì )在 timeEnd() 方法結束的時(shí)候，記錄下標簽以及時(shí)間的花銷(xiāo)。
關(guān)于 JavaScript 執行時(shí)間的示例代碼以及輸出：
示例代碼：
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() 方法正在執行期間，將會(huì )生成一個(gè) 時(shí)間軸 記錄并為其做出注解。這對于追蹤應用的使用以及其來(lái)源非常有用。你也可以在任何一個(gè)元素上右鍵然后點(diǎn)擊 Reveal in Elements Panel，這樣就可以在DOM 中找到它。
在開(kāi)發(fā)者工具的設置窗口中的常規選項卡里你可以修改四個(gè)控制臺設置。
| 選項 | 功能 |
|---|---|
| Hide network message | 讓控制臺不輸出有關(guān)網(wǎng)路問(wèn)題的日志信息。比如： 404 和 500 系列的問(wèn)題將不會(huì )被記錄。 |
| Log XMLHTTPRequests | 決定控制臺是否要記錄每一個(gè) XMLHttpRequest。 |
| Preserve log upon navigation | 決定在導航到其他頁(yè)面的時(shí)候控制臺歷史記錄是否要刪除 |
| Show timestamps | 如果有一個(gè)語(yǔ)句調用了控制臺，該選項將會(huì )顯示每個(gè)調用的時(shí)間戳。這同時(shí)也會(huì )使 message stacking 失效 |
聯(lián)系客服
