當(dāng)你進入控制臺的多行編寫模式時，你可以像標(biāo)準(zhǔn)文字編輯器那樣使用文本塊。Shitf + Enter 允許你從控制臺進入多行模式。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-consolemultiline.png" alt="consolemultiline" />
當(dāng)你編寫的 JavaScript 遠(yuǎn)比單行文字要復(fù)雜的時候，這是非常有用的。一但你創(chuàng)建了一個文字編寫區(qū)域，在命令的最后按 Enter 就會開始運行。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-consolerun.png" alt="consolerun" />
關(guān)于多行控制臺支持持久性問題，請閱讀Snippets-該特征可以保存并執(zhí)行開發(fā)工具中可用的特定 JavaScript 片段。
Ctrl + Shitf + C 或者 Cmd + Shift + C 將會在檢查元素模式中打開開發(fā)者工具（或者選擇讓它獲取焦點），這樣你就可以立即檢查當(dāng)前頁面。同時焦點全部都會返回到該頁面上。在 Mac 上，使用 Cmd + Shift + C 也可以達到相同的效果。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_10.png" alt="image_10" />
這個命令記錄了任何使用列表布局的數(shù)據(jù)。下面是一些例子，包括如何使用：
console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-consoleg1.png" alt="consoleg1" />
也有另一個 columns 可選參數(shù)，它會以字符串?dāng)?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"]);http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-consoleperson.png" alt="consoleperson" />
同時，如果你僅僅是想輸出這些數(shù)據(jù)中的前兩行，使用：
console.table(family, ["firstName", "lastName"]);更多:對 console.table 命令的支持已經(jīng)上線 | G+
日志輸出的對象可以使用 console.log() 方法直接在開發(fā)工具中預(yù)覽，而不需要更多的操作。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_12.png" alt="image_12" />
就像我們之前在文檔中說過的，你可以使用 %c 給你的控制臺添加樣式，就像你在 Firebug 中一樣。比如：
console.log("%cBlue!", "color: blue;");同樣也支持多種樣式:
console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;');http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_13.png" alt="image_13" />
更多：在開發(fā)者工具上讓日志有自己的風(fēng)格 | G+
打開控制臺，你可以通過 Ctrl + L 或者 Cmd + L 快捷鍵 來快速的清理控制臺歷史.控制臺中的 console.clear() 命令通過 JavaScript 的控制臺 API 來完成清除工作，就和 shell 下的 clear() 一樣。
在開發(fā)者工具上，你可以使用 ? 來打開通用設(shè)置，從那里你可以定位到快捷鍵面板來查看所有支持的快捷鍵
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_14.png" alt="image_14" />
選擇一個元素然后在控制臺中輸出 $0，它將會使用腳本來執(zhí)行。如果在這個頁面上已經(jīng)有 jQuery 對象，你可以使用 $($0) 來重新選擇這個頁面上的元素。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_15.png" alt="image_15" />
你也可以在任何一個元素上右鍵然后點擊 Reveal in Elements Panel，這樣就可以在DOM 中找到它。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_16.png" alt="image_16" />
XPath 是一個在文檔中選擇節(jié)點的查詢語言，一般來說返回一個節(jié)點的集合，字符串，boolean,或者數(shù)字。你可以在 Javascript 開發(fā)者工具控制臺中使用 XPath 表達式來查詢 DOM。
$x(xpath) 命令允許你執(zhí)行一個腳本。下面的例子將會展示如何通過 $x('//img') 來搜索圖片：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_17.png" alt="image_17" />
然而，該函數(shù)同樣能夠接受第二個參數(shù)，該參數(shù)是關(guān)于路徑上下文的，比如：$x(xpath,context)。這就允許我們選擇一個詳細(xì)的上下文（也就是一個內(nèi)嵌幀）然后使用 XPath 來查詢。
var frame = document.getElementsByTagName('iframe')[0].contentWindow.document.body;
$x('//'img, frame);在詳細(xì)的內(nèi)嵌幀中查詢圖片
使用 $_helper 會允許你獲取控制臺的最后結(jié)果。我們可以用另外一個 XPath 的例子來證明這個：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_17a.png" alt="image_17a" />
console.dir(object) 命令將會以一個可擴展的 JavaScript 對象形式列出所有提供的對象的所有屬性。下面的例子展示了 document.body 下的一個表示屬性的可擴展對象。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_18.png" alt="image_18" />
開發(fā)者工具底部是下拉選項，它將根據(jù)你當(dāng)前標(biāo)簽的上下文改變。當(dāng)你在控制臺面板的時候，下拉列表允許你選擇一個控制臺能夠操作的幀上下文。在下拉框中選擇你的幀，然后你會馬上在右側(cè)找到它。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_19.png" alt="image_19" />
有時候要跳轉(zhuǎn)到一個新的頁面上時，你想保持在控制臺上的日志信息。要實現(xiàn)這個，只要在控制臺右鍵，然后選擇 "Preserve Log upon Navigation"。當(dāng)你從當(dāng)前頁面導(dǎo)航到一個不同的頁面時，控制臺歷史信息將不會被清除。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_20.png" alt="image_20" />
console.time() 用一個特定的標(biāo)簽開啟一個新的計時器。當(dāng)用相同的標(biāo)簽調(diào)用 console.timeEnd() 的時候計時器停止，在控制臺上會顯示兩次記錄間流逝的時間。在不調(diào)用函數(shù)的情況下，該方法用于衡量循環(huán)或者代碼非常有用：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_21.png" alt="image_21" />
打開開發(fā)者工具，調(diào)用 console.profile() 來開始一個 Javascript CPU 配置。一般來說一個配置只能標(biāo)記一個標(biāo)簽，就像下面的 console.("Processing") 一樣。要結(jié)束這個配置，調(diào)用 console.profileEnd()。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_22.png" alt="image_22" />
每一個配置文件運行后都會添加到 Profiles 面板中
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_23.png" alt="image_23" />
同時也會添加到 console.profiles[] 數(shù)組中，以供后續(xù)的查看：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_24.png" alt="image_24" />
查看更多有關(guān)控制臺技巧，請進入使用控制臺。
時間軸面板提供了關(guān)于加載你的 web 應(yīng)用時花費時間的預(yù)覽，比如進入 DOM 事件花費的時間，提交頁面布局或者在屏幕渲染元素的花費。它也允許你進入三個單獨的方面來查明為什么你的應(yīng)用會很慢，這三個界面是：時間，幀以及實際內(nèi)存使用。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_0.png" alt="image_0" />
時間軸默認(rèn)情況下并不會顯示任何數(shù)據(jù)。但是通過打開你的 app，然后點擊在窗口底部的圓圈 http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-recording-off.png" alt="recording-off" />，來開啟一個 session 的記錄。或者使用 Ctrl + E 或者 Cmd + E 的快捷鍵也會開始一個錄制的標(biāo)記。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_1.png" alt="image_1" />
這個錄制按鈕將會從灰色變?yōu)榧t色，時間軸也會開始捕獲你的 app。在你的 app 中完成幾個動作后再次按下按鈕來停止錄制。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_2.png" alt="image_2" />
幀模式讓你洞察到進行中的任務(wù)，你的應(yīng)用程序會按幀（更新）在屏幕上顯示。在這個模式中，陰影的垂直區(qū)域標(biāo)尺對應(yīng)重新計算的樣式，合成等等。每一個垂直長條的透明部分表示空閑時間，至少是在你頁面上的空閑時間。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_3.png" alt="image_3" />
舉個例子，你的第一幀需要 15 毫秒，但是執(zhí)行第二幀需要 30 毫秒。一個常見的情況是幀的刷新率是同步的，所以第二幀將稍微比 15 毫秒多一點去渲染。這里，3 號幀丟失了 “true” 硬件幀并且已經(jīng)提交給了后面一幀，因此第二幀的時長其實相當(dāng)于雙倍了。
如果你的應(yīng)用并沒有很多的動畫在其中，并且在執(zhí)行輸入事件的時候瀏覽器需要執(zhí)行大量重復(fù)的動作，那么使用幀是個好辦法。當(dāng)你有足夠的時間在幀內(nèi)執(zhí)行完這樣的事件，那么你的應(yīng)用響應(yīng)能力會更高，并且將會有良好的用戶體驗。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_4.png" alt="image_4" />
當(dāng)我們設(shè)定為 60 fps時，我們有最多 16.66 ms來做點事情。這點時間并不算多，所以讓盡可能提升你動畫的性能是十分重要的。
更多：利用時間軸開發(fā)工具提升性能|開發(fā)者工具文檔
在時間軸中，如果你在記錄視圖中看見一個黃色的圖標(biāo)，就說明你的一些代碼觸發(fā)了強制/同步布局事件。
你希望避免這些不必要的布局觸發(fā)器，因為他們能夠顯著影響到你的頁面的性能。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_5.png" alt="image_5" />
你可以瀏覽和并且跟其他開發(fā)者分享時間軸，這要感謝一個有用的導(dǎo)入/導(dǎo)出插件。使用 Ctrl + E 或者 Cmd + E 來開始/結(jié)束記錄然后在時間軸上右鍵，選擇 Save Timeline data。該菜單還支持重新瀏覽已經(jīng)導(dǎo)出的時間軸數(shù)據(jù)。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_6.png" alt="image_6" />
使用 console.timeStamp() 函數(shù)可以給你的時間軸記錄添加注解。這就幫你把你的 web 中的代碼和另外一個窗口或者瀏覽事件關(guān)聯(lián)在了一起。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_7.png" alt="image_7" />
更多：開發(fā)者工具控制臺 API-制作時間軸 | 開發(fā)者文檔
你的應(yīng)用可以通過調(diào)用 console.timeStamp() 函數(shù)來對你的時間軸記錄進行注釋。這就使你可以輕易的將代碼和另一個窗口以及瀏覽事件綁定在一起。在下面的記錄中，時間軸被標(biāo)記為 “Adding Result”。下面來看看通過使用控制臺來制作時間軸的例子。
real-time FPS 計數(shù)器是一個用來視圖化幀速和躲閃的工具。該工具可以通過進入設(shè)置菜單然后選中 ”Show FPS meter“ 來使用。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_8.png" alt="image_8" />
當(dāng)這個工具開始運轉(zhuǎn)，你將會看到在右下角有一個黑色的盒子，同時還有幀的統(tǒng)計數(shù)字。該計數(shù)器可以在實時編輯中用于診斷你的頁面為什么掉幀，而不必在時間軸視圖間來回切換。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_9.png" alt="image_9" />
更多：使用開發(fā)者工具的繪制模式來分析長時間繪制事件 | HTML5Rocks
需要謹(jǐn)記的是如果你只是追蹤 FPS 計數(shù)器可能會使你沒有注意到的斷斷續(xù)續(xù)的跳幀現(xiàn)象。在使用 content 的時候一定要注意。如果 FPS 在桌面上的效果與在設(shè)備上的效果不一樣，這也沒有意義。所以要特別的小心在性能上的配置。
更多配置使用時間軸的實用技巧，請?zhí)D(zhuǎn)到利用時間軸來進行性能描述：
3 snapshot 技術(shù)來查找 Javascript 內(nèi)存漏洞http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_25.png" alt="image_25" />
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_26.png" alt="image_26" />
更多：BloatBusters-在 Gmail 中消除內(nèi)存漏洞
紅色節(jié)點是處于生命周期的，因為他們是分離的 DOM 樹中的一部分，并且樹中有一個節(jié)點被 JavaScript （或者是一個閉包變量，一些屬性）引用。
黃色節(jié)點表示一個從 DOM 節(jié)點，引用的一個對象的屬性或者一個數(shù)組元素。應(yīng)該有一系列從 DOM 窗口到元素的屬性(比如 window.foo.bar[2].baz)。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_27.jpg" alt="image_27" />
在 CPU 概述中，”（idel）“，時間是當(dāng)前標(biāo)記的?；ㄙM在非瀏覽器中的程序是（”program“）。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_28.png" alt="image_28" />
一個我們經(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ù)來確認(rèn)內(nèi)存泄漏的存在以及造成泄露的原因。
Dominators 視圖用于確認(rèn)垃圾回收正常工作時出現(xiàn)的本不該存在于對象上的引用（也就是說他們）。
Summary 視圖可幫助您在利用構(gòu)造器名稱分組的基礎(chǔ)上捕獲對象（和它們的內(nèi)存使用）。這個視圖通常對追蹤 DOM 漏洞很有幫助。
Containment 視圖提供了一個更好的對象構(gòu)建視圖，它幫助我們通過全局的命名空間（也就是窗口）來分析對象，找出是什么是他們一直保持存在。它允許分析程序閉包并從底層深入你的對象。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_29.png" alt="image_29" />
更多：馴服獨角獸：在谷歌瀏覽器中對 JavaScript 的內(nèi)存的簡單剖析
更多內(nèi)存剖析技巧，請參考內(nèi)存性能剖析:
右鍵點擊一個元素然后選中 “Break on Subtree Modification”:不論什么時候腳本穿過了元素并且修改了他們，調(diào)試器都能夠自動的運轉(zhuǎn)起來，以便告訴你正在發(fā)生什么：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_30.png" alt="image_30" />
另外值得一提的是，暫停內(nèi)嵌樣式屬性的修改，對于調(diào)試 DOM 動畫非常有用 。
從 Sources 面板中，雙擊暫停腳本執(zhí)行按鈕http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-pause-icon.png" alt="pause-icon" />會在未捕獲異常發(fā)生時中斷代碼執(zhí)行，并保留調(diào)用堆棧和應(yīng)用程序的當(dāng)前狀態(tài)-有些人將之稱為紫色暫停。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_32.png" alt="image_32" />
我們知道開發(fā)者工具支持條件斷點，只需要你在想要的行上點擊一下設(shè)置一個斷點，就跟普通的設(shè)置斷點一樣。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_33.png" alt="image_33" />
你可以在某一行右鍵然后選擇 "Edit Breakpoint"，然后就出現(xiàn)了一個表達式編輯區(qū)域。把你需要的條件寫在這里（比如：如果表達式的返回值為真，則斷點將會在這里停止）
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_34.png" alt="image_34" />
一個普通的表達式可能是這個樣子：x === 5，然而 console.log 聲明同樣是完全有效的輸入。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_35.png" alt="image_35" />
這個方法十分有效，并且我們也可以輕易的看見在斷點上調(diào)用的 console.log 語句：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_36.png" alt="image_36" />
由于 console.log 沒有一個真正的返回值，不確定的條件斷點不會導(dǎo)致執(zhí)行被暫停，你的代碼將繼續(xù)運行。這非常像一個通過硬編碼來執(zhí)行 console.log 表達式而不直接修改你的代碼。
更多：JavaScript 斷點活動 | randomthink.net
開發(fā)者工具支持格式化精簡后的 JavaScript 以便閱讀。要格式化，你需要：
格式化之前：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_38.png" alt="image_38" />
格式化之后：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_39.png" alt="image_39" />
在一次調(diào)試會話中，為了避免重復(fù)編寫一個你要多次查看的變量或者表達式，你可以把它添加到 “Watch Expression” 列表中。當(dāng)你修改它們之后可以刷新或者直接運行代碼來查看改變后的效果。 http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_40.png" alt="image_40" />
假設(shè)你定了一個變量，其值為 s 并且對它執(zhí)行下面的操作：
s.substring(1, 4) // returns 'ell'你認(rèn)為 s 是一個字符串么？事實上不一定。它也可能是一個字符串對象的包裝。試試看下面的觀察表達式：
"hello"
Object("hello")第一個是字符串常量，第二個是一個完整的對象。令人困惑是，這兩個值幾乎是一模一樣的。但是第二個有一個真正的屬性，你也可以自行設(shè)置。
展開屬性列表你就會注意到，它為什么不是一個完整的對象：它會有一個內(nèi)在的屬性 [[PrimitiveValue]],這里面存儲著字符串原本的值。你并不能通過你的代碼來訪問這個屬性，但是你現(xiàn)在可以通過開發(fā)者工具的調(diào)試工具來查看它。
更多： 通過開發(fā)者工具學(xué)習(xí) Javascript 概念 | GitHub
從調(diào)試器中打開 "XHR 斷點"選項，當(dāng)開始一個 XHR 請求時你可以指定你的代碼跳入任何一個 URL (甚至是一個子字符串)。甚至是告訴它加載每一個 XHR 時都中斷。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_41.jpg" alt="image_41" />
隨著 “Element” 標(biāo)簽的打開，找到在 DOM 樹中的元素，然后點擊要選擇的節(jié)點。注意：你也可以通過使用控制臺 API 中的 getEventListener(targetNode) 來實現(xiàn)。
在右側(cè)，點擊展開 “Event Listeners” 選項。在那里你會找到所有注冊在元素上的事件監(jiān)聽列表。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_42.png" alt="image_42" />
當(dāng)在 Sources 面板中調(diào)試的時候，你有時候會希望同時進入控制臺。這時你只需要簡單的點擊下 escape 鍵就可以打開控制臺了。
你可以在這個控制臺編寫執(zhí)行 JavaScript 來查看預(yù)期效果，但是更好的地方是如果你在一個斷點初暫停，已經(jīng)執(zhí)行的 JS 將會在當(dāng)前暫停的上下文中。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_43.png" alt="image_43" />
當(dāng)你的腳本在一個斷點處暫停時，會有一些有用的參數(shù)供你使用。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_44.png" alt="image_44" />
你可能會知道通過 “Continue”，“Step Over”,"Step Into" 以及 “Step Out” 來控制代碼的執(zhí)行，但是這些按鈕都有鍵盤快捷鍵。學(xué)習(xí)這些會讓你的在代碼中導(dǎo)航時更加高效。
觀察表達式（在側(cè)邊欄的右側(cè)）將會將會監(jiān)視表達式，所以你不必總是跳回控制臺（例如 X===Y）。調(diào)用堆棧顯示了從系統(tǒng)開始運行一直到當(dā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é)點上以及當(dāng)他們被調(diào)用時發(fā)生了什么很有幫助。
XHR 斷點面板也同樣十分有用，因為它可以為 XMLHttpRequests 設(shè)置斷點。通過輸入一個你想要查看 URL 子字符串來具體說明斷點。
你可能想在拋出一個異常的時候暫停 JavaScript 的執(zhí)行，并檢查調(diào)用棧，范圍變量和您的應(yīng)用程序的狀態(tài)。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_45.png" alt="image_45" />
在腳本面板的頂部有一個暫停按鈕http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-pause-gray.png" alt="pause-gray" />,它可以讓你選擇不同的異常處理模式。你可能不想暫停所有的異常http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-pause-blue.png" alt="pause-blue" />，除非你正在調(diào)試的代碼是被 try/catch 包裹著的。
如果你想在所有加載在一個頁面上的文件中查找一個指定的字符串，你可以通過下面的快捷鍵調(diào)用搜索面板：
Ctr + Shift + F（Windows,Linux）Cmd + Opt + F（Mac OSX）這個搜索同時支持正則表達式和區(qū)分大小寫。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_50.png" alt="image_50" />
源映射提供了一個語言無關(guān)的方法來將編譯過的工程代碼映射到你原來的開發(fā)環(huán)境中編寫的源代碼。
當(dāng)分析產(chǎn)品代碼的時候，代碼通常已經(jīng)被縮小過（以防一個語言被翻譯成編譯過的 JavaScript），這就使你很難找到哪一行代碼是映射到你原本的代碼中的。
在編譯階段，源映射（source map）可以保存這個信息以允許你調(diào)試產(chǎn)品代碼，并且會將你原本文件中的行號返回給你。這使得整個世界都不同了，因為你可以再閱讀產(chǎn)品代碼的同時進行調(diào)試了，不管它是在 CoffeeScript 中或是其它分位置 - 只要它具有一個源映射，你就可以輕松調(diào)試。
要在 Chrome 中啟用源映射：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_51.png" alt="image_51" />
下面：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_52.png" alt="image_52" />
當(dāng)你開始調(diào)試你的 CoffeeScript 代碼的時候，應(yīng)該感謝這個聲明，是它讓開發(fā)者工具知道了你的源文件在哪里。
然后，您可以利用這個源映射，在您的優(yōu)化 / 縮小階段使用類似 UglifyJS2 的工具引用第一個源映射（ CS 到 JS ），并把它所映射的簡化后的 JavaScript 文件返回到 CoffeeScript 上，而不是直接傳給編譯后的 JavaScript 的輸出位置。這就允許你直接調(diào)試產(chǎn)品代碼，并且改動會直接返回到 CoffeeScript 源代碼中。
更多有用的創(chuàng)作工作流程技巧，請轉(zhuǎn)到創(chuàng)作和開發(fā)工作流程:
在 Setting > General > Show rulers 下可以啟用一個尺子，當(dāng)你鼠標(biāo)懸停在某個元素上或者選中一個元素的時候，它會顯示出來。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_53.png" alt="image_53" />
開發(fā)者工具支持 CSS 屬性以及值的自動完成（包括那些需要前綴的），這對于決定為當(dāng)前元素設(shè)置什么屬性是很有幫助的。
當(dāng)你開始為屬性或者值輸出一個名稱的時候就會彈出建議，而且你也可以使用右鍵在可用的屬性列表中滾動。要知道，選中的選項會直接應(yīng)用到頁面樣式表中因此它的效果是可以直接看到的。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_55.png" alt="image_55" />
在樣式面板中，使用已命名的字段（比如：“red”）,HSL，HEX 或者 RGB 值可以定義顏色。如果需要的話，你可以按住 shift/鼠標(biāo)點擊以在這些值之間迭代選擇。
如果你想要展示所有支持的屬性，你可以使用 Ctrl + space 來展示一個建議列表。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_56.png" alt="image_56" />
建議列表是和特定內(nèi)容相關(guān)的并且在特定情況下（比如，針對字體的時候）數(shù)字，已命名或者帶前綴的值也是也可以顯示出來的。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_57.png" alt="image_57" />
開發(fā)者工具中包含了一個內(nèi)置的顏色選擇器，當(dāng)你點擊任何有效顏色的預(yù)覽方塊時，就會顯示出來。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-colorpickercanary.png" alt="colorpickercanary" />
你可以 Shift + 點擊，來更改選中顏色的格式。
在 CSS 規(guī)則的代碼塊(包括 "element.style")內(nèi)點擊任何地方都可以添加一個新的 CSS 屬性，并且該屬性會立即應(yīng)用到當(dāng)前頁面。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_60.png" alt="image_60" />
一旦你已經(jīng)成功添加了一個屬性，你可以按下 tab 鍵來設(shè)置下一個屬性。
點擊 http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-plus.png" alt="plus" /> 按鈕，新的選擇器將會被添加到右邊的 Style 子面板中。這樣可以定義一個選擇器，同樣地，你可以用這種方式添加新的屬性以及值。
注意：你也可以通過單擊一個選擇器的名稱來編輯 Style 面板中的任何選擇器。一旦名稱發(fā)生改變，選擇器已經(jīng)存在的屬性將會被添加到新的選擇器定義的元素中。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_62.png" alt="image_62" />
新的偽類選擇器可以通過一種類似的方式來添加，就是將他們加入到選擇器的名稱之后。同樣需要注意的是點擊新建選擇器按鈕旁邊的 “toggle element states” http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-attributes-icon.png" alt="attributes-icon" /> 按鈕后，將轉(zhuǎn)換到 "Force element state" 面板中。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_64.png" alt="image_64" />
返回到 “Matched CSS Rules” 面板中，點擊規(guī)則后面樣式表的鏈接將會進入 Sources 面板。在該面板中會顯示完整的樣式表定義，并且會跳轉(zhuǎn)到相應(yīng)規(guī)則所在的行。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_65.png" alt="image_65" />
在元素面板中你可以拖拽一個元素來改變他在父類中的位置，或者將它移動到文檔中一個完全不同的地方。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_66.png" alt="image_66" />
想要強制元素適應(yīng)某種特定狀態(tài)？
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_67.png" alt="image_67" />
注意：要在 Chrome 中編寫 Sass 你必須要有 3.3.0（預(yù)覽版)版本的 Sass 編譯器，這是現(xiàn)在僅有的支持源映射的版本。
調(diào)整一個含有預(yù)編譯的 CSS 樣式的文件可以算是一種挑戰(zhàn)，因為在開發(fā)工具中對 CSS 樣式做出的修改并不會返回到 Sass 源文件中。這意味著，當(dāng)你做出更改后，如果你希望這些改動能夠生效，那就必須返回到源文件中通過外部編輯器手動做出更改。
最近 Sass 開發(fā)工作流做出了改進，使得這不再是問題。要獲取 Sass 支持：
更多有關(guān)使用元素和樣式的技巧，請進入編輯樣式和 Dom
也許你可能知道，網(wǎng)絡(luò)面板會展示你的頁面上所有的請求，包括 XHRs。在請求上右鍵點擊會顯示上下文菜單，之后選擇 “Replay XHR”，就可以重新發(fā)出 XHRs 請求(POST 或者 GET)
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_74.png" alt="image_74" />
在網(wǎng)絡(luò)面板的任何地方，右鍵點擊/ 按住 Ctrl 鍵然后點擊會彈出菜單，在菜單中選擇 Clear Browser Cache / Network Cache。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_75.png" alt="image_75" />
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_76.png" alt="image_76" />
更多：等等，開發(fā)者工具可以做什么？| Igvita.com
通過啟動在網(wǎng)絡(luò)面板底部的 “Use large resource rows” 圖標(biāo)，你可以在面板中顯示 campact/smaller resource rows 視圖中看不到的額外信息。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_77.png" alt="image_77" />
對比 smaller resource rows 視圖：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_78.png" alt="image_78" />
以及 larger row 的情況：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_79.png" alt="image_79" />
左鍵點擊網(wǎng)絡(luò)面板中時間軸列的頭部，可以訪問更多網(wǎng)絡(luò)請求的細(xì)節(jié)。你可以在以下的選擇中選擇一個：
時間軸
開始時間
響應(yīng)時間
結(jié)束時間
持續(xù)時間
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-network-left.png" alt="network-left" />
瀏覽灰色的文字來深入查看：
每次請求的 HTTP 網(wǎng)絡(luò)定義是什么？
每次請求第一個字節(jié)是什么時候？
什么才是響應(yīng)時間最慢的資源？
在網(wǎng)絡(luò)面板中的任何一行的頭部右鍵，你可以啟用或者禁用列。默認(rèn)情況下有 3 列不會顯示：
Coolies
Domain
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-network-right.png" alt="network-right" />
在網(wǎng)絡(luò)面板中，你可以使用底部窗口的過濾器來觀察 WebSocket 信息幀。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-websocketbar.png" alt="websocketbar" />
比如：進入 Echo 實例中，在網(wǎng)絡(luò)面板底部選擇 “WebSocket” 過濾器然后點擊 “Connect” 按鈕。你通過 “Send” 按鈕發(fā)送的任何信息都可以用 “Frames” 子面板觀察到。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-websocketdemo.png" alt="websocketdemo" />
綠色表示來自你客戶端的信息。WebSocket 的觀察十分的有效，它允許你在觀察 WebSocket handshake 的同時查看 WebSocket 的獨立幀。
更多：等等，開發(fā)者工具可以做什么？ | Igvita.com
更多：使用開發(fā)者工具觀察 Websocket | Kaazing
當(dāng)你在網(wǎng)絡(luò)面板中觀察網(wǎng)絡(luò)請求時，可以通過鍵盤上的特殊鍵來縮小查找范圍。使用 Ctrl + F 或者 Cmd + F 可以讓整個過程更輕松。
在搜索輸入框中，輸入你要搜索的關(guān)鍵字，那些請求中有文件名/ URL 與之匹配的就會高亮顯示。結(jié)果顯示出來后，你可以使用輸入框旁邊的上下按鈕來選擇你需要的那一項。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_82.png" alt="image_82" />
盡管這很有用，但是如果它能夠只顯示和你搜索的關(guān)鍵字相匹配的選項的話就會更有用。"Filter" 選項就可以做到這一點，下面請看例子：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_83.png" alt="image_83" />
更多：評估網(wǎng)絡(luò)性能 | 開發(fā)者工具文檔
"about:net-internals" 頁面是一個特殊的 URL，它存放了網(wǎng)絡(luò)堆內(nèi)部狀態(tài)的一個臨時視圖。這對調(diào)試性能和連接問題十分有幫助。這里面包括請求性能的信息，代理設(shè)置以及 DNS 緩存。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_84.png" alt="image_84" />
同樣需要注意的是 about:net-internals/#tests 是可以對一個特殊的 URL 進行測試的。
更多計算網(wǎng)絡(luò)性能的技巧，請前往評估網(wǎng)絡(luò)性能
觸摸是一種在電腦上很難測試的輸入方式，因為大多數(shù)桌面上不支持觸摸輸入。在移動端上測試則會延長你的開發(fā)周期，一旦你做出了改變，你就需要上傳到服務(wù)器然后切換到設(shè)備上測試。
這個問題的一個解決方法是在你的開發(fā)機器上模擬一個觸摸事件。對單點觸摸來說，Chrome 開發(fā)者工具支持單個觸摸事件的模擬，這使得在電腦上調(diào)試移動應(yīng)用變得更加簡單。
要開啟觸控仿真：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_85.png" alt="image_85" />
現(xiàn)在我們可以像標(biāo)準(zhǔn)桌面事件那樣調(diào)試觸控事件，也可以在源面板中設(shè)置事件監(jiān)聽斷點。
更多：開發(fā)者工具設(shè)備模式 | DevTools 文檔
通常在桌面上啟動一個樣品然后在你想支持的設(shè)備上處理具體移動設(shè)備部分會更加容易一些，設(shè)備模擬器可以幫助我們使這個過程更加簡單。
開發(fā)者工具支持包括本地 User Agent 以及尺寸的重載在內(nèi)的設(shè)備仿真。這就使開發(fā)者可以在不同的設(shè)備和操作系統(tǒng)上調(diào)試移動端的顯示效果。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_86.png" alt="image_86" />
現(xiàn)在你可以模擬確切設(shè)備的尺寸，比如 Galaxy Nexus 以及 iPhone 等來測試你的查詢驅(qū)動設(shè)計。
更多：開發(fā)者工具的設(shè)備模式 | 開發(fā)者工具文檔
在一個支持地理信息支持的 HTML5 應(yīng)用中，調(diào)試不同經(jīng)緯度下的輸出是十分有用的。
開發(fā)者工具支持重寫 navigator.geolocation 的位置信息，也可以模擬一個模擬地理位置。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_87.png" alt="image_87" />
重寫地理位置
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_88.png" alt="image_88" />
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_89.png" alt="image_89" />
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_90.png" alt="image_90" />
更多：開發(fā)者工具模擬移動設(shè)備 | DevTools Docs
Dock-to-right 模式同樣對在一個縮小的視圖中預(yù)覽你頁面的表現(xiàn)是很有幫助的。要使用這個：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tips-and-tricks-image_92.png" alt="image_92" />
點擊右下角的設(shè)置齒輪，然后在 Setting > Ge
掃碼關(guān)注鍍金池微信號
手機訂課，優(yōu)惠多多