CODEWITHSUNDEEP
google-chromevisual-studio-codevscode-debugger
Casey L
Casey L

Reputation: 707

VS Code + Debugger for Chrome: open tab in existing Chrome instance, instead of new window?

I am using the Debugger for Chrome VS Code extension. I am working on a React project using yarn start, which opens at localhost:3000.

I have an already running instance of Chrome where I am logged in using my Google account. However when I hit "Launch Chrome against localhost", the tab opens in a new instance of Chrome where I am not logged in.

enter image description here

How do I force the tab to open in my already-running instance of Chrome instead?

launch.json:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
    ]
}

Upvotes: 22

Views: 6970

Answers (2)

XML
XML

Reputation: 19498

The FreeCodeCamp guide cited below has the beginnings of the solution, but is outdated and incomplete.

As of 2023, you need to:

  1. Click the 'Add Configuration' button in VSCode, and create a new one for "Chrome: Attach". The new config in launch.json should now have a request param in VSCode's to be "attach" instead of "launch".
  2. Quit/kill ALL running Chrome instances.
  3. Run the special command to re-open Chrome (including all your existing tabs and other identity) with remote debug enabled, on a particular port. On MacOS, the command is: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
  4. In VSCode, go back to the Run and Debug panel, and click on the menu at top to change from the launch-based config you had before, to the new attach-based config.
  5. Now, click the green 'Start Debugging' button, and you should see the Debug Console open up in the bottom Panel, and populate with the console output

See the VSCode docs on this for more detail, and commands for other platforms. And, make sure that the port param in launch.json matches the port number in the command you use to re-launch Chrome.

Upvotes: 5

Nurul
Nurul

Reputation: 51

The following guide was helpful, basically you want to use "request": "attach" not "request": "launch".

https://www.freecodecamp.org/news/how-to-set-up-the-debugger-for-chrome-extension-in-visual-studio-code-c0b3e5937c01/

Upvotes: 4

Related Questions