vscode调试器可自动启动:一、配置launch.json的autoAttach=true并添加–inspect;二、用compound组合+preLaunchTask联动多服务;三、安装Debugger for chrome扩展调试前端;四、修改settings.json绑定快捷键触发调试。

如果您在使用 VSCode 进行开发时希望调试器在项目启动时自动运行,而非每次手动点击“开始调试”按钮,则需要正确配置 launch.json 中的自动触发行为。以下是实现该功能的具体方法:
本文运行环境:macBook Pro,macOS Sequoia。
一、启用 launch.json 的 autoAttach 配置
该方式适用于 node.js 环境下通过命令行启动进程时,让 VSCode 自动附加调试器。需确保已启用调试代理并配置对应监听端口。
1、在项目根目录下打开 .vscode/launch.json 文件,或通过 VSCode 菜单栏选择“运行”→“添加配置”生成该文件。
2、在 configurations 数组中添加一个类型为 node 的配置项,并设置 “autoAttach”: true 与 “console”: “integratedTerminal”。
3、确保 package.json 中的启动脚本包含 –inspect 标志,例如:“start”: “node –inspect=9229 index.js”。
4、在终端中执行 npm start 启动服务,VSCode 将在检测到调试端口开启后自动附加调试会话。
二、配置 compound 启动组合并启用 preLaunchTask
该方式适用于多服务协同场景,通过预启动任务触发调试器,并借助 compound 配置实现多个调试会话联动启动。
1、在 .vscode/tasks.json 中定义一个 shell 类型的预启动任务,例如启动本地开发服务器。
2、在 launch.json 的 configuration 中新增一项,设置 “preLaunchTask”: “启动开发服务器”(名称需与 tasks.json 中 label 一致)。
3、在 launch.json 根对象中添加 “compounds” 字段,定义一个组合配置,其中包含前端和后端两个 configuration 的名称。
4、在 VSCode 的“运行”面板中选择该 compound 配置,点击“开始调试”,系统将自动执行预启动任务并同时启动所有关联调试器。
三、使用 Debugger for Chrome 扩展实现浏览器自动调试
该方式适用于前端项目,在代码保存后自动刷新浏览器并进入断点调试状态,依赖 Chrome 浏览器与对应调试扩展协同工作。
1、在 VSCode 扩展市场中安装 Debugger for Chrome 扩展。
2、在 launch.json 中添加 type 为 chrome 的配置项,设置 “url”: “http://localhost:3000” 与 “webRoot”: “${workspaceFolder}”。
3、在 configuration 中加入 “trace”: true 以启用详细日志便于排查连接问题。
4、确保本地已运行 HTTP 服务,然后直接启动该调试配置,Chrome 将被自动拉起并加载目标 URL,同时建立调试通道。
四、修改 settings.json 启用全局调试快捷键绑定
该方式不修改 launch.json,而是通过用户级设置激活快捷键触发调试,适合希望一键启动默认配置的用户。
1、打开 VSCode 设置界面,搜索 debug.autoStart,勾选对应选项(若存在);若无此选项,则需手动编辑。
2、按下 Cmd + Shift + P(Mac)调出命令面板,输入 Preferences: Open Settings (JSON) 并回车。
3、在 settings.json 中添加键值对:“debug.openDebug”: “never” 与 “debug.allowBreakpointsEverywhere”: true。
4、在键盘快捷键设置中将 Debug: Start Debugging 绑定至 F5 或其他自定义快捷键,保存后即可一键触发默认调试配置。