隨著 JavaScript 應(yīng)用的復(fù)雜性逐漸提高，開發(fā)者需要有力的調(diào)試工具來幫助他們快速發(fā)現(xiàn)問題的原因，并且能高效地修復(fù)它。Chrome DevTools 提供了一系列實(shí)用的工具使得調(diào)試 JavaScript 應(yīng)用不再是一件痛苦的事。
在這個(gè)部分，我們會通過調(diào)試 Google Closure hovercard demo 以及其他的動(dòng)態(tài)示例來讓你了解怎么去使用這些工具。
注意：如果你是 Web 開發(fā)者并且希望獲得最新版的 DevTools，你應(yīng)該使用 Chrome Canary
源面板允許你調(diào)試 JavaScript 代碼。它提供了 V8 調(diào)試器的圖形化接口。請通過以下步驟來使用源面板：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/javascript-debugging-overview.jpg" alt="javascript-debugging-overview" />
源面板允許你查看正在瀏覽的頁面上所有的腳本。面板底部的圖標(biāo)按鈕分別提供了標(biāo)準(zhǔn)的暫停、恢復(fù)以及逐條語句運(yùn)行等操作。窗口底部還有一個(gè)按鈕，在出現(xiàn)異常時(shí)可以強(qiáng)制暫停。在不同選項(xiàng)卡中，Sources 都是可見的，而且只要點(diǎn)擊 http://wiki.jikexueyuan.com/project/chrome-devtools/images/show-file-navigator.png" alt="show-file-navigator" /> 就可以打開文件定位并且顯示全部腳本。
執(zhí)行控制相關(guān)的按鈕就在側(cè)面板的頂端，它們使得你能夠單步執(zhí)行代碼?？捎玫陌粹o有：
在源面板中，有許多相關(guān)的快捷鍵可用：
F8 或者 Command + \，其他平臺上為 Ctrl+ \。F10 或者 Command + '，在其他平臺上為 Ctrl + '。F11 或者 Command + ;，在其他平臺上為 Ctrl + ;。Shift + F11 或者 Shift + Command + ;，在其他平臺上為 Shift+ Ctrl + ;。Ctrl + .。（適用于全平臺）Ctrl + ,。（適用于全平臺）如果想要查看其他支持的快捷鍵，請參考 Shortcuts。
斷點(diǎn)是在腳本中處于某種目的而停止或者暫停代碼運(yùn)行的地方。在 DevTools 中使用斷點(diǎn)可以調(diào)試 JavaScript 代碼， DOM 更新以及網(wǎng)絡(luò)調(diào)用。
在源面板中，打開一份 JavaScript 文件用于調(diào)試。在下面的例子中，我們調(diào)試了來自 AngularJS version of TodoMVC 中的 todoCtrl.js 文件。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/sources-select-todoCtrl-js.png" alt="sources-select-todoCtrl-js" />
點(diǎn)擊行號前的空格來在那一行設(shè)置斷點(diǎn)。之后一個(gè)藍(lán)色的標(biāo)記將會出現(xiàn)，這說明斷點(diǎn)已經(jīng)被設(shè)置好了：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/sources-view-region.jpg" alt="sources-view-region" />
你可以添加多個(gè)斷點(diǎn)。點(diǎn)擊其他行行號前的空格就可以繼續(xù)設(shè)置斷點(diǎn)，你所設(shè)置的全部斷點(diǎn)都會在右邊的側(cè)欄下 Breakpoints 選項(xiàng)中顯示出來。
斷點(diǎn)前的復(fù)選框可以選擇是否啟用斷點(diǎn)，如果斷點(diǎn)被禁用了，那么藍(lán)色的標(biāo)簽會變色。
點(diǎn)擊斷點(diǎn)的入口可以跳轉(zhuǎn)到源文件中的對應(yīng)行：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/multiple-breakpoints-region.jpg" alt="multiple-breakpoints-region" />
點(diǎn)擊藍(lán)色的標(biāo)簽可以刪除斷點(diǎn)。
右擊藍(lán)色標(biāo)簽會打開一個(gè)菜單，其中包括：Continue to Here，Remove Breakpoint，Edit Breakpoint 以及 Disable Breakpoint。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/continue-to-here-region.jpg" alt="continue-to-here-region" />
想要設(shè)置條件斷點(diǎn)，選擇 Edit Breakpoint ，或者，右鍵點(diǎn)擊行號前的空白然后選擇 Add Conditional Breakpoint。在輸入域中，可以輸入任何能夠返回 true 或者 false 的表達(dá)式。當(dāng)條件返回 true 的時(shí)候，斷點(diǎn)會中斷代碼的執(zhí)行。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/conditional-breakpoint-region.jpg" alt="conditional-breakpoint-region" />
在你想要分析循環(huán)或者經(jīng)常觸發(fā)的回調(diào)事件的代碼時(shí)，條件斷點(diǎn)是非常有用的。
注意：有時(shí)候你可能不需要從 DevTools 接口來設(shè)置斷點(diǎn)。此時(shí)你希望從代碼中來啟動(dòng)調(diào)試器，那么你可以使用 debugger 關(guān)鍵字來實(shí)現(xiàn)這一操作。
當(dāng)你設(shè)置了一個(gè)或多個(gè)斷點(diǎn)的時(shí)候，返回到瀏覽器窗口并且與頁面進(jìn)行交互。在下面的例子中，我們在 removeTodo() 方法中加入了斷點(diǎn)。現(xiàn)在任何想要在 TodoMVC 應(yīng)用中刪除 todo 選項(xiàng)的行為都將觸發(fā)斷點(diǎn)：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/breakpoint-paused-app.png" alt="breakpoint-paused-app" />
要恢復(fù)代碼的運(yùn)行，在 DevTools 窗口中點(diǎn)擊 Continue http://wiki.jikexueyuan.com/project/chrome-devtools/images/continue-1.jpg" alt="continue" /> 按鈕或者使用 F8 鍵盤快捷鍵。
當(dāng)腳本暫停運(yùn)行的時(shí)候，你可以使用右邊側(cè)欄中的 Watch Expressinos， Call Stack 以及 Scope Variables 面板。
調(diào)用棧面板展示了代碼到暫停處的完整執(zhí)行路徑，這讓我們能夠深入代碼去找出導(dǎo)致錯(cuò)誤的原因。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/callstack-region.png" alt="callstack-region" />
如果要查看包括計(jì)時(shí)器和 XHR 事件在內(nèi)的異步 JavaScript 回調(diào)函數(shù)的執(zhí)行路徑，請點(diǎn)擊 Async 復(fù)選框。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/enable-async-toggle.png" alt="enable-async-toggle" />
更多關(guān)于異步調(diào)用棧的信息和示例請參考 HTML5Rocks.com 網(wǎng)頁上的 Debuggin Asynchtonous JavaScript with Chrome DevTools
當(dāng)你把一個(gè) JavaScript 源文件放到黑盒中時(shí)，你在調(diào)試代碼的時(shí)候無法跳轉(zhuǎn)到那個(gè)文件中了。你可以在你感興趣的代碼嘗試一下。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/blackboxing-expanded.png" alt="blackboxing-expanded" />
你可以使用設(shè)置面板來將腳本文件放入黑盒，或者右鍵點(diǎn)擊 sources 面板中的文件然后選擇 Blackbox Script。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/blackboxing-dialog.png" alt="blackboxing-dialog" />
更多關(guān)于黑盒的信息請參考 Blackboxing JavaScript file
DevTools 中的 consle drawer 允許你在調(diào)試器當(dāng)前暫停的位置附近進(jìn)行試驗(yàn)。點(diǎn)擊 Esc 鍵在視圖中打開控制臺，再次按 Esc 鍵就會關(guān)閉該控制臺。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/console.gif" alt="console" />
F8 來繼續(xù)執(zhí)行http://wiki.jikexueyuan.com/project/chrome-devtools/images/dynamic-script.jpg" alt="dynamic-script" />
提示：注意 dynamicScript.js 文件結(jié)尾處的 "//# sourceURL=dynamicScript.js" 這一行。這種方式可以給由 eval 函數(shù)創(chuàng)建的腳本命名，更多的信息會在 Source Maps 這一節(jié)中說明。只有當(dāng)用戶為動(dòng)態(tài)的 JavaScript 文件提供了名稱時(shí)才能為其設(shè)置斷點(diǎn)。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/continue-to-resume.jpg" alt="continue-to-resume" />
http://wiki.jikexueyuan.com/project/chrome-devtools/images/append-child.jpg" alt="append-child" />
http://wiki.jikexueyuan.com/project/chrome-devtools/images/raise-exception.jpg" alt="raise-exception" />
右鍵點(diǎn)擊下面的 "Parent Element" 并且從文本菜單中選擇 Inspect Element（審查元素）
appendChild 函數(shù)調(diào)用處停止http://wiki.jikexueyuan.com/project/chrome-devtools/images/append-child-element.jpg" alt="append-child-element" />
send 函數(shù)調(diào)用處停止http://wiki.jikexueyuan.com/project/chrome-devtools/images/request-send.jpg" alt="request-send" />
提示：要編輯 URL 過濾器，雙擊 XHR Breakpoints 邊欄的 XBR 斷點(diǎn)，具有空的 URL 過濾器的 XHR 斷點(diǎn)會匹配任何 XHR。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/resumed.jpg" alt="resumed" />
mouseout 事件處理器處停止http://wiki.jikexueyuan.com/project/chrome-devtools/images/continue-to-resume-1.jpg" alt="continue-to-resume-1" />
提示：下列事件是支持的
Keyboard：松開按鍵，按下按鍵，輸入文字
Mouse：點(diǎn)擊，雙擊，鼠標(biāo)鍵按下，鼠標(biāo)鍵松開，鼠標(biāo)懸浮，鼠標(biāo)移動(dòng)，鼠標(biāo)從元素上離開。
Control：重新設(shè)置大小，滾動(dòng)，縮放，焦點(diǎn)，失焦，選擇，變化，重置 Clipboard：復(fù)制，剪切，粘貼，beforecopy，beforecut，beforepaste Load：加載，卸載，廢除，出錯(cuò)。 DOM Mutation：DOMActivate，DOMFocusin,DOMAttrModified，DOMCharacterDataModified，DOMNodeInserted，DOMNodeInsertedIntoDocument，DOMNodeRemoved，DOMNodeRemovedFromDocument，DOMSubtreeModified，DOMContentLoaded Device：面向設(shè)備，設(shè)備運(yùn)動(dòng)。
當(dāng)暫停的時(shí)候，點(diǎn)擊并且不放開恢復(fù)按鈕可以讓 ”所有的暫停都阻塞 500 毫秒后恢復(fù)“。這會讓所有的斷點(diǎn)在半秒內(nèi)都無法使用，可以使用該方法進(jìn)入到下一個(gè)循環(huán)中，這樣就可以避免為了退出循環(huán)而不斷讓斷點(diǎn)繼續(xù)執(zhí)行。
專業(yè)建議：當(dāng)使用 DevTools 啟動(dòng)“刷新”的時(shí)候（焦點(diǎn)在 DevTools 的時(shí)候使用 Ctrl + R），全部暫停都會被禁用，直到新的頁面開始加載（或者作為備用方案，直到用戶按下 “Pause” 按鈕）。然而，如果你從瀏覽器的按鈕來啟動(dòng)刷新操作的時(shí)候（或者當(dāng)焦點(diǎn)在 DevTools 之外的時(shí)候使用 Ctrl + R），將會命中所有剩余的斷點(diǎn)。這實(shí)際上可對那些對頁面卸載過程感興趣的人非常有用。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/long-resume.png" alt="long-resume" />
在創(chuàng)作和工作流章節(jié)中，我們討論了怎么通過 Source 面板來對腳本進(jìn)行修改。在斷點(diǎn)處，同樣也可以通過點(diǎn)擊主編輯面板來做出修改，并且能夠?qū)崟r(shí)修改腳本文件。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/houseMouseOut.jpg" alt="houseMouseOut" />
http://wiki.jikexueyuan.com/project/chrome-devtools/images/pause-resume-mouseout.jpg" alt="pause-resume-mouseout" />
這允許你在不退出瀏覽器的情況下通過使用 DevTools 來保存修改的內(nèi)容。
讓我們現(xiàn)在來看一下怎么處理異常以及如何利用 Chrome 的 DevTools 使用堆棧追蹤。 異常處理是對于出現(xiàn)的異常的響應(yīng) - 除了有些需要特定處理過程的情況 - 并且一般會改變 JavaScript 代碼執(zhí)行的正常流程。
注意：如果是 Web 開發(fā)者并且希望獲得最新版的 DevTools，你需要使用 Chrome Canary
當(dāng)程序出現(xiàn)異常的時(shí)候，你可以打開 DevTools 控制臺（Ctrl + Shift + J/Cmd + Option + J），然后你會發(fā)現(xiàn)有許多 JavaScript 出錯(cuò)信息。每條信息都指出了相應(yīng)的文件名以及行號，你可以通過這些信息來定位到源代碼中的相關(guān)位置。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/tracking-exceptions.jpg" alt="tracking-exceptions" />
導(dǎo)致出錯(cuò)的執(zhí)行路徑可能會有多條，并且究竟是哪一條出現(xiàn)了錯(cuò)誤并不明顯。只要 DevTools 窗口是打開的，控制臺中出現(xiàn)的異常狀況都會伴隨著完整的 JavaScript 調(diào)用堆棧而出現(xiàn)。你可以展開這些控制臺信息來查看堆棧信息并定位到代碼中的相應(yīng)位置：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/exception-stack-trace.jpg" alt="exception-stack-trace" />
你可能希望下一次 JavaScript 發(fā)生異常的時(shí)候能夠暫停 JavaScript 的執(zhí)行并查看它的調(diào)用堆棧、范圍變量以及應(yīng)用程序的狀態(tài)。Script 面板底部的暫停按鈕（http://wiki.jikexueyuan.com/project/chrome-devtools/images/pause-gray-1.png" alt="pause-gray-1" />）允許你在不同的異常處模式之間切換，且該按鈕具有三種狀態(tài)：你可以選擇在所有的異常發(fā)生時(shí)都暫停程序運(yùn)行或者只是在未捕獲的異常發(fā)生時(shí)暫停程序運(yùn)行或者是忽視所有的異常。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/pause-execution.jpg" alt="pause-execution" />
在 DevTools 中輸出的日志信息對于理解應(yīng)用程序的執(zhí)行過程非常有幫助，你可以在日志信息中包括相關(guān)聯(lián)的堆棧跟蹤信息來使它更加有用。想要做到這一點(diǎn)有多種方式。
每個(gè) Error 對象都有一個(gè)名為 stack 的字符串屬性，該字符串包含了堆棧跟蹤信息：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/error-stack.jpg" alt="error-stack" />
你可以使用 concole.trace() 方法來輸出當(dāng)前 JavaScript 調(diào)用堆棧，這種方法可以用于檢測代碼：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/console-trace.jpg" alt="console-trace" />
將 assertion 加入到你的代碼中也是一種不錯(cuò)的方法。只要調(diào)用 console.assert() 方法并將錯(cuò)誤情況作為第一個(gè)參數(shù)即可，每當(dāng)表達(dá)式的計(jì)算結(jié)果為 false 時(shí)你就會看到相應(yīng)的控制臺記錄：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/console-assert.jpg" alt="console-assert" />
Chrome 支持將一個(gè)處理函數(shù)設(shè)置為 window.onerror。每當(dāng)一個(gè) JavaScript 異常在窗口上下文中拋出并且沒有被任何的 try/catch 塊捕獲的時(shí)候，該方法就會被調(diào)用。同時(shí)，異常信息、拋出異常的文件 URL 以及出現(xiàn)異常的位置在文件中的行號會按照上面的順序作為三個(gè)參數(shù)傳給該方法。你可能覺得像這樣設(shè)置一個(gè)能夠收集未捕獲異常信息并且能將其報(bào)告給服務(wù)器的錯(cuò)誤處理器非常方便。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/window-onerror.jpg" alt="window-onerror" />
如果你在閱讀以及調(diào)試某些過于簡化的 JavaScript 代碼有麻煩的時(shí)候，有一個(gè)美化輸出格式的選項(xiàng)可以讓這些過程更輕松。下面是一份簡化過頭的腳本文件在 DevTools 中可能顯示出的樣子：
http://wiki.jikexueyuan.com/project/chrome-devtools/images/pretty-print-off.jpg" alt="pretty-print-off" />
如果點(diǎn)擊左邊底部的花括號 http://wiki.jikexueyuan.com/project/chrome-devtools/images/prettyprint-icon.png" alt="prettyprint-icon" /> 圖標(biāo)，該 JavaScript 就會轉(zhuǎn)換為更具可讀性的格式。這種格式對調(diào)試和設(shè)置斷點(diǎn)也相當(dāng)方便。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/pretty-print-on.jpg" alt="pretty-print-on" />
你是否期望過你的客戶端代碼能夠保持可讀性并且適合調(diào)試，甚至是你在合并以及縮小代碼之后也能這樣嗎？那么，現(xiàn)在你可以感受源映射的魔力了。
一個(gè)基于 JSON 格式的源映射創(chuàng)建了一種縮小后的代碼和源代碼之間的關(guān)系。
下面一種簡單的源映射的示例：
{
version : 3,
file: "out.min.js",
sourceRoot : "",
sources: ["foo.js", "bar.js"],
names: ["src", "maps", "are", "fun"],
mappings: "AAgBC,SAAQ,CAAEA"
}源映射是指，當(dāng)你為了構(gòu)建產(chǎn)品而縮小及合并 JavaScript 文件的時(shí)候，產(chǎn)生擁有源文件信息的一種映射。源映射會讓 DevTools 去加載你的源文件，而不是縮小后的文件。于是你可以使用源文件來設(shè)置斷點(diǎn)以及調(diào)試代碼。同時(shí)，Chrome 實(shí)際運(yùn)行的是縮小后的代碼。這就讓你感覺像是在運(yùn)行源文件一般。
你需要使用能夠創(chuàng)建源映射的縮小器來縮小你的代碼。Closure 編譯器以及 UglifyJS 2.0 就是兩款這樣的工具，當(dāng)然，也有其他的很多支持 CoffeeScript， SASS 等源映射的工具。具體可以參考維基百科的頁面 Source maps: languages, tools and other info。
默認(rèn)情況下，資源映射（Sourcemap）是啟用的（Chrome 39 就是這樣），如果你想仔細(xì)檢查或者單獨(dú)啟用它，先打開 DevTools 然后點(diǎn)擊設(shè)置圖標(biāo) http://wiki.jikexueyuan.com/project/chrome-devtools/images/gear.png" alt="gear" />。在 Sources 選項(xiàng)下，查看 Enable javaScript source maps。你也可以檢查 Enable CSS source maps，不過在這個(gè)例子中你并不需要這么做。
http://wiki.jikexueyuan.com/project/chrome-devtools/images/source-maps.png" alt="source-maps" />
如果要讓 DevTools 知道某個(gè)源映射是可用的，請驗(yàn)證縮小后的文件最后一行的代碼是不是下面這樣。
//# sourceMappingURL=/path/to/file.js.map這一行通常是由生成映射的工具添加的，并且能夠讓 DevTools 建立縮小后的文件和源文件之間的聯(lián)系。在 CSS 中，這一行可能是這樣的： /# sourceMappingURL=style.css.map /.
如果你不希望文件中有額外的注釋，你可以使用 JavaScript 文件中的 HTTP 頭來告訴 DevTools 源文件在哪里。這需要設(shè)置或者自定義 web 服務(wù)器，并且該內(nèi)容超出了本篇教程的目標(biāo)。
X-SourceMap: /path/to/file.js.map和注釋類似，該代碼同樣告訴 DevTools 到哪里去尋找源文件并和相應(yīng) JavaScript 文件建立關(guān)聯(lián)。這個(gè)頭部信息也用于解決引用源映射的語言并不支持單行注釋的問題。
你也應(yīng)該檢查你的 web 服務(wù)器是否設(shè)置好了對資源映射的支持。有些服務(wù)器，需要對每種文件都做出明確的配置，比如 Google App Engine。在這種情況下，你的源映射應(yīng)該設(shè)置將 MIME 類型設(shè)置為 application/json，不過 Chrome 瀏覽器會接受任何類型的類容聲明，比如 application/octet-stream。
請看一下 Chrome 中特別構(gòu)建的 font dragr tool，當(dāng)源映射啟用的時(shí)候，你將會注意到 JavaScript 文件并沒有被編譯，并且你可以看到所有被引用的 JavaScript 文件。這使用了源映射，但是后臺實(shí)際運(yùn)行的是編譯后的代碼。任何的錯(cuò)誤、日志以及斷點(diǎn)都會映射到開發(fā)代碼中，這使得調(diào)試變得更為容易。實(shí)際上你的感覺就像是你在運(yùn)行開發(fā)中的代碼一樣。
源映射聲明的下列部分，并不會令你在使用 evals 函數(shù)來開發(fā)時(shí)有多輕松。
這個(gè)幫助器（@sourceURL）看起來類似于 //# sourceMappingURL 屬性，并且實(shí)際上是在源映射 V3 規(guī)范中提及的。在你的代碼中包含下面這些特殊的注釋，你可以為 eval 函數(shù)及內(nèi)嵌的腳本和樣式命名，這樣他們在你的開發(fā)工具中顯示的時(shí)候就可以擁有邏輯名稱。
//# sourceURL=source.coffeehttp://wiki.jikexueyuan.com/project/chrome-devtools/images/coffeescript.jpg" alt="coffeescript" />
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多