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 在执行完成之前无法设置断点。解决方法是进行页面刷新，这将重新执行代码，从而触发断点。

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

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

启用加载时断点

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

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

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

目前就这些了。这是我们 Chrome 调试器的一次重大更新，我们迫不及待地想听听您对这些新功能的反馈。在一个编辑器与 DevTools 更紧密集成的世界中，请告诉我们您对工具的期望或需求。

编码愉快！

Kenneth (@auchenberg)