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

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x