![react visual studio code tutorial react visual studio code tutorial](https://www.tutorialfunda.com/wp-content/uploads/2021/07/image-1-300x76.png)
Now you can hit the play button ▶️ to start a Chrome browser in debug mode. if your code is in the src folder like create-react-app apps you change $/src) adjust the url field (here I change the port to 3000).
![react visual studio code tutorial react visual studio code tutorial](https://www.tutorialfunda.com/wp-content/uploads/2021/07/image-4.png)
You let VS Code create a launch.json config for you and slightly adjust it. Starting to debug your React app with the VS Code debugger is surprisingly simple. Click here to get the source code for this tutorial Alternatively, you can find a detailed step-by-step tutorial with screenshots on this page.
#REACT VISUAL STUDIO CODE TUTORIAL HOW TO#
Here’s a short video showing how to set up and use the VS Code debugger. All of this paired with a structured debugging approach and the bug is fixed in no time. We’ll debug a small problem with a Next.js application and use (conditional) breakpoints, step into functions, and inspect and edit variables directly from the VS Code. On this page, you can see how to set up VS Code as a debugger for your React app and see it in action. The result: Super easy setup and a more productive debugging workflow. Turns out much beloved VS Code makes it very simple to debug a React app directly from the IDE. Or a more advanced version: Jumping around between setting breakpoints in the Chrome dev tools and editing code in your IDE until the bug is fixed.īut with the right tools and a strategic approach debugging can become much easier. Adding a console.log() statement here and there until you’re finally in the right spot. Debugging a React app can be a slow and painful process.