run vscode chrome debugger with its extensions run vscode chrome debugger with its extensions google-chrome google-chrome

run vscode chrome debugger with its extensions


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.


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