VS Code调试Chrome：如何在现有实例打开新标签而非新实例？

Hey there! I’ve run into this exact issue before—here’s how you can get VS Code to attach to your already running Chrome instance instead of spawning a new one, especially with your VS Code 1.21.1 setup.

Step 1: Launch Chrome with Remote Debugging Enabled #

The key missing piece here is that Chrome needs to be started with remote debugging turned on. Here’s how to do it for your OS:

• Windows: Close all Chrome windows first, then open Command Prompt and run:

  "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
  

• Mac: Close all Chrome instances, open Terminal and run:

  /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
  

• Linux: Close all Chrome windows, open Terminal and run:

  google-chrome --remote-debugging-port=9222
  

Important: Make sure no Chrome processes are running in the background—if any are, kill them first, otherwise the remote debugging port won’t activate properly.

Step 2: Update Your launch.json Configuration #

Your existing attach config was close, but we need to add the port parameter and loosen the url match to cover your local site. Replace your config with this:

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

Let’s break this down:

• port: Matches the remote debugging port we set when launching Chrome (9222 is the standard, but you can use another if needed).
• url: The * wildcard ensures VS Code can attach to any page under http://localhost:3000, not just the exact root URL.
• webRoot: Points VS Code to your project folder so it can map Chrome’s loaded files to your local code.

Step 3: Start Debugging #

1. With Chrome running (launched via the remote debugging command), open http://localhost:3000 in a new tab.
2. In VS Code, go to the Run and Debug panel, select the "Attach to Chrome" configuration, and click the play button.

This should now attach VS Code to your existing Chrome instance, using the current tab instead of opening a new window.

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