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

技巧和竅門

控制臺(tái)

編寫多行命令

當(dāng)你進(jìn)入控制臺(tái)的多行編寫模式時(shí)，你可以像標(biāo)準(zhǔn)文字編輯器那樣使用文本塊。Shitf + Enter 允許你從控制臺(tái)進(jìn)入多行模式。

當(dāng)你編寫的 JavaScript 遠(yuǎn)比單行文字要復(fù)雜的時(shí)候，這是非常有用的。一但你創(chuàng)建了一個(gè)文字編寫區(qū)域，在命令的最后按 Enter 就會(huì)開始運(yùn)行。

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

檢查元素模式的快捷啟動(dòng)方式

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

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

對(duì) console.table 命令的支持

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

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

也有另一個(gè) columns 可選參數(shù)，它會(huì)以字符串?dāng)?shù)組的形式展示。下面，我們定義了一個(gè) family 對(duì)象，其中包含很多 “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"]);

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

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

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

預(yù)覽控制臺(tái)日志對(duì)象

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

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

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

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

同樣也支持多種樣式:

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

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

清理控制臺(tái)歷史的快捷鍵

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

成為一個(gè)鍵盤忍者

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

通過控制臺(tái)使用元素

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

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

通過 XPath 表達(dá)式查詢 DOM

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

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

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

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

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

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

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

使用 console.dir

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

在具體的幀中運(yùn)行 JS 控制臺(tái)

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

當(dāng)導(dǎo)航到一個(gè)新的頁面時(shí)停止清理控制臺(tái)

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

使用 console.time() 和 console.timeEnd() 進(jìn)行標(biāo)準(zhǔn)循環(huán)

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

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

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

每一個(gè)配置文件運(yùn)行后都會(huì)添加到 Profiles 面板中

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

查看更多有關(guān)控制臺(tái)技巧，請(qǐng)進(jìn)入使用控制臺(tái)。

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

時(shí)間軸

利用時(shí)間軸幀模式配置幀

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

時(shí)間軸默認(rèn)情況下并不會(huì)顯示任何數(shù)據(jù)。但是通過打開你的 app，然后點(diǎn)擊在窗口底部的圓圈 ，來開啟一個(gè) session 的記錄。或者使用 Ctrl + E 或者 Cmd + E 的快捷鍵也會(huì)開始一個(gè)錄制的標(biāo)記。

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

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

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

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

當(dāng)我們?cè)O(shè)定為 60 fps時(shí)，我們有最多 16.66 ms來做點(diǎn)事情。這點(diǎn)時(shí)間并不算多，所以讓盡可能提升你動(dòng)畫的性能是十分重要的。

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

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

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

你希望避免這些不必要的布局觸發(fā)器，因?yàn)樗麄兡軌蝻@著影響到你的頁面的性能。

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

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

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

給時(shí)間軸記錄做注釋

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

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

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

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

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

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

更多：使用開發(fā)者工具的繪制模式來分析長時(shí)間繪制事件 | HTML5Rocks

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

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

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

概述

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

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

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

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

紅色節(jié)點(diǎn)是處于生命周期的，因?yàn)樗麄兪欠蛛x的 DOM 樹中的一部分，并且樹中有一個(gè)節(jié)點(diǎn)被 JavaScript （或者是一個(gè)閉包變量，一些屬性）引用。

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

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

理解在 CPU 概述中的時(shí)間開銷

在 CPU 概述中，”（idel）“，時(shí)間是當(dāng)前標(biāo)記的。花費(fèi)在非瀏覽器中的程序是（”program“）。

堆配置視圖的更多了解

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

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

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

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

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

更多：馴服獨(dú)角獸：在谷歌瀏覽器中對(duì) JavaScript 的內(nèi)存的簡單剖析

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

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

源

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

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

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

追蹤未捕獲異常

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

使用 console.log 的條件斷點(diǎn)活動(dòng)

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

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

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

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

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

更多：JavaScript 斷點(diǎn)活動(dòng) | randomthink.net

格式化 JavaScript

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

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

格式化之前：

格式化之后：

重點(diǎn)觀察一個(gè)表達(dá)式或者一個(gè)變量的值

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

查看內(nèi)部屬性

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

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

你認(rèn)為 s 是一個(gè)字符串么？事實(shí)上不一定。它也可能是一個(gè)字符串對(duì)象的包裝。試試看下面的觀察表達(dá)式：

"hello"
Object("hello")

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

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

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

簡化調(diào)試 XHRs

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

取消注冊(cè)在元素上的事件處理器

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

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

Esc 鍵顯示控制臺(tái)

當(dāng)在 Sources 面板中調(diào)試的時(shí)候，你有時(shí)候會(huì)希望同時(shí)進(jìn)入控制臺(tái)。這時(shí)你只需要簡單的點(diǎn)擊下 escape 鍵就可以打開控制臺(tái)了。

你可以在這個(gè)控制臺(tái)編寫執(zhí)行 JavaScript 來查看預(yù)期效果，但是更好的地方是如果你在一個(gè)斷點(diǎn)初暫停，已經(jīng)執(zhí)行的 JS 將會(huì)在當(dāng)前暫停的上下文中。

提升在斷點(diǎn)處暫停時(shí)的效率

當(dāng)你的腳本在一個(gè)斷點(diǎn)處暫停時(shí)，會(huì)有一些有用的參數(shù)供你使用。

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

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

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

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

XHR 斷點(diǎn)面板也同樣十分有用，因?yàn)樗梢詾?XMLHttpRequests 設(shè)置斷點(diǎn)。通過輸入一個(gè)你想要查看 URL 子字符串來具體說明斷點(diǎn)。

在異常中暫停

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

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

全部腳本文本上的搜索

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

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

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

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

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

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

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

要在 Chrome 中啟用源映射：

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

下面：

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

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

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

更多：NetTuts-Source Maps 101

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

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

元素

啟用尺子

在 Setting > General > Show rulers 下可以啟用一個(gè)尺子，當(dāng)你鼠標(biāo)懸停在某個(gè)元素上或者選中一個(gè)元素的時(shí)候，它會(huì)顯示出來。

CSS 屬性的自動(dòng)完成

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

當(dāng)你開始為屬性或者值輸出一個(gè)名稱的時(shí)候就會(huì)彈出建議，而且你也可以使用右鍵在可用的屬性列表中滾動(dòng)。要知道，選中的選項(xiàng)會(huì)直接應(yīng)用到頁面樣式表中因此它的效果是可以直接看到的。

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

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

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

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

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

你可以 Shift + 點(diǎn)擊，來更改選中顏色的格式。

添加新的 CSS 樣式

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

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

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

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

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

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

在元素面板中拖曳

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

強(qiáng)制元素狀態(tài)

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

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

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

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

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

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

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

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

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

網(wǎng)絡(luò)

重新發(fā)出 XHRs 請(qǐng)求

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

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

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

記錄一個(gè)追蹤棧 & 導(dǎo)出 waterfall

• 點(diǎn)擊 “record” 捕捉一個(gè)多頁面痕跡
• 要導(dǎo)出 meta-data 請(qǐng)求：右鍵然后選擇 “Copy Entry as HAR”
• 要導(dǎo)出全部 waterfall：右鍵然后選擇 “Copy All as HAR”

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

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

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

對(duì)比 smaller resource rows 視圖：

以及 larger row 的情況：

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

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

• 時(shí)間軸

• 開始時(shí)間

• 響應(yīng)時(shí)間

• 結(jié)束時(shí)間

• 持續(xù)時(shí)間

• 等待時(shí)間

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

• 每次請(qǐng)求的 HTTP 網(wǎng)絡(luò)定義是什么？

• 每次請(qǐng)求第一個(gè)字節(jié)是什么時(shí)候？

• 什么才是響應(yīng)時(shí)間最慢的資源？

• 什么是持續(xù)時(shí)間最短的資源？

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

• Coolies

• Domain

• Set-Cookies

WebSocket 檢查

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

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

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

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

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

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

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

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

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

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

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

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

同樣需要注意的是 about:net-internals/#tests 是可以對(duì)一個(gè)特殊的 URL 進(jìn)行測試的。

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

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

設(shè)置

模仿觸摸事件

觸摸是一種在電腦上很難測試的輸入方式，因?yàn)榇蠖鄶?shù)桌面上不支持觸摸輸入。在移動(dòng)端上測試則會(huì)延長你的開發(fā)周期，一旦你做出了改變，你就需要上傳到服務(wù)器然后切換到設(shè)備上測試。

這個(gè)問題的一個(gè)解決方法是在你的開發(fā)機(jī)器上模擬一個(gè)觸摸事件。對(duì)單點(diǎn)觸摸來說，Chrome 開發(fā)者工具支持單個(gè)觸摸事件的模擬，這使得在電腦上調(diào)試移動(dòng)應(yīng)用變得更加簡單。

要開啟觸控仿真：

1. 打開開發(fā)者工具中的 overrides 菜單
2. 滾動(dòng)然后選中 "Enable touch events"

現(xiàn)在我們可以像標(biāo)準(zhǔn)桌面事件那樣調(diào)試觸控事件，也可以在源面板中設(shè)置事件監(jiān)聽斷點(diǎn)。

更多：開發(fā)者工具設(shè)備模式 | DevTools 文檔

模擬 UA 字符串 & 設(shè)備視圖

通常在桌面上啟動(dòng)一個(gè)樣品然后在你想支持的設(shè)備上處理具體移動(dòng)設(shè)備部分會(huì)更加容易一些，設(shè)備模擬器可以幫助我們使這個(gè)過程更加簡單。

開發(fā)者工具支持包括本地 User Agent 以及尺寸的重載在內(nèi)的設(shè)備仿真。這就使開發(fā)者可以在不同的設(shè)備和操作系統(tǒng)上調(diào)試移動(dòng)端的顯示效果。

現(xiàn)在你可以模擬確切設(shè)備的尺寸，比如 Galaxy Nexus 以及 iPhone 等來測試你的查詢驅(qū)動(dòng)設(shè)計(jì)。

更多：開發(fā)者工具的設(shè)備模式 | 開發(fā)者工具文檔

模擬地理信息

在一個(gè)支持地理信息支持的 HTML5 應(yīng)用中，調(diào)試不同經(jīng)緯度下的輸出是十分有用的。

開發(fā)者工具支持重寫 navigator.geolocation 的位置信息，也可以模擬一個(gè)模擬地理位置。

重寫地理位置

1. 進(jìn)入到地理信息實(shí)例中。
2. 允許頁面使用你的位置。這樣可以獲取精確位置。
3. 打開在開發(fā)者工具中的重寫菜單。
4. 選中 ”O(jiān)verride Geolocation“ 然后輸入 Lat = 41.4949819，Lat = -0.1461206。

1. 刷新頁面。這個(gè)例子會(huì)使用你重寫后的位置信息來定位。

1. 現(xiàn)在選中 "Emulate position unavailable" 選項(xiàng)。
2. 刷新頁面。頁面就會(huì)提示你查找你的位置信息失敗。

更多：開發(fā)者工具模擬移動(dòng)設(shè)備 | DevTools Docs

Dock-to-right 的視圖調(diào)試

Dock-to-right 模式同樣對(duì)在一個(gè)縮小的視圖中預(yù)覽你頁面的表現(xiàn)是很有幫助的。要使用這個(gè)：

• 通過長按開發(fā)者工具窗口底部的布局選擇器圖標(biāo)來開啟 dock-to-right 模式。
• 你現(xiàn)在可以拖拽窗口分配器然后左右拖拽來改變視圖的寬度，然后觸發(fā)你的媒體查詢斷點(diǎn)。

讓 JavaScript 失效

點(diǎn)擊右下角的設(shè)置齒輪，然后在 Setting > General 中啟用 ”Disable Javascript“。當(dāng)開發(fā)者工具已經(jīng)打開并且這個(gè)選項(xiàng)也被選中，那么當(dāng)前頁面 JavaScript 腳本就會(huì)失效。

如果需要該功能，同樣的也可以通過 "-disable-javascript" 命令來啟動(dòng) Chrome。

通用

在標(biāo)簽中快速切換

Cmd + ] 和 Cmd + [(或者 Ctrl + ] 和 Ctrl + [)快捷鍵允許你輕松地在開發(fā)者工具的不同標(biāo)簽之間切換。使用他們就可以避免手動(dòng)選擇標(biāo)簽。

嘗試改進(jìn)后的 dock-to-right

改進(jìn)后的元素面板和源面板是水平分開放置的，并且，只要你打開了 dock-to-right 模式，你就可以在 Chrome 測試版中體驗(yàn)該特性：

然而，如果你已經(jīng)有一個(gè)非常寬的屏幕并且不想使用這個(gè)屏幕，只需要在設(shè)置面板中取消選中 ”Split panels vertically when docked to right“ 選項(xiàng)即可。

更多：3 步獲取一個(gè)更好的 Dock-to-Right 體驗(yàn) | G+

使用 Disable Cache 讓緩存失效

在設(shè)置齒輪下面，你可以啟用 Disable cache 選項(xiàng)來使磁盤緩存失效。這對(duì)開發(fā)來說用處是巨大的，但是開發(fā)者工具必須是可見并打開的才能實(shí)現(xiàn)這個(gè)功能。

檢查 Shadow DOM

含有 Shadow DOM 的元素并不會(huì)在元素標(biāo)簽中顯示。

1. 使 Show Shadow DOM 的復(fù)選框生效。
2. 重啟開發(fā)者工具

你可以稍微看看里面的 Shadow DOM。比如，你可以在 HTML 5 塊中看一下 Shadow DOM 標(biāo)題。

預(yù)覽所有可檢查的頁面

如果你發(fā)現(xiàn)你自己已經(jīng)會(huì)使用 remote 調(diào)試了，你可能想試試 ”about:inspect“，它會(huì)展示在 Chrome 中展示所有可檢查的標(biāo)簽/擴(kuò)展插件。點(diǎn)擊 ”inspect“ 來選擇一個(gè)頁面然后加載開發(fā)工具并且跳轉(zhuǎn)到相應(yīng)頁面。

詳細(xì)觀察哪個(gè)站點(diǎn)有應(yīng)用緩存

通過訪問 "about:appcache-internals",你可以看到有關(guān)應(yīng)用緩存的信息。這允許你查看當(dāng)最后做出更改的時(shí)候哪些站點(diǎn)是有緩存的，以及他們占用了多少空間。你也可以在這里移除這些緩存：

在網(wǎng)絡(luò)/控制臺(tái)面板中選擇多重過濾器

你可能已經(jīng)意識(shí)到在網(wǎng)絡(luò)和控制臺(tái)面板中也是可以使用過濾器的，這允許你基于不同的標(biāo)準(zhǔn)縮小數(shù)據(jù)的范圍。

你可能不知道的是你可以使用快捷鍵（ Cmd/Ctrl + 點(diǎn)擊）來選擇過濾器并將其應(yīng)用到視圖中。下面你可以看到在多個(gè)面板鍵的行為：

清除緩存然后硬重載

如果你請(qǐng)求一個(gè)硬刷新，在開發(fā)者工具打開的情況下點(diǎn)擊并按住 Chromes 的刷新按鈕。你應(yīng)該會(huì)看見一個(gè)下拉菜單，它允許你進(jìn)行清除緩存和并進(jìn)行硬重載。這有助節(jié)省時(shí)間！

注意：這個(gè)現(xiàn)在只對(duì) Windows 和 ChromeOS 有用

深入理解 Chrome 任務(wù)管理器

Chrome 中的任務(wù)管理可以讓你深入了解任何選項(xiàng)卡對(duì)應(yīng)的 GPU，CPU 以及 JavaScript 內(nèi)存使用狀況，CSS 和腳本緩存使用狀況。

按照下面的步驟來打開任務(wù)管理：

1. 在瀏覽器工具欄中點(diǎn)擊 Chrome 菜單。
2. 選擇工具。
3. 選擇任務(wù)管理器。
4. 從那里，你可以通過右鍵點(diǎn)擊任何一行來進(jìn)入擴(kuò)展視圖或者通過右鍵來結(jié)束一個(gè)程序。

擴(kuò)展工具

利用開發(fā)者工具測試 iOS 應(yīng)用

PonyDebugger 是一個(gè)客戶端的庫同時(shí)也是一個(gè)使用 Chrome 開發(fā)工具來調(diào)試應(yīng)用網(wǎng)絡(luò)狀況以及管理對(duì)象上下文的網(wǎng)關(guān)服務(wù)器。

JSRunTime：開發(fā)者工具檢索 JavaScript 對(duì)象的拓展

Andrei Kashcha 編寫了一個(gè)非常有用的開發(fā)者工具擴(kuò)展插件，它可以在內(nèi)存中檢索可用的 JavaScript 對(duì)象并生成相應(yīng)的圖，還可以根據(jù)值或者名稱來進(jìn)行匹配。

更多：JSRuntime-獲取對(duì)象的開發(fā)者工具拓展插件