Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

run vscode chrome debugger with its extensions

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}"
    }]
}
like image 972
3pepe3 Avatar asked Aug 07 '18 11:08

3pepe3


People also ask

How do I use Chrome debugger extension in VS Code?

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.

How do I use Chrome debugger extension?

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 .

How do you run a debugger in VS Code?

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.


2 Answers

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
like image 88
Jeff Mercado Avatar answered Sep 22 '22 00:09

Jeff Mercado


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

like image 39
Skylark Avatar answered Sep 23 '22 00:09

Skylark