chrome調試JavaScript腳本

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

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

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

源面板

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

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

執行控制

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

• continue Continue：繼續執行代碼，直至遇到另外一個斷點。
• step-over Step over（逐語句）：逐行執行，以瞭解每一行如何操做當前的變量。當你的代碼調用另外一個函數的時候，調試器不會跳到那個函數的代碼中去，其焦點仍是當前的函數，而 Step into 則相反。
• step-into Step into（逐過程）：和逐語句相似，可是點擊逐過程會在函數調用時,令調試器將執行轉到所調用的函數聲明中去。
• step-out Step out：當使用逐過程進入某個函數內部後，點擊該按鈕會跳過該函數聲明的剩餘部分，調試器會將執行過程移動到其父函數中。
• tonggle breakpoint 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 文件。

更多信息查看http://wiki.jikexueyuan.com/project/chrome-devtools/debugging-javascript.html

轉載自極客學院http://wiki.jikexueyuan.com/project/chrome-devtools/debugging-javascript.html