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

user_2102478 0
Viewed 4787

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

visual-studio-code
3 Answers

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
user_10270

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.

user_12758480

Summary

We are going to run Chrome with a debug flag and then attach VScode debugger into it.

Steps

  1. Add the following to the 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)

  1. Add a launch configuration to the launch.json file:
{
   "type": "chrome",
   "request": "attach",
   "name": "Attach",
   "port": 9222
}
  1. Run the development server by running npm start in the terminal.

Caveats

Note that this solution points to a Chrome installation on a MacOS. For other OS modify the location of chrome in step 1.

user_51317340
Related