How do I properly setup VS Code to debug in chrome, using an existing logged in Chrome user profile?

Question

I have a React application that I'm writing in VS Code. In order to test and debug my work, I go to the the terminal and enter npm start. This starts the application server and it properly launches chrome under the current logged in user, which has the React Devtools extension installed.

However, I'm also using the Debugger with Chrome extension in VS Code. In order to use those debugger tools, once the application has been started by npm, I need to hit F5 and this launches a new browser window for Chrome. Under this mode, my breakpoints are being hit in VS code, and I can inspect as I need too.

However, the difference is that when I hit F5, VS Code opens a new browser Window that looks like a newly installed instance of Chrome. Since I use Chrome in multiple VMs and architectures, I've setup my Google account so that as I login into my profile on each machine in Chrome, all necessary bookmarks and extensions are loaded into that instance of Chrome.

F5 debugging isn't showing that user profile information, even though a regular launch of Chrome is showing those details, as is the initial launch of the browser when I run npm start. Is there a way to alter my VS Code configurations so that when debugging in VC Code with the Debugger for Chrome extension, I can access my Chrome profile with all my desired extensions and tools?

Also, here's my launch.json file. I think this is used by the debugger.

{
    // 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}",
        }
    ]
}

I think these are defaults and I think, maybe, this is what NPM is using rather than whatever is launching the debugger & browser with F5.

Answer 1

Add "userDataDir": false to your launch config, like this:

{
    // 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}",
            "userDataDir": false
        }
    ]
}

BUT you must first quit all running instances of Chrome, because it's not possible to put a running Chrome user profile into debug mode. This is why the extension creates a new user profile by default.