如何退出Visual Studio Code调试器时不关闭Chrome窗口

当然有办法解决这个问题！默认情况下，VS Code的Chrome调试器会接管Chrome进程，所以当你停止调试时，它会直接终止Chrome窗口。下面是两种最实用的解决方法：

方法一：切换到「Attach（附加）」模式调试（推荐） #

这种方法让你手动控制Chrome窗口的生命周期，调试器只是临时连接到已打开的Chrome实例，停止调试不会影响窗口：

1. 手动启动带调试端口的Chrome

   • Windows：右键点击Chrome快捷方式，在「目标」末尾加上 --remote-debugging-port=9222（注意前面有空格），然后启动Chrome；或者在命令提示符里运行：chrome.exe --remote-debugging-port=9222
   • Mac：打开终端，运行：/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
   • Linux：终端运行：google-chrome --remote-debugging-port=9222

2. 配置VS Code的Attach调试项

   • 打开VS Code调试面板（快捷键 Ctrl+Shift+D），点击右上角的齿轮图标打开 launch.json 文件
   • 替换或添加以下配置：

     {
       "version": "0.2.0",
       "configurations": [
         {
           "type": "chrome",
           "request": "attach",
           "name": "Attach to Chrome",
           "port": 9222,
           "url": "http://localhost:5500/*",
           "webRoot": "${workspaceFolder}"
         }
       ]
     }
     

3. 开始调试

   • 手动在Chrome中打开 http://localhost:5500
   • 在VS Code调试面板选择「Attach to Chrome」，点击启动按钮
   • 调试完成后，点击调试工具栏的「断开连接」图标（不是红色停止按钮），Chrome窗口会继续保持打开，下次调试直接重新附加即可。

方法二：调整Launch模式的调试行为 #

如果你习惯用默认的Launch模式启动调试，也可以通过修改配置让Chrome在调试结束后保留：

1. 打开 launch.json，找到你的Chrome Launch配置，添加 runtimeArgs 参数，让Chrome使用独立的用户数据目录（避免和日常使用的Chrome冲突）：

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "chrome",
         "request": "launch",
         "name": "Launch Chrome",
         "url": "http://localhost:5500",
         "webRoot": "${workspaceFolder}",
         "runtimeArgs": ["--user-data-dir=${workspaceFolder}/.chrome-debug-profile"]
       }
     ]
   }
   

2. 调试结束时，不要点击红色的「停止」按钮，而是点击调试工具栏的「断开连接」图标——这样调试器会和Chrome解除关联，但Chrome窗口会继续运行。

需要注意：如果点击了「停止」按钮，Chrome还是会被关闭，所以核心是用「断开连接」代替「停止」来结束调试会话。

内容的提问来源于stack exchange，提问作者FuzzyLogic12