随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它。Chrome DevTools 提供了一系列实用的工具使得调试 JavaScript 应用不再是一件痛苦的事。
在这个部分,我们会通过调试 Google Closure hovercard demo 以及其他的动态示例来让你了解怎么去使用这些工具。
注意:如果你是 Web 开发者并且希望获得最新版的 DevTools,你应该使用 Chrome Canary
源面板允许你调试 JavaScript 代码。它提供了 V8 调试器的图形化接口。请通过以下步骤来使用源面板:
源面板允许你查看正在浏览的页面上所有的脚本。面板底部的图标按钮分别提供了标准的暂停、恢复以及逐条语句运行等操作。窗口底部还有一个按钮,在出现异常时可以强制暂停。在不同选项卡中,Sources 都是可见的,而且只要点击 show-file-navigator 就可以打开文件定位并且显示全部脚本。
执行控制相关的按钮就在侧面板的顶端,它们使得你能够单步执行代码。可用的按钮有:
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