VS Code 中的浏览器调试
Visual Studio Code 内置了 Edge 和 Chrome 的调试器。有几种入门方式。
- 使用Open Link命令调试URL。
- 在JavaScript调试终端点击链接。
- 用启动配置打开浏览器和你的应用。
我们还有更详细的教程，帮助你入门使用React、Angular和Vue，以及其他调试方法。
打开链接命令
调试网页最简单的方法是通过命令面板中的 Debug： Open Link 命令（⇧⌘P（Windows，Linux Ctrl+Shift+P））中找到。当你执行这个命令时，系统会提示你打开一个URL，调试器也会被附加。
如果你的默认浏览器是 Edge，VS Code 会用它来打开页面。否则，它会尝试在你的系统上找到安装的Chrome。
发射配置
启动配置是VS Code调试的传统方式，为运行复杂应用提供了最大的灵活性。
在本节中，我们将更详细地介绍更高级调试场景下的配置和功能。关于对外部代码Node.js步进的指令同样适用于基于浏览器的调试。
启动浏览器
在大多数情况下，你需要启动一个新的浏览器实例来调试网页或文件。为此，你可以创建一个名为.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其中镀铬.
你也可以在不运行服务器的情况下调试单个文件，例如：
{
"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
设置--远程调试端口告诉浏览器监听该端口的调试连接。设立独立--用户-数据-dir强制打开新的浏览器实例;如果没有给出该标志，该命令会在任何运行中的浏览器中打开一个新窗口，而不是进入调试模式。
接下来，在VScode/launch.json文件如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "attach",
"name": "Attach to browser",
"port": 9222
}
]
}
现在，你可以在运行和调试视图中按F5或开始按钮，连接到正在运行的浏览器。你甚至可以添加一个地址用于调试在不同机器上运行的浏览器的属性。
发射配置属性
调试配置存储在launch.json文件位于你工作区.vscode文件夹。关于调试配置文件的创建和使用介绍见一般的调试文章。你可以选择用你的应用“启动”浏览器，或者“附加”到你在调试模式下启动的现有浏览器。
以下是一个常见的参考文献launch.json专门用于浏览器调试的属性。你可以在 vscode-js-debug 选项文档中查看完整的选项集。
web根- 源代码的根目录。通常情况下，且默认情况下，web根是你的工作区文件夹。该选项用于源图分辨率。outFiles- 用于定位生成的JavaScript文件的球状模式数组。详见Source地图章节。smartStep- 尝试自动跨越不映射到源文件的源代码。参见智能步进部分。skip文件- 自动跳过被这些团状图案覆盖的文件。请参见跳过无趣代码的部分。追踪- 启用诊断输出。
这些属性仅适用于请求类型的启动配置发射:
网址- 浏览器启动时自动打开的URL。runtime可执行文件- 要么是指向浏览器可执行文件的绝对路径，要么是浏览器的版本。有效的版本包括稳定（默认），金丝雀,测试版， 和开发者.runtimeArgs- 启动浏览器时传递的可选参数。
这些属性仅适用于请求类型的启动配置附着:
网址- 如果提供，VS Code 会附加到带有该 URL 的标签页。如果没有提供，它会附加到所有浏览器标签页。港口- 用于远程调试浏览器的端口，匹配--远程调试端口启动浏览器时使用。请参见“附加浏览器”部分。地址- 调试浏览器监听的IP地址或主机名。请参见“附加浏览器”部分。
WebAssembly 调试
浏览器中的 WebAssembly 调试与 Node.js 完全相同，点击这里了解更多关于 WebAssembly 调试的内容。
来源地图
VS Code 中的 JavaScript 调试器支持源映射，允许调试转换后的代码。例如，TypeScript 代码被编译成 JavaScript，许多网页应用将所有 JavaScript 文件捆绑在一起。源映射帮助调试器弄清楚如何映射你的原始代码和浏览器中运行的代码。
大多数用于构建网页应用的现代工具都能开箱即用。如果没有，我们关于Node.js源图的部分也包含适用于浏览器调试的指导。
加载源映射
每个JavaScript文件可以通过URL或相对路径引用源地图。处理网页应用时，你需要确保 URL 是运行在 VS Code 中的调试器能够访问的。如果不能，你会在调试控制台看到错误，说明哪些源映射未能加载以及原因。
如果无法直接访问，VS Code会尝试使用浏览器的网络栈请求源映射。这为浏览器中的任何认证状态或网络设置应用到请求提供了机会。例如，如果你的源地图位于由 Cookie 认证保护的位置，VS Code 可以加载它们，前提是浏览器会话中有必要的 Cookie。