如何在VSCode中调试Flutter Web时复用已有浏览器新标签页？

要让VSCode调试Flutter Web时在已打开的Chrome新标签页启动，而非新开浏览器实例，按以下步骤操作：

1. 以远程调试模式启动Chrome #

先关闭所有Chrome窗口，再用以下方式启动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. 修改VSCode的启动配置 #

将原launch配置修改为以下内容，核心是添加--chrome-debug-port=9222参数，让Flutter连接到已启动的远程调试Chrome实例：

{
    "name": "Flutter Web Project",
    "type": "dart",
    "request": "launch",
    "program": "lib/main.dart",
    "args": [
        "-d",
        "chrome",
        "--chrome-debug-port=9222",
        "--web-port=8080" // 可选，指定应用运行端口，避免冲突
    ]
}

关于attach模式失败的说明 #

attach模式需要先手动启动Flutter Web应用（比如运行flutter run -d chrome），再附加到对应调试端口，并不适配「一键启动调试到新标签页」的需求。而上面的launch模式配置直接复用已打开的Chrome实例，更符合你的场景。

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