Debug React with VSCode

Published by

on

Found a real good article on how to setup your Visual Studio Code Editor to debug React JS App.

On a high level here is what needs to be done:

1. Install the Debugger for Chrome extension.

debugger-for-chrome

2. Configure the Chrome Debugger

Create a launch.json file in a new .vscode folder in your project which includes a configuration to launch the website.

Your launch.json should look like this:

{
    "version": "0.2.0", "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

3. Ensure that your development server is running (“npm start”).

4. Put a break point in your code as needed and hit “F5” to start debugging.

A more detailed tutorial is available here