As a JavaScript developer, you probably when you are debugging your application, you are using the browser's developer tools and tons of console.log. But what if you want to debug your application in VS Code? In this article, I will show you how to debug React application with VS Code pretty easily.

On the right bar of VS Code, you can see the Debug tab. Click on it and then click on the green play button. You will see a dropdown menu with a list of configurations. Select the one you want to use. In my case, I will select the Launch Chrome against localhost configuration.

Now, you can see a new tab in the Debug view. Click on the play button to start debugging your application.

By checking the Debug Console tab, you can see the logs of your application. You can also set breakpoints in your code to stop the execution of your application at a specific line.

Fancy trick

VS code offers a really nice debugging experience. You can right a breakpoint and among the options, you can see Edit breakpoint. Click on it and you will see a new tab in the Debug view. You can add a condition to your breakpoint. For example, you can add a condition to stop the execution of your application when a specific variable is equal to a specific value.

Copied!
myVar === 'myValue'; // normal JavaScript condition