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}"
    },
  ]
}

💡 Tip: You can generate the same code by pressing the "Add configuration" button in VSCode bottom right corner.

After clicking the button, you will see a context menu where you should choose Chrome launch.

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

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 🥳