介绍 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 的连接将会被 Chrome 终止。这稍微有点烦人，我们希望这个问题能在不久后得到修复。

开始使用

要开始使用，请打开 **Extensions（扩展）** 视图（⇧⌘X (Windows, Linux Ctrl+Shift+X)）。当扩展列表出现时，输入 'chrome' 来过滤列表并安装 Debugger for Chrome 扩展。然后，你需要创建一个启动配置文件，我们在 README 这里有详细说明。

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

支持的功能

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

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

未来展望

我们认为前端开发人员还有很多工作要做，因为近年来 Web 开发已经变得极其复杂。通过我们的 Chrome 调试器，我们正朝着简化 Web 开发工作流程迈出第一步，让来自不同厂商的浏览器和工具能够协同工作，并使 Web 开发感觉更加整合。

我们已经在 GitHub 上以 MIT 许可的开源项目形式发布了这个扩展。它目前正在开发中，请查看我们的 issues 页面以了解已知错误——例如，我们在支持各种生成的源码映射方面还存在一些问题。

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

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

–

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