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