Chrome开发工具 调试 JavaScript 脚本

由 珍珍阿姨 创建，Loen 最后一次修改 2016-08-12 调试 JavaScript 脚本随着 JavaScript 应用的复杂性逐渐提高，开发者需要有力的调试工具来帮助他们快速发现问题的原因，并且能高效地修复它。Chrome DevTools 提供了一系列实用的工具使得调试 JavaScript 应用不再是一件痛苦的事。在这个部分，我们会通过调试 Google Closure hovercard demo 以及其他的动态示例来让你了解怎么去使用这些工具。注意：如果你是 Web 开发者并且希望获得最新版的 DevTools，你应该使用 Chrome Canary源面板源面板允许你调试 JavaScript 代码。它提供了 V8 调试器的图形化接口。请通过以下步骤来使用源面板：打开一个站点，比如 Google Closure hovercard demo page 或者 TodoMVC 的应用程序。打开 DevTools 窗口。如果没有选中 Sources，则手动选中。源面板允许你查看正在浏览的页面上所有的脚本。面板底部的图标按钮分别提供了标准的暂停、恢复以及逐条语句运行等操作。窗口底部还有一个按钮，在出现异常时可以强制暂停。在不同选项卡中，Sources 都是可见的，而且只要点击 就可以打开文件定位并且显示全部脚本。执行控制执行控制相关的按钮就在侧面板的顶端，它们使得你能够单步执行代码。可用的按钮有： Continue：继续执行代码，直至遇到另一个断点。 Step over（逐语句）：逐行执行，以了解每一行如何操作当前的变量。当你的代码调用另一个函数的时候，调试器不会跳到那个函数的代码中去，其焦点还是当前的函数，而 Step into 则相反。 Step into（逐过程）：和逐语句类似，但是点击逐过程会在函数调用时,令调试器将执行转到所调用的函数声明中去。 Step out：当使用逐过程进入某个函数内部后，点击该按钮会跳过该函数声明的剩余部分，调试器会将执行过程移动到其父函数中。 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 文件。点击行号前的空格来在那一行设置断点。之后一个蓝色的标记将会出现，这说明断点已经被设置好了：你可以添加多个断点。点击其他行行号前的空格就可以继续设置断点，你所设置的全部断点都会在右边的侧栏下 Breakpoints 选项中显示出来。断点前的复选框可以选择是否启用断点，如果断点被禁用了，那么蓝色的标签会变色。点击断点的入口可以跳转到源文件中的对应行：点击蓝色的标签可以删除断点。右击蓝色标签会打开一个菜单，其中包括：Continue to Here，Remove Breakpoint，Edit Breakpoint 以及 Disable Breakpoint。想要设置条件断点，选择 Edit Breakpoint ，或者，右键点击行号前的空白然后选择 Add Conditional Breakpoint。在输入域中，可以输入任何能够返回 true 或者 false 的表达式。当条件返回 true 的时候，断点会中断代码的执行。在你想要分析循环或者经常触发的回调事件的代码时，条件断点是非常有用的。注意：有时候你可能不需要从 DevTools 接口来设置断点。此时你希望从代码中来启动调试器，那么你可以使用 debugger 关键字来实现这一操作。使用暂停断点当你设置了一个或多个断点的时候，返回到浏览器窗口并且与页面进行交互。在下面的例子中，我们在 removeTodo() 方法中加入了断点。现在任何想要在 TodoMVC 应用中删除 todo 选项的行为都将触发断点：要恢复代码的运行，在 DevTools 窗口中点击 Continue 按钮或者使用 F8 键盘快捷键。当脚本暂停运行的时候，你可以使用右边侧栏中的 Watch Expressinos， Call Stack 以及 Scope Variables 面板。调用栈面板调用栈面板展示了代码到暂停处的完整执行路径，这让我们能够深入代码去找出导致错误的原因。如果要查看包括计时器和 XHR 事件在内的异步 JavaScript 回调函数的执行路径，请点击 Async 复选框。更多关于异步调用栈的信息和示例请参考 HTML5Rocks.com 网页上的 Debuggin Asynchtonous JavaScript with Chrome DevTools将 JavaScript 文件置于黑盒中当你把一个 JavaScript 源文件放到黑盒中时，你在调试代码的时候无法跳转到那个文件中了。你可以在你感兴趣的代码尝试一下。你可以使用设置面板来将脚本文件放入黑盒，或者右键点击 sources 面板中的文件然后选择 Blackbox Script。更多关于黑盒的信息请参考 Blackboxing JavaScript file控制台DevTools 中的 consle drawer 允许你在调试器当前暂停的位置附近进行试验。点击 Esc 键在视图中打开控制台，再次按 Esc 键就会关闭该控制台。动态 JavaScript 中的断点Load dynamic script在 Sources 面板中脚本的下拉选项中找到 "dynamicScript.js" 然后在第二行设置断点。Call function from dynamic script此时程序应该在断点处暂停在 DevTools 窗口中点击 Continue 或者按 F8 来继续执行提示：注意 dynamicScript.js 文件结尾处的 "//# sourceURL=dynamicScript.js" 这一行。这种方式可以给由 eval 函数创建的脚本命名，更多的信息会在 Source Maps 这一节中说明。只有当用户为动态的 JavaScript 文件提供了名称时才能为其设置断点。在下一条 JavaScript 语句暂停执行点击 Pause 按钮将你的鼠标移动到下图中的区域你的鼠标应该停在 onMouseOver 函数上点击 Continue 按钮或者按 F8** 来继续执行在出现异常处暂停点击窗口底部的 Pause on exceptions 按钮来切换到在异常处暂停模式勾选