在 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": "http://localhost:8000"
}
]
}
当您按下 F5 或在运行和调试视图中单击启动按钮时，http://localhost: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是您的工作区文件夹。此选项用于源映射解析。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 调试器支持源映射，允许调试转换后的代码。例如，TypeScript 代码编译为 JavaScript，许多 Web 应用程序会将所有 JavaScript 文件捆绑在一起。源映射帮助调试器确定如何在您的原始代码和浏览器中运行的代码之间进行映射。
用于构建 Web 应用程序的大多数现代工具都可以直接使用。如果不是，我们的关于Node.js 中的源映射一节包含也适用于浏览器调试的指导。
加载源映射
每个 JavaScript 文件都可能通过 URL 或相对路径引用源映射。处理 Web 应用程序时，您需要确保 VS Code 中运行的调试器可以访问该 URL。如果无法访问，您会在调试控制台中看到错误，解释哪些源映射加载失败以及原因。
如果无法直接访问，VS Code 将尝试使用浏览器的网络堆栈请求源映射。这为浏览器中的任何身份验证状态或网络设置应用于请求提供了机会。例如，如果您的源映射位于受 cookie 身份验证保护的位置，则仅当浏览器会话具有必要的 cookie 时，VS Code 才能加载它们。