你可能不知道的Chrome-devtools用法總結

文章同步於 Github blog

前言

做爲一名前端從業者，Chrome-devtools是最經常使用的工具之一。之前一直還以爲本身的這一塊仍是比較熟悉的，結果偶然看到了Chrome-devtools的文檔以後，才發現還有這麼多強大、炫酷，可是相對冷門的用法，以爲有必要來一次梳理和總結。

持續更新中......

經常使用快捷鍵

1. 在 Mac 上使用 Cmd + Shift + C) 在審查模式下打開開發者工具或是在開發者工具已經打開的狀況下開啓查閱選項。
2. 在Source選項，Cmd + o (Mac OS X)能夠搜索文件，Cmd + Shift + o (Mac OS X)搜索文件中的對應函數/特定選擇器的一個選擇框。
3. Cmd + L (Mac OS X)跳轉到指定行號。
4. 要打開抽屜式控制檯，你須要在鍵盤上按下 Esc 鍵或者點擊開發者工具窗口右上角的 Show Drawer 按鈕。

Snippets

Snippets是一個新的能夠在這個開發流程中使用的開發者工具，它容許你在源面板中建立，存儲和執行 JavaScript。

• 書籤 全部你的書籤能夠做爲片斷進行存儲，特別是那些你可能想編輯的。
• 實用工具 調試工具能夠和當前頁面進行交互，而且能夠保存和調試。一個社區企劃的列表已經被提供。
• Debugging Snippets 提供了一個語法高亮顯示而且可持續的多行控制檯，這樣使得調試代碼比單行要更加便捷。
• Monkey-patching code 你想要在運行時修復的代碼能夠經過 Snipptes 來完成，儘管多數時候你可能只是在源面板中實時編輯代碼。

若是你想在控制檯中，執行 Snippet 的一些特殊行中的代碼，你能夠在編輯器中選中這些代碼，而後右鍵，選擇 Evaluate in Console 選項來進行執行。

控制檯

斷言

console.assert() 方法僅僅只當它的第一個參數爲 false 時才顯示一個錯誤信息字符串（它的第二個參數）

在下面的代碼中，若是在列表中的子節點的數量超過 500，將會在控制檯中引發錯誤信息。
示例：

console.assert(list.childNodes.length < 500, "Node count is > 500");

結果：

輸出分組

你能夠經過分組命令把相關聯的輸出信息分在一塊兒。group 命令經過一個字符串的參數來給你的組命名。控制檯將會把全部全部的輸出信息組合到一塊。要結束分組，你只須要調用 groupEnd 便可。

示例代碼

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() 方法提供一個簡單的方法來查看類似數據對象。這將給一個數據提供屬性而且建立一個頭。行數據將會從每個索引屬性值中獲取。

示例代碼：

console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);

結果：

table() 中的第二個參數是可選項。你能夠定義任何你想顯示的屬性字符串數組。

一個使用了對象集合的控制檯輸出表。

示例代碼：

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 格式說明符能夠修改在控制檯中輸出的樣式。以你要修飾的文字配上佔位符開始，而後在第二個參數中寫上你要展現的風格。

更改日誌樣式

示例代碼：

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

結果：

更多請參考：在開發者工具上讓日誌有本身的風格 | G+

計算時間開銷

經過 time() 方法能夠啓動一個計時器。你必須輸入一個字符串來識別時間的標記。當你要結束計算的時候，使用 timeEnd() 方法，而且傳遞一個相同的字符串給構造器。控制檯會在 timeEnd() 方法結束的時候，記錄下標籤以及時間的花銷。

關於 JavaScript 執行時間的示例代碼以及輸出：

示例代碼：

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 失效

參考

• Chrome 開發工具指南
• Chrome 開發者工具官方文檔