VS Code 中的浏览器调试
Visual Studio Code 包含一个内置调试器，用于 Edge 和 Chrome。有两种方法可以开始使用它。
- 使用 打开链接 命令调试 URL。
- 单击 JavaScript 调试终端 中的链接。
- 使用 启动配置 启动带有应用程序的浏览器。
我们还提供更详细的演练，以帮助您开始使用 React、Angular 和 Vue，以及其他调试 食谱。
打开链接命令
调试网页的最简单方法是通过 **调试：打开链接** 命令，该命令位于命令面板中（⇧⌘P（Windows、Linux Ctrl+Shift+P））。当您运行此命令时，系统会提示您输入要打开的 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://127.0.0.1:8000"
}
]
}
当您按下 F5 或 **运行和调试** 视图中的 **启动** 按钮时，https://127.0.0.1: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 或 **运行和调试** 视图中的 **启动** 按钮，以附加到正在运行的浏览器。您甚至可以添加 host 属性来调试在另一台计算机上运行的浏览器。
启动配置属性
调试配置存储在工作区 .vscode 文件夹中的 launch.json 文件中。有关创建和使用调试配置文件的介绍，请参阅常规 调试 文章。您可以“启动”带有应用程序的浏览器，也可以“附加”到您 以调试模式启动的 现有浏览器。
以下是特定于浏览器调试的常用 launch.json 属性的参考。您可以在 vscode-js-debug 选项 文档中查看完整选项集。
webRoot- 源代码的根目录。最常见的情况是，默认情况下，webRoot是您的工作区文件夹。此选项用于解决源映射。outFiles- 用于查找生成的 JavaScript 文件的 通配符模式 数组。请参阅 源映射 部分。smartStep- 尝试自动跳过不映射到源文件的源代码。请参阅 智能单步执行 部分。skipFiles- 自动跳过这些 通配符模式 覆盖的文件。请参阅 跳过不感兴趣的代码 部分。trace- 启用诊断输出。
这些属性仅适用于请求类型为 launch 的启动配置
url- 启动浏览器时自动打开的 URL。runtimeExecutable- 要使用的浏览器可执行文件的绝对路径，或者要使用的浏览器版本。有效的版本包括stable（默认）、canary、beta和dev。runtimeArgs- 启动浏览器时传递的可选参数。
这些属性仅适用于请求类型为 attach 的启动配置
url- 如果给出，VS Code 将附加到具有此 URL 的选项卡。如果没有提供，它将附加到所有浏览器选项卡。port- 要使用的调试端口。请参阅 附加到 Node.js 部分。address- 调试端口的 TCP/IP 地址。请参阅 附加到浏览器 部分。
浏览器中的 WebAssembly 调试
浏览器中的 WebAssembly 调试与 Node.js 相同，在此处阅读有关 WebAssembly 调试的更多信息。
源映射
VS Code 中的 JavaScript 调试器支持源映射，允许调试转换后的代码。例如，TypeScript 代码会被编译成 JavaScript，许多 Web 应用程序会将所有 JavaScript 文件捆绑在一起。源映射帮助调试器弄清楚如何将您的原始代码与在浏览器中运行的代码进行映射。
大多数用于构建 Web 应用程序的现代工具可以开箱即用。如果不是，我们关于 Node.js 中的源映射 的部分包含也适用于浏览器调试的指南。
加载源映射
每个 JavaScript 文件都可以通过 URL 或相对路径引用一个源映射。在处理 Web 应用程序时，您需要确保 URL 是 VS Code 中运行的调试器可以访问的。如果它无法访问，您将在 **调试控制台** 中看到错误，解释哪些源映射加载失败以及原因。
如果它无法直接访问，VS Code 将尝试使用浏览器的网络堆栈来请求源映射。这提供了在浏览器中应用任何身份验证状态或网络设置的机会。例如，如果您的源映射位于受 cookie 身份验证保护的位置，VS Code 仅当浏览器会话具有必要的 cookie 时才能加载它们。