閱讀(12.9k) 書簽贊(2) 我要糾錯

Chrome開發(fā)工具技巧和竅門

2018-03-01 18:47 更新

技巧和竅門

控制臺

編寫多行命令

當你進入控制臺的多行編寫模式時，你可以像標準文字編輯器那樣使用文本塊。Shitf + Enter 允許你從控制臺進入多行模式。

consolemultiline

當你編寫的 JavaScript 遠比單行文字要復雜的時候，這是非常有用的。一但你創(chuàng)建了一個文字編寫區(qū)域，在命令的最后按 Enter 就會開始運行。

consolerun

關(guān)于多行控制臺支持持久性問題，請閱讀Snippets-該特征可以保存并執(zhí)行開發(fā)工具中可用的特定 JavaScript 片段。

檢查元素模式的快捷啟動方式

Ctrl + Shitf + C 或者 Cmd + Shift + C 將會在檢查元素模式中打開開發(fā)者工具（或者選擇讓它獲取焦點），這樣你就可以立即檢查當前頁面。同時焦點全部都會返回到該頁面上。在 Mac 上，使用 Cmd + Shift + C 也可以達到相同的效果。

更多：使用控制臺 | 開發(fā)者工具文檔

對 console.table 命令的支持

這個命令記錄了任何使用列表布局的數(shù)據(jù)。下面是一些例子，包括如何使用：

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

consoleg1

也有另一個 columns 可選參數(shù)，它會以字符串數(shù)組的形式展示。下面，我們定義了一個 family 對象，其中包含很多 “Person”，之后選擇一行來顯示：

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"]);

consoleperson

同時，如果你僅僅是想輸出這些數(shù)據(jù)中的前兩行，使用：

console.table(family, ["firstName", "lastName"]);

更多:對 console.table 命令的支持已經(jīng)上線 | G+

預覽控制臺日志對象

日志輸出的對象可以使用 console.log() 方法直接在開發(fā)工具中預覽，而不需要更多的操作。

傳遞多個參數(shù)來指定控制臺日志樣式

就像我們之前在文檔中說過的，你可以使用 %c 給你的控制臺添加樣式，就像你在 Firebug 中一樣。比如：

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

同樣也支持多種樣式:

console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;');

更多：在開發(fā)者工具上讓日志有自己的風格 | G+

清理控制臺歷史的快捷鍵

打開控制臺，你可以通過 Ctrl + L 或者 Cmd + L 快捷鍵來快速的清理控制臺歷史.控制臺中的 console.clear() 命令通過 JavaScript 的控制臺 API 來完成清除工作，就和 shell 下的 clear() 一樣。

成為一個鍵盤忍者

在開發(fā)者工具上，你可以使用 ? 來打開通用設(shè)置，從那里你可以定位到快捷鍵面板來查看所有支持的快捷鍵

通過控制臺使用元素

選擇一個元素然后在控制臺中輸出 $0，它將會使用腳本來執(zhí)行。如果在這個頁面上已經(jīng)有 jQuery 對象，你可以使用 $($0) 來重新選擇這個頁面上的元素。

你也可以在任何一個元素上右鍵然后點擊 Reveal in Elements Panel，這樣就可以在DOM 中找到它。

通過 XPath 表達式查詢 DOM

XPath 是一個在文檔中選擇節(jié)點的查詢語言，一般來說返回一個節(jié)點的集合，字符串，boolean,或者數(shù)字。你可以在 Javascript 開發(fā)者工具控制臺中使用 XPath 表達式來查詢 DOM。

$x(xpath) 命令允許你執(zhí)行一個腳本。下面的例子將會展示如何通過 $x('//img') 來搜索圖片：

然而，該函數(shù)同樣能夠接受第二個參數(shù)，該參數(shù)是關(guān)于路徑上下文的，比如：$x(xpath,context)。這就允許我們選擇一個詳細的上下文（也就是一個內(nèi)嵌幀）然后使用 XPath 來查詢。

var frame = document.getElementsByTagName('iframe')[0].contentWindow.document.body;
$x('//'img, frame);

在詳細的內(nèi)嵌幀中查詢圖片

獲取控制臺最后的結(jié)果

使用 $_helper 會允許你獲取控制臺的最后結(jié)果。我們可以用另外一個 XPath 的例子來證明這個：

image_17a

使用 console.dir

console.dir(object) 命令將會以一個可擴展的 JavaScript 對象形式列出所有提供的對象的所有屬性。下面的例子展示了 document.body 下的一個表示屬性的可擴展對象。

在具體的幀中運行 JS 控制臺

開發(fā)者工具底部是下拉選項，它將根據(jù)你當前標簽的上下文改變。當你在控制臺面板的時候，下拉列表允許你選擇一個控制臺能夠操作的幀上下文。在下拉框中選擇你的幀，然后你會馬上在右側(cè)找到它。

當導航到一個新的頁面時停止清理控制臺

有時候要跳轉(zhuǎn)到一個新的頁面上時，你想保持在控制臺上的日志信息。要實現(xiàn)這個，只要在控制臺右鍵，然后選擇 "Preserve Log upon Navigation"。當你從當前頁面導航到一個不同的頁面時，控制臺歷史信息將不會被清除。

使用 console.time() 和 console.timeEnd() 進行標準循環(huán)

console.time() 用一個特定的標簽開啟一個新的計時器。當用相同的標簽調(diào)用 console.timeEnd() 的時候計時器停止，在控制臺上會顯示兩次記錄間流逝的時間。在不調(diào)用函數(shù)的情況下，該方法用于衡量循環(huán)或者代碼非常有用：

使用 console.profile() 和 console.profileEnd() 來進行配置

打開開發(fā)者工具，調(diào)用 console.profile() 來開始一個 Javascript CPU 配置。一般來說一個配置只能標記一個標簽，就像下面的 console.("Processing") 一樣。要結(jié)束這個配置，調(diào)用 console.profileEnd()。

每一個配置文件運行后都會添加到 Profiles 面板中

同時也會添加到 console.profiles[] 數(shù)組中，以供后續(xù)的查看：

查看更多有關(guān)控制臺技巧，請進入使用控制臺。

通過控制臺 API提供的方法來記錄程序的診斷信息，比如 console.log() 或者是 console.profile（）
命令行 API提供的方法,比如選擇元素的 $() 命令，或者開啟 CPU 配置的 profile() 命令。

時間軸

利用時間軸幀模式配置幀

時間軸面板提供了關(guān)于加載你的 web 應用時花費時間的預覽，比如進入 DOM 事件花費的時間，提交頁面布局或者在屏幕渲染元素的花費。它也允許你進入三個單獨的方面來查明為什么你的應用會很慢，這三個界面是：時間，幀以及實際內(nèi)存使用。

時間軸默認情況下并不會顯示任何數(shù)據(jù)。但是通過打開你的 app，然后點擊在窗口底部的圓圈 recording-off ，來開啟一個 session 的記錄?；蛘呤褂?Ctrl + E 或者 Cmd + E 的快捷鍵也會開始一個錄制的標記。

這個錄制按鈕將會從灰色變?yōu)榧t色，時間軸也會開始捕獲你的 app。在你的 app 中完成幾個動作后再次按下按鈕來停止錄制。

幀模式讓你洞察到進行中的任務，你的應用程序會按幀（更新）在屏幕上顯示。在這個模式中，陰影的垂直區(qū)域標尺對應重新計算的樣式，合成等等。每一個垂直長條的透明部分表示空閑時間，至少是在你頁面上的空閑時間。

舉個例子，你的第一幀需要 15 毫秒，但是執(zhí)行第二幀需要 30 毫秒。一個常見的情況是幀的刷新率是同步的，所以第二幀將稍微比 15 毫秒多一點去渲染。這里，3 號幀丟失了 “true” 硬件幀并且已經(jīng)提交給了后面一幀，因此第二幀的時長其實相當于雙倍了。

如果你的應用并沒有很多的動畫在其中，并且在執(zhí)行輸入事件的時候瀏覽器需要執(zhí)行大量重復的動作，那么使用幀是個好辦法。當你有足夠的時間在幀內(nèi)執(zhí)行完這樣的事件，那么你的應用響應能力會更高，并且將會有良好的用戶體驗。

當我們設(shè)定為 60 fps時，我們有最多 16.66 ms來做點事情。這點時間并不算多，所以讓盡可能提升你動畫的性能是十分重要的。

更多：利用時間軸開發(fā)工具提升性能|開發(fā)者工具文檔

使用警告定位到指定的布局事件

在時間軸中，如果你在記錄視圖中看見一個黃色的圖標，就說明你的一些代碼觸發(fā)了強制/同步布局事件。

你希望避免這些不必要的布局觸發(fā)器，因為他們能夠顯著影響到你的頁面的性能。

更多：時間軸警告是一種性能的味道 | G+

通過別人來分享和分析一段時間軸記錄

你可以瀏覽和并且跟其他開發(fā)者分享時間軸，這要感謝一個有用的導入/導出插件。使用 Ctrl + E 或者 Cmd + E 來開始/結(jié)束記錄然后在時間軸上右鍵，選擇 Save Timeline data。該菜單還支持重新瀏覽已經(jīng)導出的時間軸數(shù)據(jù)。

給時間軸記錄做注釋

使用 console.timeStamp() 函數(shù)可以給你的時間軸記錄添加注解。這就幫你把你的 web 中的代碼和另外一個窗口或者瀏覽事件關(guān)聯(lián)在了一起。

更多：開發(fā)者工具控制臺 API-制作時間軸 | 開發(fā)者文檔

你的應用可以通過調(diào)用 console.timeStamp() 函數(shù)來對你的時間軸記錄進行注釋。這就使你可以輕易的將代碼和另一個窗口以及瀏覽事件綁定在一起。在下面的記錄中，時間軸被標記為 “Adding Result”。下面來看看通過使用控制臺來制作時間軸的例子。

FPS 計數(shù)器/HUD 展示

real-time FPS 計數(shù)器是一個用來視圖化幀速和躲閃的工具。該工具可以通過進入設(shè)置菜單然后選中 ”Show FPS meter“ 來使用。

當這個工具開始運轉(zhuǎn)，你將會看到在右下角有一個黑色的盒子，同時還有幀的統(tǒng)計數(shù)字。該計數(shù)器可以在實時編輯中用于診斷你的頁面為什么掉幀，而不必在時間軸視圖間來回切換。

需要謹記的是如果你只是追蹤 FPS 計數(shù)器可能會使你沒有注意到的斷斷續(xù)續(xù)的跳幀現(xiàn)象。在使用 content 的時候一定要注意。如果 FPS 在桌面上的效果與在設(shè)備上的效果不一樣，這也沒有意義。所以要特別的小心在性能上的配置。

更多配置使用時間軸的實用技巧，請?zhí)D(zhuǎn)到利用時間軸來進行性能描述：

一個只要應用運行就會記錄并分析所有活動的地方，這是開始調(diào)查你的應用性能問題的最好的地方。
深入了解幀速，記錄中生成的幾種類型以及 Chrome 計算頁面元素的位置和大小時的布局流程。

概述

通過 `3 snapshot` 技術(shù)來查找 Javascript 內(nèi)存漏洞

打開開發(fā)者工具選擇概述面板
在你的頁面進行一些引起漏洞的操作
生成一個新的堆快照
重復步驟 2 和步驟 3 三次
選擇最后的堆快照
將過濾器從”所有對象“改為”快照 1 和 2 之間的對象“
你現(xiàn)在應該已經(jīng)可以看到漏洞對象的集合。你可以選擇其中的一個并在對象保留樹中來查看其包含內(nèi)容的列表，這有助于找到泄露的原因。

更多：BloatBusters-在 Gmail 中消除內(nèi)存漏洞

理解堆檢測中的節(jié)點

紅色節(jié)點是處于生命周期的，因為他們是分離的 DOM 樹中的一部分，并且樹中有一個節(jié)點被 JavaScript （或者是一個閉包變量，一些屬性）引用。

黃色節(jié)點表示一個從 DOM 節(jié)點，引用的一個對象的屬性或者一個數(shù)組元素。應該有一系列從 DOM 窗口到元素的屬性(比如 window.foo.bar[2].baz)。

更多所：理解堆概述中的節(jié)點 | G+

理解在 CPU 概述中的時間開銷

在 CPU 概述中，”（idel）“，時間是當前標記的。花費在非瀏覽器中的程序是（”program“）。

堆配置視圖的更多了解

一個我們經(jīng)常問的問題：在開發(fā)者工具 > Profile > Heap sanpshot 中，Comparison，Dominator，Containment 以及 Summary 視圖的區(qū)別是什么。這些視圖提供了對分析器中數(shù)據(jù)的更多視角，就像下面一樣：

Comparsion 視圖通過顯示已經(jīng)被垃圾回收器正確清理的對象來幫助你追蹤內(nèi)存漏洞。通常用于比較某次操作前后的兩份（或更多）內(nèi)存快照。具體內(nèi)容是通過檢查變化區(qū)釋放的內(nèi)存和引用計數(shù)來確認內(nèi)存泄漏的存在以及造成泄露的原因。

Dominators 視圖用于確認垃圾回收正常工作時出現(xiàn)的本不該存在于對象上的引用（也就是說他們）。

Summary 視圖可幫助您在利用構(gòu)造器名稱分組的基礎(chǔ)上捕獲對象（和它們的內(nèi)存使用）。這個視圖通常對追蹤 DOM 漏洞很有幫助。

Containment 視圖提供了一個更好的對象構(gòu)建視圖，它幫助我們通過全局的命名空間（也就是窗口）來分析對象，找出是什么是他們一直保持存在。它允許分析程序閉包并從底層深入你的對象。

更多內(nèi)存剖析技巧，請參考內(nèi)存性能剖析:

該文章會叫你如何使用分析堆內(nèi)存來找出你的應用中的內(nèi)存漏洞
可以深入查看不同視圖的數(shù)據(jù) - 包括 Summary 視圖，Comparison 視圖，Containment 視圖以及 Dominator 視圖。

源

在 DOM 修改器上調(diào)試

右鍵點擊一個元素然后選中 “Break on Subtree Modification”:不論什么時候腳本穿過了元素并且修改了他們，調(diào)試器都能夠自動的運轉(zhuǎn)起來，以便告訴你正在發(fā)生什么：

另外值得一提的是，暫停內(nèi)嵌樣式屬性的修改，對于調(diào)試 DOM 動畫非常有用。

追蹤未捕獲異常

從 Sources 面板中，雙擊暫停腳本執(zhí)行按鈕會在未捕獲異常發(fā)生時中斷代碼執(zhí)行，并保留調(diào)用堆棧和應用程序的當前狀態(tài)-有些人將之稱為紫色暫停。

使用 console.log 的條件斷點活動

我們知道開發(fā)者工具支持條件斷點，只需要你在想要的行上點擊一下設(shè)置一個斷點，就跟普通的設(shè)置斷點一樣。

你可以在某一行右鍵然后選擇 "Edit Breakpoint"，然后就出現(xiàn)了一個表達式編輯區(qū)域。把你需要的條件寫在這里（比如：如果表達式的返回值為真，則斷點將會在這里停止）

一個普通的表達式可能是這個樣子：x === 5，然而 console.log 聲明同樣是完全有效的輸入。

這個方法十分有效，并且我們也可以輕易的看見在斷點上調(diào)用的 console.log 語句：

由于 console.log 沒有一個真正的返回值，不確定的條件斷點不會導致執(zhí)行被暫停，你的代碼將繼續(xù)運行。這非常像一個通過硬編碼來執(zhí)行 console.log 表達式而不直接修改你的代碼。

更多：JavaScript 斷點活動 | randomthink.net

格式化 JavaScript

開發(fā)者工具支持格式化精簡后的 JavaScript 以便閱讀。要格式化，你需要：

進入 Sources 面板，然后從腳本列表中選擇你想要格式化腳本。
然后點擊在開發(fā)者工具底部的格式化按鈕(用大括號來標記)
你的代碼應該已經(jīng)排版好了

格式化之前：

格式化之后：

重點觀察一個表達式或者一個變量的值

在一次調(diào)試會話中，為了避免重復編寫一個你要多次查看的變量或者表達式，你可以把它添加到 “Watch Expression” 列表中。當你修改它們之后可以刷新或者直接運行代碼來查看改變后的效果。

查看內(nèi)部屬性

假設(shè)你定了一個變量，其值為 s 并且對它執(zhí)行下面的操作：

s.substring(1, 4)  // returns 'ell'

你認為 s 是一個字符串么？事實上不一定。它也可能是一個字符串對象的包裝。試試看下面的觀察表達式：

"hello"
Object("hello")

第一個是字符串常量，第二個是一個完整的對象。令人困惑是，這兩個值幾乎是一模一樣的。但是第二個有一個真正的屬性，你也可以自行設(shè)置。

展開屬性列表你就會注意到，它為什么不是一個完整的對象：它會有一個內(nèi)在的屬性 [[PrimitiveValue]],這里面存儲著字符串原本的值。你并不能通過你的代碼來訪問這個屬性，但是你現(xiàn)在可以通過開發(fā)者工具的調(diào)試工具來查看它。

更多：通過開發(fā)者工具學習 Javascript 概念 | GitHub

簡化調(diào)試 XHRs

從調(diào)試器中打開 "XHR 斷點"選項，當開始一個 XHR 請求時你可以指定你的代碼跳入任何一個 URL (甚至是一個子字符串)。甚至是告訴它加載每一個 XHR 時都中斷。

取消注冊在元素上的事件處理器

隨著 “Element” 標簽的打開，找到在 DOM 樹中的元素，然后點擊要選擇的節(jié)點。注意：你也可以通過使用控制臺 API 中的 getEventListener(targetNode) 來實現(xiàn)。

在右側(cè)，點擊展開 “Event Listeners” 選項。在那里你會找到所有注冊在元素上的事件監(jiān)聽列表。

Esc 鍵顯示控制臺

當在 Sources 面板中調(diào)試的時候，你有時候會希望同時進入控制臺。這時你只需要簡單的點擊下 escape 鍵就可以打開控制臺了。

你可以在這個控制臺編寫執(zhí)行 JavaScript 來查看預期效果，但是更好的地方是如果你在一個斷點初暫停，已經(jīng)執(zhí)行的 JS 將會在當前暫停的上下文中。

提升在斷點處暫停時的效率

當你的腳本在一個斷點處暫停時，會有一些有用的參數(shù)供你使用。

你可能會知道通過 “Continue”，“Step Over”,"Step Into" 以及 “Step Out” 來控制代碼的執(zhí)行，但是這些按鈕都有鍵盤快捷鍵。學習這些會讓你的在代碼中導航時更加高效。

觀察表達式（在側(cè)邊欄的右側(cè)）將會將會監(jiān)視表達式，所以你不必總是跳回控制臺（例如 X===Y）。調(diào)用堆棧顯示了從系統(tǒng)開始運行一直到當前位置時經(jīng)歷過的函數(shù)調(diào)用。

在 Scope Variables，你可以在任何函數(shù)上右鍵然后使用 “Jump to definition” 來進入定義這個函數(shù)的腳本內(nèi)部。

DOM 斷點展示了任何在元素面板中右鍵一個節(jié)點時使用 “Break on” 做出的更改。這對調(diào)試監(jiān)聽器是否已經(jīng)正確的添加到節(jié)點上以及當他們被調(diào)用時發(fā)生了什么很有幫助。

XHR 斷點面板也同樣十分有用，因為它可以為 XMLHttpRequests 設(shè)置斷點。通過輸入一個你想要查看 URL 子字符串來具體說明斷點。

在異常中暫停

你可能想在拋出一個異常的時候暫停 JavaScript 的執(zhí)行，并檢查調(diào)用棧，范圍變量和您的應用程序的狀態(tài)。

在腳本面板的頂部有一個暫停按鈕 pause-gray ,它可以讓你選擇不同的異常處理模式。你可能不想暫停所有的異常 pause-blue ，除非你正在調(diào)試的代碼是被 try/catch 包裹著的。

全部腳本文本上的搜索

如果你想在所有加載在一個頁面上的文件中查找一個指定的字符串，你可以通過下面的快捷鍵調(diào)用搜索面板：

Ctr + Shift + F（Windows,Linux）
Cmd + Opt + F（Mac OSX）

這個搜索同時支持正則表達式和區(qū)分大小寫。

通過開發(fā)者工具和源映射調(diào)試 CoffeeScript

源映射提供了一個語言無關(guān)的方法來將編譯過的工程代碼映射到你原來的開發(fā)環(huán)境中編寫的源代碼。

當分析產(chǎn)品代碼的時候，代碼通常已經(jīng)被縮小過（以防一個語言被翻譯成編譯過的 JavaScript），這就使你很難找到哪一行代碼是映射到你原本的代碼中的。

在編譯階段，源映射（source map）可以保存這個信息以允許你調(diào)試產(chǎn)品代碼，并且會將你原本文件中的行號返回給你。這使得整個世界都不同了，因為你可以再閱讀產(chǎn)品代碼的同時進行調(diào)試了，不管它是在 CoffeeScript 中或是其它分位置 - 只要它具有一個源映射，你就可以輕松調(diào)試。

要在 Chrome 中啟用源映射：

打開 Setting cog > General
選擇 “Enable source maps”

下面：

要將你的 CoffeeScript 編譯到 JavaScript，執(zhí)行這條命令：coffee -c myexample.coffee
安裝 CoffeeScript Redux
創(chuàng)建一個源映射文件 example.js.map ，這個文件應該保存映射信息：$ coffee-redux/bin/coffee --source-map -i example.coffee > example.js.map
確保生成的 JavaScript 文件，example.js，在最后一行已經(jīng)有映射到源文件的 url，就像這樣：//# sourceMappingURL=example.js.map

當你開始調(diào)試你的 CoffeeScript 代碼的時候，應該感謝這個聲明，是它讓開發(fā)者工具知道了你的源文件在哪里。

然后，您可以利用這個源映射，在您的優(yōu)化 / 縮小階段使用類似 UglifyJS2 的工具引用第一個源映射（ CS 到 JS ），并把它所映射的簡化后的 JavaScript 文件返回到 CoffeeScript 上，而不是直接傳給編譯后的 JavaScript 的輸出位置。這就允許你直接調(diào)試產(chǎn)品代碼，并且改動會直接返回到 CoffeeScript 源代碼中。

更多：NetTuts-Source Maps 101

更多有用的創(chuàng)作工作流程技巧，請轉(zhuǎn)到創(chuàng)作和開發(fā)工作流程:

在這里你可以學習如何優(yōu)化你的開發(fā)工作流程以節(jié)省一些常規(guī)操作所花的時間，比如定位到文件或者某個函數(shù)，持續(xù)編輯腳本或樣式表以及簡化調(diào)整布局的過程。
學習有關(guān)新特性的內(nèi)容，比如 Snippet，該特性可以用于保存并執(zhí)行開發(fā)工具內(nèi)置的特定的 JavaScripts 片段。

元素

啟用尺子

在 Setting > General > Show rulers 下可以啟用一個尺子，當你鼠標懸停在某個元素上或者選中一個元素的時候，它會顯示出來。

CSS 屬性的自動完成

開發(fā)者工具支持 CSS 屬性以及值的自動完成（包括那些需要前綴的），這對于決定為當前元素設(shè)置什么屬性是很有幫助的。

當你開始為屬性或者值輸出一個名稱的時候就會彈出建議，而且你也可以使用右鍵在可用的屬性列表中滾動。要知道，選中的選項會直接應用到頁面樣式表中因此它的效果是可以直接看到的。

在樣式面板中，使用已命名的字段（比如：“red”）,HSL，HEX 或者 RGB 值可以定義顏色。如果需要的話，你可以按住 shift/鼠標點擊以在這些值之間迭代選擇。

如果你想要展示所有支持的屬性，你可以使用 Ctrl + space 來展示一個建議列表。

建議列表是和特定內(nèi)容相關(guān)的并且在特定情況下（比如，針對字體的時候）數(shù)字，已命名或者帶前綴的值也是也可以顯示出來的。

在開發(fā)者工具中的顏色選擇器

開發(fā)者工具中包含了一個內(nèi)置的顏色選擇器，當你點擊任何有效顏色的預覽方塊時，就會顯示出來。

colorpickercanary

你可以 Shift + 點擊，來更改選中顏色的格式。

添加新的 CSS 樣式

在 CSS 規(guī)則的代碼塊(包括 "element.style")內(nèi)點擊任何地方都可以添加一個新的 CSS 屬性，并且該屬性會立即應用到當前頁面。

一旦你已經(jīng)成功添加了一個屬性，你可以按下 tab 鍵來設(shè)置下一個屬性。

點擊 plus 按鈕，新的選擇器將會被添加到右邊的 Style 子面板中。這樣可以定義一個選擇器，同樣地，你可以用這種方式添加新的屬性以及值。

注意：你也可以通過單擊一個選擇器的名稱來編輯 Style 面板中的任何選擇器。一旦名稱發(fā)生改變，選擇器已經(jīng)存在的屬性將會被添加到新的選擇器定義的元素中。

新的偽類選擇器可以通過一種類似的方式來添加，就是將他們加入到選擇器的名稱之后。同樣需要注意的是點擊新建選擇器按鈕旁邊的 “toggle element states” 按鈕后，將轉(zhuǎn)換到 "Force element state" 面板中。

返回到 “Matched CSS Rules” 面板中，點擊規(guī)則后面樣式表的鏈接將會進入 Sources 面板。在該面板中會顯示完整的樣式表定義，并且會跳轉(zhuǎn)到相應規(guī)則所在的行。

在元素面板中拖曳

在元素面板中你可以拖拽一個元素來改變他在父類中的位置，或者將它移動到文檔中一個完全不同的地方。

強制元素狀態(tài)

想要強制元素適應某種特定狀態(tài)？

右鍵一個子元素然后選擇 “Inspect Element”
在元素面板中右鍵其父元素，并選擇 “Force Element State”
可以選擇其中一個：active，:hover，：focus，：visited 來強制進入其中一種狀態(tài)。

通過開發(fā)者工具編寫并調(diào)試 Sass

注意：要在 Chrome 中編寫 Sass 你必須要有 3.3.0（預覽版)版本的 Sass 編譯器，這是現(xiàn)在僅有的支持源映射的版本。

調(diào)整一個含有預編譯的 CSS 樣式的文件可以算是一種挑戰(zhàn)，因為在開發(fā)工具中對 CSS 樣式做出的修改并不會返回到 Sass 源文件中。這意味著，當你做出更改后，如果你希望這些改動能夠生效，那就必須返回到源文件中通過外部編輯器手動做出更改。

最近 Sass 開發(fā)工作流做出了改進，使得這不再是問題。要獲取 Sass 支持：

確認你有在開發(fā)者工具使用 about:flags 的經(jīng)驗
接下來，進入 Setting cog > Experiment 然后啟用 “Sass stylesheet debugging”（注意，這個特性很快將會結(jié)束實驗階段）
進入 General menu > Settings > Check 選中 “Enable source maps” 和 “Auto-reload CSS upon Sass save“。你可以將超時為默認值。這取決于 Sass 編譯器需要花費多長時間編譯，你可能需要調(diào)整這個自動重載的延遲。如果有必要你也可以讓自動重加載失效，改用手動刷新頁面。
導航到你想在 Chrome 上對 Sass 進行調(diào)試的工程頁面（通過開發(fā)者工具打開）
接下來，通過使用下面的標示開啟 Sass 編譯器（也可以指定一個目標 CSS 編譯器）：sass --watch --sourcemap sass/styles.scss:styles.css。這將會讓 Sass 觀察你對 Sass 源文件的更改，然后為每一個生成的 CSS 文件創(chuàng)建源映射文件（.map）。接下來，你看到的就像是在控制臺中的一樣：這就證明了 Sass 調(diào)試器確實在工作
如果按照預期啟動了工作，你可以進入元素面板。首先你將會注意到你的樣式的文件名現(xiàn)在顯示的是相應的 .scss 源文件，并且源文件中對應的行號也顯示出來了。
在這里點擊文件名將會直接進入到 Sources 面板中去，并且會高亮顯示相應選擇器所在的行?，F(xiàn)在你就可以再開發(fā)工具內(nèi)調(diào)整 Sass 源文件了，并且該內(nèi)置編輯器支持語法高亮。
如果你想要在 Source 面板中編輯一個 Sass 文件，首先需要確保的就是開發(fā)工具能夠知道相應文件存在于本地文件系統(tǒng)的哪個位置。在編輯器中右鍵，然后選擇 ”Save As“ 可以用當前正在編輯的文件重寫原本的文件。由于自動重加載已經(jīng)開啟并且 Sass 已經(jīng)在后臺運行，所以我們做的更改會馬上的顯示在 Chrome 和開發(fā)者編輯器中。

更多有關(guān)使用元素和樣式的技巧，請進入編輯樣式和 Dom

在這里，你可以學習如何查看頁面的實際結(jié)構(gòu)。比如，你可能對一個圖片是否有 HTML id 屬性很好奇，并且想知道這個屬性的值是什么。
了解如何觀察 DOM 樹中的每一個信息，包括檢查以及快速編輯 DOM 元素。如果你需要確認頁面某個部分的 HTML 片段時你可能會經(jīng)常訪問元素選項卡。

網(wǎng)絡(luò)

重新發(fā)出 XHRs 請求

也許你可能知道，網(wǎng)絡(luò)面板會展示你的頁面上所有的請求，包括 XHRs。在請求上右鍵點擊會顯示上下文菜單，之后選擇 “Replay XHR”，就可以重新發(fā)出 XHRs 請求(POST 或者 GET)

清除網(wǎng)絡(luò)緩存和 cookies

在網(wǎng)絡(luò)面板的任何地方，右鍵點擊/ 按住 Ctrl 鍵然后點擊會彈出菜單，在菜單中選擇 Clear Browser Cache / Network Cache。

記錄一個追蹤棧 & 導出 waterfall

點擊 “record” 捕捉一個多頁面痕跡
要導出 meta-data 請求：右鍵然后選擇 “Copy Entry as HAR”
要導出全部 waterfall：右鍵然后選擇 “Copy All as HAR”

更多：等等，開發(fā)者工具可以做什么？| Igvita.com

使用網(wǎng)絡(luò)時間軸上的 large resource rows 查看更多細節(jié)

通過啟動在網(wǎng)絡(luò)面板底部的 “Use large resource rows” 圖標，你可以在面板中顯示 campact/smaller resource rows 視圖中看不到的額外信息。

對比 smaller resource rows 視圖：

以及 larger row 的情況：

在網(wǎng)絡(luò)面板上獲取更多信息的技巧

左鍵點擊網(wǎng)絡(luò)面板中時間軸列的頭部，可以訪問更多網(wǎng)絡(luò)請求的細節(jié)。你可以在以下的選擇中選擇一個：

時間軸
開始時間
響應時間
結(jié)束時間
持續(xù)時間
等待時間

network-left

瀏覽灰色的文字來深入查看：

每次請求的 HTTP 網(wǎng)絡(luò)定義是什么？
每次請求第一個字節(jié)是什么時候？
什么才是響應時間最慢的資源？
什么是持續(xù)時間最短的資源？

在網(wǎng)絡(luò)面板中的任何一行的頭部右鍵，你可以啟用或者禁用列。默認情況下有 3 列不會顯示：

Coolies
Domain
Set-Cookies

network-right

WebSocket 檢查

在網(wǎng)絡(luò)面板中，你可以使用底部窗口的過濾器來觀察 WebSocket 信息幀。

websocketbar

比如：進入 Echo 實例中，在網(wǎng)絡(luò)面板底部選擇 “WebSocket” 過濾器然后點擊 “Connect” 按鈕。你通過 “Send” 按鈕發(fā)送的任何信息都可以用 “Frames” 子面板觀察到。

websocketdemo

綠色表示來自你客戶端的信息。WebSocket 的觀察十分的有效，它允許你在觀察 WebSocket handshake 的同時查看 WebSocket 的獨立幀。

更多：等等，開發(fā)者工具可以做什么？ | Igvita.com

更多：使用開發(fā)者工具觀察 Websocket | Kaazing

在網(wǎng)絡(luò)面板中查找和過濾 XHRs

當你在網(wǎng)絡(luò)面板中觀察網(wǎng)絡(luò)請求時，可以通過鍵盤上的特殊鍵來縮小查找范圍。使用 Ctrl + F 或者 Cmd + F 可以讓整個過程更輕松。

在搜索輸入框中，輸入你要搜索的關(guān)鍵字，那些請求中有文件名/ URL 與之匹配的就會高亮顯示。結(jié)果顯示出來后，你可以使用輸入框旁邊的上下按鈕來選擇你需要的那一項。

盡管這很有用，但是如果它能夠只顯示和你搜索的關(guān)鍵字相匹配的選項的話就會更有用。"Filter" 選項就可以做到這一點，下面請看例子：

更多：評估網(wǎng)絡(luò)性能 | 開發(fā)者工具文檔

獲取網(wǎng)絡(luò)堆棧內(nèi)部狀態(tài)

"about:net-internals" 頁面是一個特殊的 URL，它存放了網(wǎng)絡(luò)堆內(nèi)部狀態(tài)的一個臨時視圖。這對調(diào)試性能和連接問題十分有幫助。這里面包括請求性能的信息，代理設(shè)置以及 DNS 緩存。

同樣需要注意的是 about:net-internals/#tests 是可以對一個特殊的 URL 進行測試的。

更多計算網(wǎng)絡(luò)性能的技巧，請前往評估網(wǎng)絡(luò)性能

在這里可以學習如何在你的應用中深入查看網(wǎng)絡(luò)選項。包括時間數(shù)據(jù)詳情，HTTP 請求和相應頭，cookies，WebSocket 數(shù)據(jù)以及更多。
學習哪個資源開始加載的時間最慢？哪個資源占需要最長的加載時間（持續(xù)時間）？誰開啟了一個網(wǎng)絡(luò)請求？等等。