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