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}"
}]
}
To debug any project in either Chrome or Microsoft Edge, all you need to do is to start a session by pressing F5 or activating the debug icon in the menu bar and selecting “Run and debug”. Alternatively, you can also use the Visual Studio Code command palette and run the “Debug: Open Link” command.
There is an easy way to access your extension code in DevTool and debug it. Open the DevTool (e.g. F12) , click on "Sources" tab then look for "Content Scripts" menu next to Page , Filesystem, Overrides etc. and click on it .
To bring up the Run and Debug view, select the Run and Debug icon in the Activity Bar on the side of VS Code. You can also use the keyboard shortcut Ctrl+Shift+D. The Run and Debug view displays all information related to running and debugging and has a top bar with debugging commands and configuration settings.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With