chrome調試 JavaScript 腳本

時間  2019-11-19
標籤 chrome 調試 javascript 腳本 欄目 Chrome 简体版
原文   原文鏈接

隨着 JavaScript 應用的複雜性逐漸提升，開發者須要有力的調試工具來幫助他們快速發現問題的緣由，而且能高效地修復它。Chrome DevTools 提供了一系列實用的工具使得調試 JavaScript 應用再也不是一件痛苦的事。javascript

在這個部分，咱們會經過調試 Google Closure hovercard demo 以及其餘的動態示例來讓你瞭解怎麼去使用這些工具。css

注意：若是你是 Web 開發者而且但願得到最新版的 DevTools，你應該使用 Chrome Canaryhtml

源面板

源面板容許你調試 JavaScript 代碼。它提供了 V8 調試器的圖形化接口。請經過如下步驟來使用源面板：html5

javascript-debugging-overview

源面板容許你查看正在瀏覽的頁面上全部的腳本。面板底部的圖標按鈕分別提供了標準的暫停、恢復以及逐條語句運行等操做。窗口底部還有一個按鈕，在出現異常時能夠強制暫停。在不一樣選項卡中，Sources 都是可見的，並且只要點擊 show-file-navigator 就能夠打開文件定位而且顯示所有腳本。java

執行控制

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

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

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

  • 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。github

使用斷點來調試

斷點是在腳本中處於某種目的而中止或者暫停代碼運行的地方。在 DevTools 中使用斷點能夠調試 JavaScript 代碼， DOM 更新以及網絡調用。web

添加及刪除斷點

在源面板中，打開一份 JavaScript 文件用於調試。在下面的例子中，咱們調試了來自 AngularJS version of TodoMVC 中的 todoCtrl.js 文件。chrome

sources-select-todoCtrl-js

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

sources-view-region

你能夠添加多個斷點。點擊其餘行行號前的空格就能夠繼續設置斷點，你所設置的所有斷點都會在右邊的側欄下 Breakpoints 選項中顯示出來。

斷點前的複選框能夠選擇是否啓用斷點，若是斷點被禁用了，那麼藍色的標籤會變色。

點擊斷點的入口能夠跳轉到源文件中的對應行：

multiple-breakpoints-region

點擊藍色的標籤能夠刪除斷點。

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

continue-to-here-region

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

conditional-breakpoint-region

在你想要分析循環或者常常觸發的回調事件的代碼時，條件斷點是很是有用的。

注意：有時候你可能不須要從 DevTools 接口來設置斷點。此時你但願從代碼中來啓動調試器，那麼你可使用 debugger 關鍵字來實現這一操做。

使用暫停斷點

當你設置了一個或多個斷點的時候，返回到瀏覽器窗口而且與頁面進行交互。在下面的例子中，咱們在 removeTodo() 方法中加入了斷點。如今任何想要在 TodoMVC 應用中刪除 todo 選項的行爲都將觸發斷點：

breakpoint-paused-app

要恢復代碼的運行，在 DevTools 窗口中點擊 Continue continue 按鈕或者使用 F8 鍵盤快捷鍵。

當腳本暫停運行的時候，你可使用右邊側欄中的 Watch Expressinos， Call Stack 以及 Scope Variables 面板。

調用棧面板

調用棧面板展現了代碼到暫停處的完整執行路徑，這讓咱們可以深刻代碼去找出致使錯誤的緣由。

callstack-region

若是要查看包括計時器和 XHR 事件在內的異步 JavaScript 回調函數的執行路徑，請點擊 Async 複選框。

enable-async-toggle

更多關於異步調用棧的信息和示例請參考 HTML5Rocks.com 網頁上的 Debuggin Asynchtonous JavaScript with Chrome DevTools

將 JavaScript 文件置於黑盒中

當你把一個 JavaScript 源文件放到黑盒中時，你在調試代碼的時候沒法跳轉到那個文件中了。你能夠在你感興趣的代碼嘗試一下。

blackboxing-expanded

你可使用設置面板來將腳本文件放入黑盒，或者右鍵點擊 sources 面板中的文件而後選擇 Blackbox Script。

blackboxing-dialog

更多關於黑盒的信息請參考 Blackboxing JavaScript file

控制檯

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

console

動態 JavaScript 中的斷點

  • 在 Sources 面板中腳本的下拉選項中找到 "dynamicScript.js" 而後在第二行設置斷點。
  • 此時程序應該在斷點處暫停
  • 在 DevTools 窗口中點擊 Continue continue 或者按 F8 來繼續執行

dynamic-script

提示：注意 dynamicScript.js 文件結尾處的 "//# sourceURL=dynamicScript.js" 這一行。這種方式能夠給由 eval 函數建立的腳本命名，更多的信息會在 Source Maps 這一節中說明。只有當用戶爲動態的 JavaScript 文件提供了名稱時才能爲其設置斷點。

在下一條 JavaScript 語句暫停執行

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

continue-to-resume

在出現異常處暫停

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

append-child

在未捕獲的異常處暫停

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

raise-exception

在 DOM 變化事件上的斷點

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

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

append-child-element

XHR 上的斷點

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

request-send

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

JavaScript 事件監聽器上的斷點

  • 打開右邊 Scripts 面板的 Event Listener Breakpoints 邊欄
  • 展開 Mouse 選項
  • 選中 mouseout 前的複選框能夠設置 mouseout 事件監聽器斷點

resumed

  • 將你的鼠標移動到下面的的盒子中
Hover me!
  • 此時應該在 mouseout 事件處理器處中止
  • 點擊 Continue continue 按鈕或者按 F8 來繼續執行

continue-to-resume-1

提示：下列事件是支持的
 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），將會命中全部剩餘的斷點。這實際上可對那些對頁面卸載過程感興趣的人很是有用。

long-resume

實時編輯

在創做和工做流章節中，咱們討論了怎麼經過 Source 面板來對腳本進行修改。在斷點處，一樣也能夠經過點擊主編輯面板來作出修改，而且可以實時修改腳本文件。

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

houseMouseOut

  • 點擊暫停按鈕來暫停調試
  • 修改函數，在末尾加入 console.log('Moused out')
  • 使用 Cmd + S 或者 Ctrl + S 快捷鍵能夠保存更改，記得確認是否保存
  • 點擊 pause/resume 按鈕來恢復執行
  • 當你的鼠標離開相關位置的時候，控制檯會輸出信息

pause-resume-mouseout

這容許你在不退出瀏覽器的狀況下經過使用 DevTools 來保存修改的內容。

異常

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

注意：若是是 Web 開發者而且但願得到最新版的 DevTools，你須要使用 Chrome Canary

追蹤異常

當程序出現異常的時候，你能夠打開 DevTools 控制檯（Ctrl + Shift + J/Cmd + Option + J），而後你會發現有許多 JavaScript 出錯信息。每條信息都指出了相應的文件名以及行號，你能夠經過這些信息來定位到源代碼中的相關位置。

tracking-exceptions

查看異常追蹤棧

致使出錯的執行路徑可能會有多條，而且到底是哪一條出現了錯誤並不明顯。只要 DevTools 窗口是打開的，控制檯中出現的異常情況都會伴隨着完整的 JavaScript 調用堆棧而出現。你能夠展開這些控制檯信息來查看堆棧信息並定位到代碼中的相應位置：

exception-stack-trace

在 JavaScript 出現異常時暫停

你可能但願下一次 JavaScript 發生異常的時候可以暫停 JavaScript 的執行並查看它的調用堆棧、範圍變量以及應用程序的狀態。Script 面板底部的暫停按鈕（pause-gray-1）容許你在不一樣的異常處模式之間切換，且該按鈕具備三種狀態：你能夠選擇在全部的異常發生時都暫停程序運行或者只是在未捕獲的異常發生時暫停程序運行或者是忽視全部的異常。

pause-execution

打印堆棧信息

在 DevTools 中輸出的日誌信息對於理解應用程序的執行過程很是有幫助，你能夠在日誌信息中包括相關聯的堆棧跟蹤信息來使它更加有用。想要作到這一點有多種方式。

Error.stack

每一個 Error 對象都有一個名爲 stack 的字符串屬性，該字符串包含了堆棧跟蹤信息：

error-stack

console.trace()

你可使用 concole.trace() 方法來輸出當前 JavaScript 調用堆棧，這種方法能夠用於檢測代碼：

console-trace

console.assert()

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

console-assert

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

Chrome 支持將一個處理函數設置爲 window.onerror。每當一個 JavaScript 異常在窗口上下文中拋出而且沒有被任何的 try/catch 塊捕獲的時候，該方法就會被調用。同時，異常信息、拋出異常的文件 URL 以及出現異常的位置在文件中的行號會按照上面的順序做爲三個參數傳給該方法。你可能以爲像這樣設置一個可以收集未捕獲異常信息而且能將其報告給服務器的錯誤處理器很是方便。

window-onerror

美化輸出格式

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

pretty-print-off

若是點擊左邊底部的花括號 prettyprint-icon 圖標，該 JavaScript 就會轉換爲更具可讀性的格式。這種格式對調試和設置斷點也至關方便。

pretty-print-on

源映射（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 而後點擊設置圖標 gear。在 Sources 選項下，查看 Enable javaScript source maps。你也能夠檢查 Enable CSS source maps，不過在這個例子中你並不須要這麼作。

source-maps

讓源映射（Source Map）可訪問

若是要讓 DevTools 知道某個源映射是可用的，請驗證縮小後的文件最後一行的代碼是否是下面這樣。

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

這一行一般是由生成映射的工具添加的，而且可以讓 DevTools 創建縮小後的文件和源文件之間的聯繫。在 CSS 中，這一行多是這樣的： /# sourceMappingURL=style.css.map /.

若是你不但願文件中有額外的註釋，你可使用 JavaScript 文件中的 HTTP 頭來告訴 DevTools 源文件在哪裏。這須要設置或者自定義 web 服務器，而且該內容超出了本篇教程的目標。

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

和註釋相似，該代碼一樣告訴 DevTools 到哪裏去尋找源文件並和相應 JavaScript 文件創建關聯。這個頭部信息也用於解決引用源映射的語言並不支持單行註釋的問題。

你也應該檢查你的 web 服務器是否設置好了對資源映射的支持。有些服務器，須要對每種文件都作出明確的配置，好比 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 註釋，該註釋代表了源文件是什麼。這在經過語言抽象來調試時具備很大的幫助。

coffeescript

 

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程