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