取代浏览器插件调试，VS Code 整合 JS 调试工具

整理 | 孙胜

最近，Microsoft Edge 官博宣布，JavaScript 调试现已内置到 Visual Studio Code 代码中，因此不需再次使用浏览器调试。

调试.js程序，无需安装任何扩展。用户只需按 F5 或激活菜单栏中的调试图标并选择"运行和调试"即可开始会话。或者用户使用 Visual Studio Code 的代码命令控制板并运行"调试：打开链接"，通过Visual Studio Code编辑器，用户可以直接选择Chrome、Microsoft Edge调试.js而无需安装任何扩展。

来源于微软官网

如果用户选择内嵌的Microsoft Edge调试器，用户只需要注意到调试工具栏中的附加功能：检查按钮。

来源于微软官网

这个检查按钮会在 Visual Studio Code 代码运行过程中直接启动 Microsoft Edge调试工具。第一次点击此按钮时，用户需要安装用于 Visual Studio Code 调试 JavaScript 程序的 Microsoft Edge调试器插件。第一次安装成功后，以后就不会弹出这个提示框。

来源于微软官网

用户也可以检查 DOM、更改 CSS，并可以在查看相关代码程序的情况下，同时查看在浏览器中运行的项目的网络请求。

来源于微软官网

用户还可以使用调试器中的调试控制台与浏览器中的文档进行交互，就像在浏览器开发人员工具中使用控制台一样。用户可以完全访问窗口对象，并使用控制台控制程序 API。

来源于微软官网

如果用户想自动连接到 Microsoft Edge 并在编辑器中启动开发人员工具，则可以创建启动.json文件。请注意，"https://localhost:8080"可能需要为您的项目更改。

来源于微软官网

假如用户还想深入了解 Visual Studio Code 的内置 Java Script 调试工作流的功能，可以检查调试器扩展的 README 文件。

参考链接：

https://blogs.windows.com/msedgedev/2021/07/16/easier-debugging-developer-tools-in-visual-studio-code/