在 VS Code 中调试浏览器
Visual Studio Code 为 Edge 和 Chrome 内置了调试器。有几种方法可以开始使用它。
- 使用 打开链接 命令来调试一个 URL。
- 在 JavaScript 调试终端中点击一个链接。
- 使用 启动配置 来启动一个带有你的应用的浏览器。
我们也有更详细的教程来帮助你开始使用 React、Angular 和 Vue，以及其他调试技巧。
打开链接命令
调试网页最简单的方法是通过命令面板（⇧⌘P (Windows, Linux Ctrl+Shift+P)）中的 调试：打开链接 命令。运行此命令时，系统会提示你输入一个要打开的 URL，然后调试器就会附加到该 URL 上。
如果你的默认浏览器是 Edge，VS Code 将使用它来打开页面。否则，它会尝试在你的系统上寻找已安装的 Chrome。
启动配置
启动配置是在 VS Code 中设置调试的传统方式，它为你运行复杂的应用程序提供了最大的灵活性。
在本节中，我们将更详细地介绍针对更高级调试场景的配置和功能。关于 Node.js 跳过外部代码的说明也适用于基于浏览器的调试。
注意：如果你是 VS Code 的新手，可以在调试主题中了解常规调试功能和创建
launch.json配置文件。
启动浏览器
在大多数情况下，你会希望启动一个新的浏览器实例来调试你的网页或文件。为此，你可以创建一个名为 .vscode/launch.json 的文件，内容如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch my cool app",
"url": "https://:8000"
}
]
}
当你按下 F5 或在运行和调试视图中点击开始按钮时，https://:8000 将在调试模式下打开。如果你想使用 Chrome 而不是 Edge，请将 msedge 替换为 chrome。
你也可以在不运行服务器的情况下调试单个文件，例如：
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch hello.html",
"file": "${workspaceFolder}/hello.html"
}
]
}
附加到浏览器
要附加到正在运行的浏览器，需要以特殊的调试模式启动它。你可以使用以下命令来执行此操作，将 edge.exe 替换为你的 Edge 或 Chrome 二进制文件的路径：
edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
设置 --remote-debugging-port 会告诉浏览器在该端口上监听调试连接。设置一个独立的 --user-data-dir 会强制打开一个新的浏览器实例；如果不提供此标志，该命令将打开任何正在运行的浏览器的新窗口，并且不会进入调试模式。
接下来，在 vscode/launch.json 文件中添加一个新的部分，如下所示：
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "attach",
"name": "Attach to browser",
"port": 9222
}
]
}
现在，你可以按下 F5 或在运行和调试视图中点击开始按钮，以附加到正在运行的浏览器。你甚至可以添加一个 address 属性来调试在另一台机器上运行的浏览器。
启动配置属性
调试配置存储在工作区 .vscode 文件夹中的 launch.json 文件里。常规调试文章中介绍了调试配置文件的创建和使用。你可以“启动”一个带有你的应用的浏览器，或者“附加”到一个你已在调试模式下启动的现有浏览器。
下面是特定于浏览器调试的常见 launch.json 属性参考。你可以在 vscode-js-debug 选项 文档中查看完整的选项集。
webRoot- 你的源代码的根目录。在大多数情况下，并且默认情况下，webRoot就是你的工作区文件夹。此选项用于源码映射（sourcemap）解析。outFiles- 用于定位生成的 JavaScript 文件的 glob 模式数组。请参阅源码映射部分。smartStep- 尝试自动跳过那些未映射到源文件的源代码。请参阅智能单步调试部分。skipFiles- 自动跳过被这些 glob 模式覆盖的文件。请参阅跳过不感兴趣的代码部分。trace- 启用诊断输出。
这些属性仅适用于请求类型为 launch 的启动配置：
url- 启动浏览器时自动打开的 URL。runtimeExecutable- 要使用的浏览器可执行文件的绝对路径，或要使用的浏览器版本。有效版本包括stable(默认),canary,beta, 和dev。runtimeArgs- 启动浏览器时传递的可选参数。
这些属性仅适用于请求类型为 attach 的启动配置：
url- 如果提供，VS Code 将附加到具有此 URL 的标签页。如果未提供，它将附加到所有浏览器标签页。port- 用于远程调试浏览器的端口，与启动浏览器时使用的--remote-debugging-port相匹配。请参阅附加到浏览器部分。address- 被调试的浏览器正在监听的 IP 地址或主机名。请参阅附加到浏览器部分。
WebAssembly 调试
在浏览器中调试 WebAssembly 与 Node.js 相同，在此处阅读更多关于 WebAssembly 调试的信息。
源码映射
VS Code 中的 JavaScript 调试器支持源码映射（source maps），这允许调试转换后的代码。例如，TypeScript 代码被编译成 JavaScript，许多 Web 应用程序将它们所有的 JavaScript 文件捆绑在一起。源码映射帮助调试器找出如何在你的原始代码和在浏览器中运行的代码之间进行映射。
大多数用于构建 Web 应用程序的现代工具都能开箱即用。如果不行，我们关于 Node.js 中的源码映射部分包含了同样适用于浏览器调试的指导。
加载源码映射
每个 JavaScript 文件都可以通过一个 URL 或相对路径来引用一个源码映射。在处理 Web 应用程序时，你需要确保在 VS Code 中运行的调试器可以访问该 URL。如果不能，你会在调试控制台中看到错误，解释哪些源码映射加载失败以及原因。
如果无法直接访问，VS Code 会尝试使用浏览器的网络堆栈来请求源码映射。这为将浏览器中的任何身份验证状态或网络设置应用于请求提供了机会。例如，如果你的源码映射位于受 cookie 身份验证保护的位置，VS Code 只有在浏览器会话具有必要的 cookie 时才能加载它们。