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

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.


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

Tags:

Visual Studio Code

Recent Posts