在 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（JavaScript 源映射），我们将利用它来使开发人员可以直接从原始源代码进行调试，而不是浏览器看到的转译结果。支持源映射还可以在 VS Code 中直接调试 TypeScript。

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

开始使用

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

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

支持的功能

在第一个版本中，我们支持以下功能：

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

未来展望

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

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

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

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

–

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