chrome調試 JavaScript 指令碼

標籤：async   字串   構建   pre   函數調用   oms   raw   sea   off   

隨著 JavaScript 應用的複雜性逐漸提高，開發人員需要有力的調試工具來協助他們快速發現問題的原因，並且能高效地修複它。Chrome DevTools 提供了一系列實用的工具使得調試 JavaScript 應用不再是一件痛苦的事。

在這個部分，我們會通過調試 Google Closure hovercard demo 以及其他的動態樣本來讓你瞭解怎麼去使用這些工具。

注意：如果你是 Web 開發人員並且希望獲得最新版的 DevTools，你應該使用 Chrome Canary

源面板

源面板允許你調試 JavaScript 代碼。它提供了 V8 調試器的圖形化介面。請通過以下步驟來使用源面板：

• 開啟一個網站，比如 Google Closure hovercard demo page 或者 TodoMVC 的應用程式。
• 開啟 DevTools 視窗。
• 如果沒有選中 Sources，則手動選中。

源面板允許你查看正在瀏覽的頁面上所有的指令碼。面板底部的表徵圖按鈕分別提供了標準的暫停、恢複以及逐條語句運行等操作。視窗底部還有一個按鈕，在出現異常時可以強制暫停。在不同選項卡中，Sources 都是可見的，而且只要點擊  就可以開啟檔案定位並且顯示全部指令碼。

執行控制

執行控制相關的按鈕就在側面板的頂端，它們使得你能夠逐步執行代碼。可用的按鈕有：

•  Continue：繼續執行代碼，直至遇到另一個斷點。
•  Step over（逐語句）：逐行執行，以瞭解每一行如何操作當前的變數。當你的代碼調用另一個函數的時候，調試器不會跳到那個函數的代碼中去，其焦點還是當前的函數，而 Step into 則相反。
•  Step into（逐過程）：和逐語句類似，但是點擊逐過程會在函數調用時,令調試器將執行轉到所調用的函式宣告中去。
•  Step out：當使用逐過程進入某個函數內部後，點擊該按鈕會跳過該函式宣告的剩餘部分，調試器會將執行過程移動到其父函數中。
•  Toggle breakpoints：切換斷點啟用、禁用狀態，同時保證各自的啟用狀態不會受到影響。

在源面板中，有許多相關的快速鍵可用：

• Continue：在Mac上使用 F8 或者 Command + \，其他平台上為 Ctrl+ \。
• Step over：在Mac上為 F10 或者 Command + ‘，在其他平台上為 Ctrl + ‘。
• Step into：在Mac上為 F11 或者 Command + ;，在其他平台上為 Ctrl + ;。
• Step out：在Mac上為 Shift + F11 或者 Shift + Command + ;，在其他平台上為 Shift+ Ctrl + ;。
• Next call frame：Ctrl + .。（適用於全平台）
• Previous call frame： Ctrl + ,。（適用於全平台）

如果想要查看其他支援的快速鍵，請參考 Shortcuts。

使用斷點來調試

斷點是在指令碼中處於某種目的而停止或者暫停代碼啟動並執行地方。在 DevTools 中使用斷點可以調試 JavaScript 代碼， DOM 更新以及網路調用。

添加及刪除斷點

在源面板中，開啟一份 JavaScript 檔案用於調試。在下面的例子中，我們調試了來自 AngularJS version of TodoMVC 中的 todoCtrl.js 檔案。

點擊行號前的空格來在那一行設定斷點。之後一個藍色的標記將會出現，這說明斷點已經被設定好了：

你可以添加多個斷點。點擊其他行行號前的空格就可以繼續設定斷點，你所設定的全部斷點都會在右邊的側欄下 Breakpoints 選項中顯示出來。

斷點前的複選框可以選擇是否啟用斷點，如果斷點被禁用了，那麼藍色的標籤會變色。

點擊斷點的入口可以跳轉到源檔案中的對應行：

點擊藍色的標籤可以刪除斷點。

右擊藍色標籤會開啟一個菜單，其中包括：Continue to Here，Remove Breakpoint，Edit Breakpoint 以及 Disable Breakpoint。

想要設定條件斷點，選擇 Edit Breakpoint ，或者，右鍵點擊行號前的空白然後選擇 Add Conditional Breakpoint。在輸入欄位中，可以輸入任何能夠返回 true 或者 false 的運算式。當條件返回 true 的時候，斷點會中斷代碼的執行。

在你想要分析迴圈或者經常觸發的回調事件的代碼時，條件斷點是非常有用的。

注意：有時候你可能不需要從 DevTools 介面來設定斷點。此時你希望從代碼中來啟動調試器，那麼你可以使用 debugger 關鍵字來實現這一操作。

使用暫停斷點

當你設定了一個或多個斷點的時候，返回到瀏覽器視窗並且與頁面進行互動。在下面的例子中，我們在 removeTodo() 方法中加入了斷點。現在任何想要在 TodoMVC 應用中刪除 todo 選項的行為都將觸發斷點：

要恢複代碼的運行，在 DevTools 視窗中點擊 Continue  按鈕或者使用 F8 鍵盤快速鍵。

當指令碼暫停啟動並執行時候，你可以使用右邊側欄中的 Watch Expressinos， Call Stack 以及 Scope Variables 面板。

調用棧面板

調用棧面板展示了代碼到暫停處的完整執行路徑，這讓我們能夠深入代碼去找出導致錯誤的原因。

如果要查看包括計時器和 XHR 事件在內的非同步 JavaScript 回呼函數的執行路徑，請點擊 Async 複選框。

更多關於非同步呼叫棧的資訊和樣本請參考 HTML5Rocks.com 網頁上的 Debuggin Asynchtonous JavaScript with Chrome DevTools

將 JavaScript 檔案置於黑盒中

當你把一個 JavaScript 源檔案放到黑盒中時，你在調試代碼的時候無法跳轉到那個檔案中了。你可以在你感興趣的代碼嘗試一下。

你可以使用設定面板來將指令檔放入黑盒，或者右鍵點擊 sources 面板中的檔案然後選擇 Blackbox Script。

更多關於黑盒的資訊請參考 Blackboxing JavaScript file

控制台

DevTools 中的 consle drawer 允許你在調試器當前暫停位置附近進行實驗。點擊 Esc 鍵在視圖中開啟控制台，再次按 Esc 鍵就會關閉該控制台。

動態 JavaScript 中的斷點

• Load dynamic script
• 在 Sources 面板中指令碼的下拉選項中找到 "dynamicScript.js" 然後在第二行設定斷點。
• Call function from dynamic script
• 此時程式應該在斷點處暫停
• 在 DevTools 視窗中點擊 Continue  或者按 F8 來繼續執行

提示：注意 dynamicScript.js 檔案結尾處的 "//# sourceURL=dynamicScript.js" 這一行。這種方式可以給由 eval 函數建立的指令碼命名，更多的資訊會在 Source Maps 這一節中說明。只有當使用者為動態 JavaScript 檔案提供了名稱時才能為其設定斷點。

在下一條 JavaScript 語句暫停執行

• 點擊 Pause  按鈕
• 將你的滑鼠移動到中的地區
• 你的滑鼠應該停在 onMouseOver 函數上
• 點擊 Continue  按鈕或者按 F8** 來繼續執行

在出現異常處暫停

• 點擊視窗底部的 Pause on exceptions  按鈕來切換到在異常處暫停模式
• 勾選 Pause On Caught Exceptinos 複選框
• Raise exception!
• 程式應該在 raiseAndCatchException 函數中停止
• 點擊 Continue  按鈕或者按 F8 來繼續執行

在未捕獲的異常處暫停

• 點擊 Pause on exceptions  按鈕
• 取消勾選 Pause On Caught Exceptions 複選框
• Raise exception!
• 此時若捕獲了異常，程式應該不會在 raiseAndCatchExcep 函數處停止
• Raise uncaught exception!
• 此時應該在 raiseException 函數處停止
• 點擊 Continue  按鈕或者按 F8 來繼續執行

在 DOM 變化事件上的斷點

• 右鍵點擊下面的 "Parent Element" 並且從文本菜單中選擇 Inspect Element（審查元素）

  Parent Element
• 右鍵點擊 Elements 面板元素然後選擇 Break on Subtree Modifications
• Append child!
• 此時應該會在 appendChild 函數調用處停止
• 點擊 Continue  按鈕或者按 F8 來繼續執行

XHR 上的斷點

• 點擊 Sources面板右側的 XHR Breakpoints 側邊欄上的 Add  按鈕
• 在文本輸入去輸入 "data.txt" 然後單擊斷行符號
• Retrieve data.txt by XHR
• 此時應該在send 函數調用處停止
• 右鍵點擊新建立的斷點然後選擇 Remove Breakpoint
• 點擊Devtools 視窗中的 Continue  按鈕或者按 F8 來繼續執行

提示：要編輯 URL 過濾器，雙擊 XHR Breakpoints 側邊欄的 XBR 斷點，具有空的 URL 過濾器的 XHR 斷點會匹配任何 XHR。

JavaScript 事件監聽器上的斷點

• 開啟右邊 Scripts 面板的 Event Listener Breakpoints 側邊欄
• 展開 Mouse 選項
• 選中 mouseout 前的複選框可以設定 mouseout 事件監聽器斷點

• 將你的滑鼠移動到下面的的盒子中

Hover me!

• 此時應該在 mouseout 事件處理器處停止
• 點擊 Continue  按鈕或者按 F8 來繼續執行

提示：下列事件是支援的
 Keyboard：鬆開按鍵，按下按鍵，輸入文字
 Mouse：點擊，雙擊，滑鼠鍵按下，滑鼠鍵鬆開，滑鼠懸浮，滑鼠移動，滑鼠從元素上離開。
 Control：重新設定大小，滾動，縮放，焦點，失焦，選擇，變化，重設  Clipboard：複製，剪下，粘貼，beforecopy，beforecut，beforepaste  Load：載入，卸載，廢除，出錯。  DOM Mutation：DOMActivate，DOMFocusin,DOMAttrModified，DOMCharacterDataModified，DOMNodeInserted，DOMNodeInsertedIntoDocument，DOMNodeRemoved，DOMNodeRemovedFromDocument，DOMSubtreeModified，DOMContentLoaded  Device：面向裝置，裝置運動。

長按恢複執行

當暫停時候，點擊並且不放開恢複按鈕可以讓 ”所有的暫停都阻塞 500 毫秒後恢複“。這會讓所有的斷點在半秒內都無法使用，可以使用該方法進入到下一個迴圈中，這樣就可以避免為了退出迴圈而不斷讓斷點繼續執行。

專業建議：當使用 DevTools 啟動“重新整理”的時候（焦點在 DevTools 的時候使用 Ctrl + R），全部暫停都會被禁用，直到新的頁面開始載入（或者作為備用方案，直到使用者按下 “Pause” 按鈕）。然而，如果你從瀏覽器的按鈕來啟動重新整理操作的時候（或者當焦點在 DevTools 之外的時候使用 Ctrl + R），將會命中所有剩餘的斷點。這實際上可對那些對頁面卸載過程感興趣的人非常有用。

即時編輯

在創作和工作流程章節中，我們討論了怎麼通過 Source 面板來對指令碼進行修改。在斷點處，同樣也可以通過點擊主編輯面板來做出修改，並且能夠即時修改指令檔。

• 定位到 Google Closure hovercard demo
• 在源面板中，開啟 “mouse.js” 然後使用 Ctrl/Cmd + Shift + O 來定位到 onMouseOut() 函數

• 點擊暫停按鈕來暫停調試
• 修改函數，在末尾加入 console.log(‘Moused out‘)
• 使用 Cmd + S 或者 Ctrl + S 快速鍵可以儲存更改，記得確認是否儲存
• 點擊 pause/resume 按鈕來恢複執行
• 當你的滑鼠離開相關位置的時候，控制台會輸出資訊

這允許你在不退出瀏覽器的情況下通過使用 DevTools 來儲存修改的內容。

異常

讓我們現在來看一下怎麼處理異常以及如何利用 Chrome 的 DevTools 使用堆棧追蹤。 異常處理是對於出現的異常的響應 - 除了有些需要特定處理過程的情況 - 並且一般會改變 JavaScript 代碼執行的正常流程。

注意：如果是 Web 開發人員並且希望獲得最新版的 DevTools，你需要使用 Chrome Canary

追蹤異常

當程式出現異常的時候，你可以開啟 DevTools 控制台（Ctrl + Shift + J/Cmd + Option + J），然後你會發現有許多 JavaScript 出錯資訊。每條資訊都指出了相應的檔案名稱以及行號，你可以通過這些資訊來定位到原始碼中的相關位置。

查看異常追蹤棧

導致出錯的執行路徑可能會有多條，並且究竟是哪一條出現了錯誤並不明顯。只要 DevTools 視窗是開啟的，控制台中出現的異常狀況都會伴隨著完整的 JavaScript 呼叫堆疊而出現。你可以展開這些控制台資訊來查看堆棧資訊並定位到代碼中的相應位置：

在 JavaScript 出現異常時暫停

你可能希望下一次 JavaScript 發生異常的時候能夠暫停 JavaScript 的執行並查看它的呼叫堆疊、範圍變數以及應用程式的狀態。Script 面板底部的暫停按鈕（）允許你在不同的異常處模式之間切換，且該按鈕具有三種狀態：你可以選擇在所有的異常發生時都暫停程式運行或者只是在未捕獲的異常發生時暫停程式運行或者是忽視所有的異常。

列印堆棧資訊

在 DevTools 中輸出的日誌資訊對於理解應用程式的執行過程非常有協助，你可以在日誌資訊中包括相關聯的堆疊追蹤資訊來使它更加有用。想要做到這一點有多種方式。

Error.stack

每個 Error 對象都有一個名為 stack 的字串屬性，該字串包含了堆疊追蹤資訊：

console.trace()

你可以使用 concole.trace() 方法來輸出當前 JavaScript 呼叫堆疊，這種方法可以用於檢測代碼：

console.assert()

將 assertion 加入到你的代碼中也是一種不錯的方法。只要調用 console.assert() 方法並將錯誤情況作為第一個參數即可，每當運算式的計算結果為 false 時你就會看到相應的控制台記錄：

在運行時使用 window.onerror 來處理異常

Chrome 支援將一個處理函數設定為 window.onerror。每當一個 JavaScript 異常在視窗上下文中拋出並且沒有被任何的 try/catch 塊捕獲的時候，該方法就會被調用。同時，異常資訊、拋出異常的檔案 URL 以及出現異常的位置在檔案中的行號會按照上面的順序作為三個參數傳給該方法。你可能覺得像這樣設定一個能夠收集未捕獲異常資訊並且能將其報告給伺服器的錯誤處理器非常方便。

美化輸出格式

如果你在閱讀以及調試某些過於簡化的 JavaScript 代碼有麻煩的時候，有一個美化輸出格式的選項可以讓這些過程更輕鬆。下面是一份簡化過頭的指令檔在 DevTools 中可能顯示出的樣子：

如果點擊左邊底部的花括弧  表徵圖，該 JavaScript 就會轉換為更具可讀性的格式。這種格式對調試和設定斷點也相當方便。

源映射（Source Maps）

你是否期望過你的用戶端代碼能夠保持可讀性並且適合調試，甚至是你在合并以及縮小代碼之後也能這樣嗎？那麼，現在你可以感受源映射的魔力了。

一個基於 JSON 格式的源映射建立了一種縮小後的代碼和原始碼之間的關係。

下面一種簡單的源映射的樣本：

  {    version : 3,    file: "out.min.js",    sourceRoot : "",    sources: ["foo.js", "bar.js"],    names: ["src", "maps", "are", "fun"],    mappings: "AAgBC,SAAQ,CAAEA"  }

源映射是指，當你為了構建產品而縮小及合并 JavaScript 檔案的時候，產生擁有源檔案資訊的一種映射。源映射會讓 DevTools 去載入你的源檔案，而不是縮小後的檔案。於是你可以使用源檔案來設定斷點以及調試代碼。同時，Chrome 實際啟動並執行是縮小後的代碼。這就讓你感覺像是在運行源檔案一般。

使用源映射使用正確的縮小器

你需要使用能夠建立源映射的縮小器來縮小你的代碼。Closure 編譯器以及 UglifyJS 2.0 就是兩款這樣的工具，當然，也有其他的很多支援 CoffeeScript， SASS 等源映射的工具。具體可以參考維基百科的頁面 Source maps: languages, tools and other info。

設定 DevTools

預設情況下，資源地圖（Sourcemap）是啟用的（Chrome 39 就是這樣），如果你想仔細檢查或者單獨啟用它，先開啟 DevTools 然後點擊設定表徵圖 。在 Sources 選項下，查看 Enable javaScript source maps。你也可以檢查 Enable CSS source maps，不過在這個例子中你並不需要這麼做。

讓源映射（Source Map）可訪問

如果要讓 DevTools 知道某個源映射是可用的，請驗證縮小後的檔案最後一行的代碼是不是下面這樣。

//# sourceMappingURL=/path/to/file.js.map

這一行通常是由產生映射的工具添加的，並且能夠讓 DevTools 建立縮小後的檔案和源檔案之間的聯絡。在 CSS 中，這一行可能是這樣的： /# sourceMappingURL=style.css.map /.

如果你不希望檔案中有額外的注釋，你可以使用 JavaScript 檔案中的 HTTP 頭來告訴 DevTools 源檔案在哪裡。這需要設定或者自訂 網頁伺服器，並且該內容超出了本篇教程的目標。

X-SourceMap: /path/to/file.js.map

和注釋類似，該代碼同樣告訴 DevTools 到哪裡去尋找源檔案並和相應 JavaScript 檔案建立關聯。這個頭部資訊也用於解決引用源映射的語言並不支援單行注釋的問題。

你也應該檢查你的 網頁伺服器是否設定好了對資源地圖的支援。有些伺服器，需要對每種檔案都做出明確的配置，比如 Google App Engine。在這種情況下，你的源映射應該設定將 MIME 類型設定為 application/json，不過 Chrome 瀏覽器會接受任何類型的類容聲明，比如 application/octet-stream。

請看一下 Chrome 中特別構建的 font dragr tool，當源映射啟用的時候，你將會注意到 JavaScript 檔案並沒有被編譯，並且你可以看到所有被引用的 JavaScript 檔案。這使用了源映射，但是後台實際啟動並執行是編譯後的代碼。任何的錯誤、日誌以及斷點都會映射到開發代碼中，這使得調試變得更為容易。實際上你的感覺就像是你在運行開發中的代碼一樣。

活動中的 @sourceURL 以及 displayName

源映射聲明的下列部分，並不會令你在使用 evals 函數來開發時有多輕鬆。

這個協助器（@sourceURL）看起來類似於 //# sourceMappingURL 屬性，並且實際上是在源映射 V3 規範中提及的。在你的代碼中包含下面這些特殊的注釋，你可以為 eval 函數及內嵌的指令碼和樣式命名，這樣他們在你的開發工具中顯示的時候就可以擁有邏輯名稱。

//# sourceURL=source.coffee

使用 sourceURL

• 定位到 demo
• 開啟 DevTools 並找到 Sources 面板
• 輸入一個名稱來為你的代碼命名
• 點擊 compile 按鈕
• CoffeeScript 源檔案會計算總值並且通過警告來輸出
• 如果你開啟 Sources 的子面板，你將會看到一個擁有你之前輸入的檔案名稱的新檔案。如果你雙擊該檔案來查看詳細內容，會發現該檔案中含有初始源檔案編譯後的 JavaScript。在最後一行會有 // @sourceURL 注釋，該注釋表明了源檔案是什麼。這在通過語言抽象來調試時具有很大的協助。

 

from: http://wiki.jikexueyuan.com/project/chrome-devtools/debugging-javascript.html

chrome調試 JavaScript 指令碼