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