DEV Community

Cover image for React debugging in VSCode
Gleb Krishin
Gleb Krishin

Posted on

React debugging in VSCode

Welcome to the second article about debugging if you're struggling with debugging, you're in the right place πŸ˜‰

πŸ“š Minute of theory.

There are 2 basic types of debugging:

  • Attach (means you're attaching to an already running process)
  • Launch - means you're launching a new process and attaching to it. It can be a headless chrome or anything else)

After some basic understanding, let's jump to the actual configuration.

1) Add a configuration object inside your array of configurations in .vscode/launch.json in the project's root.

{
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:8080", // localhost where we will launch our front-end
      "webRoot": "${workspaceFolder}"
    },
  ]
}
Enter fullscreen mode Exit fullscreen mode

πŸ’‘ Tip: You can generate the same code by pressing the "Add configuration" button in VSCode bottom right corner.
Add configuration button
After clicking the button, you will see a context menu where you should choose Chrome launch.
Configuration context menu
And here we go! You will get the same config as in step #1 😎

2) After that, choose in the left top corner your option to launch the configuration inside the Run and debug menu in VSCode
Debugging launch context menu

3) As a result, you will see the lifted application on a specified port!

See you in the following article about controllers in a VSCode debugger πŸ₯³

Top comments (0)