1

I am learning REACT and would like to know how to setup line by line debugger for my code for debugging. I have been doing backend development using ASP.net and recently started learning REACT with a project started by another developer. Unfortunately, I am having issues setting up line by line debugging capability in VS code for REACT. I followed the tutorial here but it does not stop at breakpoints I setup.

Following is the code where I set up breakpoints (This is part of apps.ts) - Breakpoints are the circles to the left. enter image description here

This is my Launch.json file :

enter image description here

Could you please please help me to get this set up right? I need line by line debugging to fully understand the flow of REACT since this is new to me.

What else is missing here to enable line by line debugging?

Thanks, PG

2
  • The code you added is not React! Commented Nov 29, 2020 at 19:06
  • Yes, it's NodeJS backend :) Commented Nov 29, 2020 at 19:08

2 Answers 2

2

This is my working Launch script. This enabled debugging my code line by line with breakpoints. Also, this is with Edge chromium-browser. (Latest VS code editor)

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch localhost in Microsoft Edge",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:3000/api",
            "webRoot": "${workspaceFolder}/ABC-MVP/backend/src",
            "sourceMapPathOverrides": {
                "webpack:///*": "*",
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///./~/*": "${webRoot}/node_modules/*"
            }
        },
        {
            "name": "Launch index.html in Microsoft Edge",
            "type": "edge",
            "request": "launch",
            "port": 3000,
            "file": "${workspaceFolder}/index.html"
        },
        {
            "type": "node",
            "name": "Debug CRA Tests",
            "request": "launch",
            "args": [
              "app.ts",
              "--runInBand",
              "--no-cache",
              "--env=jsdom"
            ],
            "cwd": "${workspaceFolder}",
            "console": "internalConsole",
            //"console": "integratedTerminal",
            "internalConsoleOptions": "openOnSessionStart",
            "disableOptimisticBPs": true,
            "runtimeExecutable":
              "${workspaceFolder}/ABC-MVP/backend/node_modules/.bin/react-scripts",
              //"${workspaceFolder}/ABC-MVP/backend/src/models",
              "protocol": "inspector"
          }
    ]
} 
Sign up to request clarification or add additional context in comments.

1 Comment

I had to replace edge with msedge
1

I think your Launch.json is OKay. The only thing that differs from ASP.Net is that, your first have to start your app with npm start or yarn start and then hit Debugger to launch the debugger. circle's show that your App is not currently running that's why they won't be hit. And Yes the most IMP thing is, your current code is not React Front-end. It's NodeJS Backend, so follow this guide to debug that code.

1 Comment

I managed to get it working and the launch script is in my answere.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.