How to Set up VSCode Remote Debugging with a React App

vscode_react_setup.md

Break and Step-through App in VSCode with Chrome Dev Tools

Sometimes it's nice to be able to step through code directly in VSCode, setting breakpoints and watching variables. Here's tentatively how you can do it with our React app:

1. Install VSCode Extension Debugger for Chrome.

2. Add Configuration to your Launch.json as per below to launch Chrome [Source]

3. Add argument for "runtimeArgs" as per github suggestion here to get your Redux extension running in the VSCode Chrome browser.

*Your launch file should look something like below:

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}",
  "runtimeArgs": ["--load-extension=${env:userprofile}/AppData/Local/Google/Chrome/User Data/Default/Extensions/lmhkpmbekcpmknklioeibfkpmmfibljd/2.17.0_0"]
}

4. Set a breakpoint, press f5 to launch.

If you want to warm reload websites and allow step through debugging with docker you need to set CHOKIDAR_USEPOLLING=true in your environment:
facebook/create-react-app#4143