Chrome 调试功能的新动向

Name: Visual Studio Code
Author: Microsoft

2017 年 12 月 20 日，作者：Kenneth Auchenberg

在过去几个月里，我们一直致力于改进 Visual Studio Code 中 Chrome 的调试体验。今天，我们很高兴发布三项新功能，我们相信这些功能将使 VS Code 中的客户端 JavaScript 调试变得更轻松、更可靠。

如果您不熟悉 Microsoft 的 Debugger for Chrome 扩展，它允许您调试在 Google Chrome 中运行的客户端 JavaScript。这为 VS Code 现有的 JavaScript 调试体验增添了新的维度，开箱即用即可调试 Node.js 中的服务器端 JavaScript。同时安装这两个调试器可以实现无缝的全栈 JavaScript 调试。

同时使用 VS Code 和 Chrome DevTools！

我们与 Google Chrome 团队合作的首要任务是实现同时使用 VS Code 和 Chrome DevTools！

这自第一天起就是用户提出的请求，但我们受限于 Chrome 缺乏多远程调试连接支持。这意味着当 VS Code 连接到 Chrome 时，Chrome DevTools 会被踢出；当您打开 Chrome DevTools 时，VS Code 会被踢出。

多连接意味着您现在可以在使用 DOM 探索器、分析器或 Chrome DevTools 中的任何其他工具的同时，从 VS Code 调试 JavaScript，而不会断开连接！

chrome_code

Chrome 团队几个月前开始致力于此，我们一直与他们紧密合作，以确保 VS Code 体验达到最佳。多连接功能已于 Chrome 63 中正式发布，并且与 VS Code 开箱即用。要获得多连接支持，请更新到最新的 Chrome 版本即可。

Chrome DevTools 和 VS Code 之间的同步单步调试

我们认为能够结合使用 VS Code 和 Chrome DevTools 是一种极其强大的体验。它使您能够为不同的场景选择合适的工具，而不必被迫做出替换工具的艰难选择。VS Code 让您可以在编辑器中调试 JavaScript，但我们也认识到一些用户更喜欢从 DevTools 调试 JavaScript，因此我们没有试图替换 DevTools，而是将其视为一个集成的机会。

实现更好工具集成的第一步是 Chrome DevTools 和 VS Code 之间的同步单步调试，如下所示：

sync_stepping

同步单步调试允许您同时在 VS Code 和 Chrome DevTools 中调试 JavaScript 源代码，并为您提供了在这两个工具之间无缝跳转的机会。在每个工具中，您都可以单步进入、继续和调试 JavaScript，而不必担心另一个调试器不同步。

现在还处于早期阶段，我们很高兴能探索编辑器和 DevTools 连接后可能实现的全新集成世界。

本地化调试 UI

在此版本中，我们还启用了调试器核心部分的本地化，这意味着诸如 break on uncaught exceptions 和 launch.json 中的属性描述等功能现在已本地化，并可用于我们支持的语言，例如中文。

locale1

在应用运行前设置断点

我们与Visual Studio 的朋友们一直在合作的另一个功能是能够在 JavaScript 在 Chrome 中执行之前设置断点。这听起来很简单，但当您深入了解 JavaScript 如何异步加载和执行的细节时，就相当复杂了。

许多用户都曾遇到在启动 Chrome 时断点未命中的情况。更令人困惑的是，在简单刷新页面后，他们的断点却命中了。为什么会这样？这有点复杂，但归结为 VS Code 和 Chrome 之间的时间问题，在时间轴中最好地说明了这一点

正如您在黄色时间轴上看到的那样，问题在于某些 JavaScript 在 VS Code 设置断点之前就已经执行了。

这意味着，如果您的源代码中包含断点，并且这些代码会作为页面加载的一部分而*立即执行*，那么 VS Code 在执行完成之前就无法设置断点。解决方法是刷新页面，这将重新执行代码，从而触发断点。

好消息！我们已经找到了一种可靠地在早期执行的源代码中设置断点的方法，我们称之为加载时断点。

加载时断点由 Chrome 中的 DOM 检测断点提供支持，它允许我们在每次加载新脚本时暂停脚本执行。这改变了我们调试器的工作流程，并允许我们在 JavaScript 执行之前有更多时间设置断点。

启用加载时断点

我们正在将加载时断点作为 Chrome 调试器的一项实验性功能发布，您可以通过在 launch.json 配置中将新的 breakOnLoad 属性设置为 true 来启用该功能

{
  "type": "chrome",
  "request": "launch",
  "name": "Chrome",
  "url": "https://:3000",
  "webRoot": "${workspaceRoot}/src",
  "breakOnLoad": true
}

启用加载时断点将对您初始页面加载性能产生影响，因为每当加载新脚本时，调试器都会短暂暂停 Chrome。因此，这目前是一项可选功能。如果您遇到断点丢失的问题，请尝试启用加载时断点，并告诉我们它们对您的效果如何。

暂时就这些了。这对我们的 Chrome 调试器来说是一个重大更新，我们迫不及待地想听到您对这些新功能的反馈。在一个编辑器与开发工具集成度更高的世界中，请告诉我们您对工具的期望或需求。

编码愉快！

Kenneth (@auchenberg)