How To Set-up Visual Studio Code To Do Inline React Debuggin

In this tutorial, you will learn how to set-up Visual Studio code to debug your react APP.  First, in the extension manager, download the debugger for chrome:

Next, open the terminal.  You can open the terminal using (⇧ +`).  Navigate to the directory of your react app, then open the debug tab in Chrome (⇧⌘D) and click on the gear button to create a launch.json debugger configuration file. 

 

From here you'll see a config file. The main thing you need to do it, ensure the URL matches the start URL you have specified in your APP:

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

Next, place some breakpoints in your code, by clicking to the numbers in the editor:

Ensure your build is running, using whatever NPM or yarn command you've set-up for your project, then open your page in chrome and watch the magic happen.  You should now be able to step through your source code (F10) and figure out what's going wrong.

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top