配置 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 端口的应用：
{ "version": "0.2.0", "configurations": [ { "name": "Open Chrome and Debug localhost", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}", "sourceMap": true } ] }说明：
- type: "chrome" 表示使用 Chrome 调试器
- url 是你的应用运行地址
- webRoot 指定源码根目录，帮助映射源码
3. 确保服务已启动
VSCode 的调试配置通常只负责打开浏览器并附加调试器，不会自动启动开发服务器。你可以：
- 手动先运行 npm run dev 或对应启动命令
- 或使用 compound 合并启动，同时启动服务和浏览器
示例：合并启动服务和浏览器
Angel工作室企业网站管理系统全DIV+CSS模板，中英文显示，防注入sql关键字过滤，多浏览器适应，完美兼容IE6-IE8,火狐，谷歌等符合标准的浏览器，模板样式集中在一个CSS样式中，内容与样式完全分离，方便网站设计人员开发模板与管理。系统较为安全，以设计防注入，敏感字符屏蔽。新闻，产品，单页独立关键字设计，提高搜索引擎收录。内置IIS测试，双击打启动预览网站 Angel工作室企业网站
注意：这种方式要求你的服务器支持远程调试（如启动时加上 --inspect 标志），且 Chrome 以远程调试模式启动（需外部命令启动 Chrome 并监听 9222 端口）。
4. 使用现代框架的集成调试（推荐）
对于使用 Vite、React、Next.js 等框架的项目，可直接利用官方调试配置。
例如，在 launch.json 中使用：
{ "type": "pwa-chrome", "request": "launch", "name": "Debug in Chrome", "url": "http://localhost:5173", "webRoot": "${workspaceFolder}" }pwa-chrome 是新版 VSCode 推荐的调试类型，兼容性更好。
基本上就这些。配置好后，点击 VSCode 调试面板的“运行”按钮，浏览器就会自动打开并连接调试器。确保项目服务已在运行，或通过 compound 配置自动化启动流程。不复杂但容易忽略细节。
