在 VS Code 中引入 Chrome 调试

Name: Visual Studio Code
Author: Microsoft

2016 年 2 月 23 日，作者：Andy Sterland 和 Kenneth Auchenberg

自 Visual Studio Code 首次发布以来，我们的重点之一就是通过让开发人员能够直接从编辑器调试代码来简化他们的日常工作流程。我们从 .NET 和 Node.js 调试开始，今天我们将迈出下一步，为 Visual Studio Code 引入我们的 Chrome 调试器。

我们的 Chrome 调试器允许前端开发人员直接从 Visual Studio Code 调试在 Google Chrome 中运行的客户端 JavaScript 代码。

Demo

它是如何工作的？

我们的调试器通过其Chrome 调试器协议连接到 Chrome，我们将浏览器中加载的文件映射到 Visual Studio Code 中打开的文件。这意味着开发人员现在可以直接在源代码中设置断点，设置要监视的变量并在调试时查看完整的调用堆栈——所有这些都无需离开编辑器。

在上面的示例中，我们展示了一个通过 Browserify 打包和最小化的 AngularJS 应用程序正在从 VS Code 进行调试。这之所以有效，是因为我们的调试器理解 JavaScript Source Maps，我们将使用它来使开发人员能够直接从他们的原始源进行调试，而不是浏览器看到的转译结果。支持源映射还可以直接从 VS Code 调试 TypeScript。

目前，Chrome 需要在启用远程调试的情况下启动，并且只支持一个并发连接。这意味着如果您在 Chrome 中打开 DevTools，与 VS Code 的连接将因此终止。这有点烦人，我们希望这个问题能尽快修复。

开始使用

要开始使用，请打开扩展视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X))。当扩展列表出现时，键入“chrome”以过滤列表并安装 Debugger for Chrome 扩展。然后，您将创建一个启动配置文件，我们将在我们的 README 中详细解释此处。

您可以设置 VS Code 连接到已运行的 Chrome 实例，或者简单地启动一个启用远程调试的新实例，但请在我们的 README 中阅读更多相关信息。

支持的功能

在此首次发布中，我们支持以下功能：

设置断点，包括在启用源映射时在源文件中设置断点
TypeScript，通过源映射
单步调试，包括使用 Chrome 页面上的按钮
通过 VS Code 本地变量窗格查看局部作用域变量
调试 eval 脚本、script 标签和动态添加的脚本
通过 VS Code 监视面板进行监视。
调试控制台
大多数控制台 API

未来展望

我们认为前端开发人员还有很多工作要做，因为近年来为 Web 构建变得异常复杂。通过我们的 Chrome 调试器，我们正在迈出简化 Web 开发工作流程的第一步，在这个流程中，来自不同供应商的浏览器和工具能够协同工作，并且为 Web 构建感觉更加集成。

我们已将此扩展作为 MIT 许可的开源项目发布到 GitHub。它正在开发中，因此请参阅我们的问题页面了解已知错误——例如，我们在支持所有生成的源映射方面存在一些问题。

目前我们支持 Google Chrome，但我们也在考虑将支持扩展到 Microsoft Edge 和其他浏览器。我们非常希望您的反馈和帮助，以构建更好的调试体验。

如果您有任何问题或改进建议，请随时通过 Twitter 或 GitHub 联系我们。

–

Andy Sterland，高级项目经理，JavaScript 诊断
Kenneth Auchenberg，项目经理，JavaScript 诊断