How to add react dev tools to chrome when debugging in vscode

Question

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}" }

Answer 1

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

1. Installation points to local folder based on ID of Chrome extension (enable developer mode to see it) - "fmkadmapgofadopljbjfkapdkoienihi"
2. Path also points to a specific version (3.2.3_0), which may break on future releases of React dev tools
3. Chrome gives a warning "Disable developer mode extensions" when an extension is loaded locally

Sources

1. VS Code Variables
2. Chrome command line switches

Answer 2

I was able to get the react-devtools tab with following steps.

1. Install the react-devtools extension in the window opened by VScode (Again)
2. Reopen devtools (CMD-ALT-i)
3. Refresh the page.

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.