Instructions to directly debug ReactJS applications in VScode

Instructions to directly debug ReactJS applications in VScode

1. Introduction

Visual studio code is a popular coding application today for programmers developed by Microsoft. Microsoft has been very famous for its Visual Studio programming IDE. For those of you who program ASP.Net or C# with Winform or WPF applications, you are familiar with this IDE and you are also familiar with the heaviness of this application. For a student computer with 4GB of RAM, it is difficult to carry this application.

• For Visual studio code, it’s a different story. Developers can install the extensions they need without having to install a heavyweight application like Visual studio. This is the advantage and disadvantage of VScode. For VisualStudio I can debug easily with 1 nice red Break point here but when programming ReactJS application in VScode, I was not able to easily debug my ReactJS application directly but had to go through console .log() on the browser. This is so annoying for ReactJS states that it’s hard to track the flow of running code
• Here I will guide you to Debug directly ReactJS application in VScode. Forget about console.log() guys. I’m sorry

2. Download a ReactJS application and use the Editor VScode

• Step 1. Create a ReactJS application using the following command on Terminal
  npx create-react-app my-app
  
• When successfully downloading the ReactJS application, navigate to the my-app directory with the command cd my-app and run the myapp application with the command npm start
  
• You will see the default ReactJS application as follows
• Open a ReactJS application running with VScode using the code .
• You will see the following code in the App.js file: That’s it, the first step is to install a ReactJS application.

3. Set up ReactJS app debugging in VScode

• Step 1. Click on the Debug icon on the left and click the Run and Debug button
• Step 2. Click Web App Chrome to create the config . file VScode will create a launch.json file in the .vscode directory Please change the config file as follows:

That’s it, the setup is done.

4. Perform ReactJS debugging directly on VScode

• In the App.js file I write the following example to check the value of the variable named debug.
• Left click on the line you want to debug on Vscode Click and Run and debug button or press F5 . key Your ReactJS application has stopped where you set the break point and you can see the value of that variable on mouse hover. In the example above the variable has a value of 1. You press F10 to continue the program. This shortcut will be the same as on Visual Studio.

5. Conclusion

So I have guided you to debug ReactJS applications directly in VScode. Hope it will help you find the bugs as quickly as possible. See you in the next articles. See you!