when debugging in vscode in "launch chrome" mode, raises a nice and clean chrome instance, without any extension installed. It is good, but in some cases I need react-dev-tools extension and have to run regular chrome to get this done. Is it any way to have clean debugging chrome, but with dev tools added?
launch configuration is usual:
{ "type": "chrome",
"request": "launch",
"name": "Launch Chrome:3000",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}"
}
Try adding this line to your launch configuration, launch.json:
"runtimeArgs": ["--load-extension=${env:userprofile}/AppData/Local/Google/Chrome/User Data/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/3.2.3_0"]
Some limitations
Sources
~/Library/Application\ Support/Google/Chrome/Default/Extensions
I was able to get the react-devtools tab with following steps.
I know there could be a better way. I think the chrome window opened by VScode must be protected from loading Extensions like in private mode. Answers welcome.
We are going to run Chrome with a debug flag and then attach VScode debugger into it.
package.json start script: "start": "'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome' --remote-debugging-port=9222 & react-scripts start",
Basically what it does it runs the Chrome executable with the --remote-debugging-port=9222 flag. (Note that the & operator launches a background process so the script can proceed to the next command)
launch.json file:{
"type": "chrome",
"request": "attach",
"name": "Attach",
"port": 9222
}
npm start in the terminal.Note that this solution points to a Chrome installation on a MacOS. For other OS modify the location of chrome in step 1.
