怎样设置VSCode在调试时自动打开相关的浏览器标签页？

配置 launch.json 并结合调试扩展，如使用 pwa-chrome 类型指定 url 和 webRoot，确保服务运行后即可自动打开浏览器调试。

要在 VSCode 调试时自动打开浏览器标签页，关键是配置 launch.json 文件，并结合合适的调试器扩展（如 Debugger for Chrome 或内置的 Node.js 调试支持）。以下是具体设置方法。

1. 安装并配置调试扩展

如果你使用的是基于浏览器的前端项目（如 React、Vue、普通 HTML 页面等），需要先安装浏览器调试支持：

• 打开 VSCode 扩展市场（Ctrl+Shift+X）
• 搜索并安装 Debugger for Chrome（已归档但依然可用）或使用更现代的 Microsoft Edge: DevTools（适用于 Edge）
• 较新版本的 VSCode 和项目模板（如 Vite、Next.js）可能已内置支持，无需额外扩展

2. 创建或修改 launch.json 配置文件

在项目根目录下创建 .vscode/launch.json 文件，添加启动并打开浏览器的配置。

例如，使用 Chrome 调试一个本地运行在 3000 端口的应用：

说明：

• type: "chrome" 表示使用 Chrome 调试器
• url 是你的应用运行地址
• webRoot 指定源码根目录，帮助映射源码

3. 确保服务已启动

VSCode 的调试配置通常只负责打开浏览器并附加调试器，不会自动启动开发服务器。你可以：

• 手动先运行 npm run dev 或对应启动命令
• 或使用 compound 合并启动，同时启动服务和浏览器

示例：合并启动服务和浏览器

Tellers AI

Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。

78

查看详情

注意：这种方式要求你的服务器支持远程调试（如启动时加上 --inspect 标志），且 Chrome 以远程调试模式启动（需外部命令启动 Chrome 并监听 9222 端口）。

4. 使用现代框架的集成调试（推荐）

对于使用 Vite、React、Next.js 等框架的项目，可直接利用官方调试配置。

例如，在 launch.json 中使用：

pwa-chrome 是新版 VSCode 推荐的调试类型，兼容性更好。

基本上就这些。配置好后，点击 VSCode 调试面板的“运行”按钮，浏览器就会自动打开并连接调试器。确保项目服务已在运行，或通过 compound 配置自动化启动流程。不复杂但容易忽略细节。

以上就是怎样设置VSCode在调试时自动打开相关的浏览器标签页？的详细内容，更多请关注php中文网其它相关文章！