run vscode chrome debugger with its extensions

Question

Is there any way we can launch the chrome window with all the extensions installed on chrome?

{
    "version": "0.2.0",
    "configurations": [{
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://site.example.com/",
        "webRoot": "${workspaceFolder}"
    }]
}

Answer 1

While setting the userDataDir property in the launch config to false will allow you to launch Chrome using your user profile, I would highly suggest not going that route. You should want to keep your debugging environment sandboxed and separated from your personal profile. You also probably shouldn't want to enable remote debugging in your regular browsing sessions as well unnecessarily.

By default, Chrome debugger will create a new profile for your debugging session and will persist til you restart your computer. The trick here is to create a profile just for your workspace. You could then configure this profile to have whatever extensions and other settings that you need. We just need to make it persist permanently so we don't have to reconfigure it again.

Instead, set the userDataDir property to a path in your .vscode directory (and ignore in your source control). It will create the profile in that directory you set. I use:

${workspaceFolder}/.vscode/vscode-chrome-debug-userdatadir

Then when you run the debugger, it will create a profile in that directory that should persist indefinitely. You could then install all the extensions you want, all without muddying up your personal profile.

If you want a central debugging workspace to be used for multiple projects, you could put it in your home folder rather than your project workspace.

${env:HOME}/.vscode/vscode-chrome-debug-userdatadir

Answer 2

One way is to prevent the debugger from starting a chrome instance with a seperate profile.

Just add "userDataDir": false within "configurations" to your launch.json. Close all Chrome instances, than start debugging from Visual Studio Code.

Your previous chrome session should open including a new Tab serving your files.

Afterwards you can start/stop debugging without closing and reopening chrome.

Source: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome