Introduction

• In this blog, we are going to learn how to debug JavaScript Libraries and Framework like React, Angular, Vue, Svelte, Ember, Express and so on in Visual Studio Code (VS Code).

What is Debugging?

• Debugging is the process of examining the program, finding the error and fixing it.
• Debugging helps developer to find out the errors in application and improves the understanding of code flow.

Debugging Methods

• There are 3 methods to debug our code to find the errors,
• console.log()
• debugger keyword
• debug by breakpoints in developer tool or IDE (Integrated Development Environment).
• You can get references in internet for debugging these 3 methods, but in VS Code it does not exist with clear ideas.

Debugging in VS Code

• Here, I am using ReactJs to debug in VS Code.
• Create react application by the command,

Using Npm – npx create-react-app appName.

Using yarn – yarn add create-react-app.

• Navigate to directory -  cd directoryName and then code .
• Start development server – npm start or yarn run.The server starts in https://localhost:3000
• Click Debugger Icon ‘Run and Debug’ from left Pan of VS Code.

• Select Web App (Chrome) or your favorite browser. Here, am going with Google Chrome Browser.

• VS Code will create ‘Launch.json’ in .vscode folder.

• In launch.json, under ‘Configuration’ key change URL https://localhost:8080 to your framework or library localhost portal URL.
• For example, here I am using React and I will give local host port number as 3000 and save.

“url”: “https://localhost:3000”,

• Setup for Debugger in ReactJs is done. Now, click Run and Debug (make sure that your browser configuration is selected).
• Now, you can set breakpoints on any area. I am creating breakpoint on Form Submit Event Method.
• In localhost:3000 my application is  running, testing name is given to the input field.

• Now, click submit it will hit the breakpoint in our VS Code.

• Now you can easily debug your JavaScript code in VS Code.

Conclusion

• In this blog, we learnt about how to debug JavaScript framework and libraries code in VS Code.
• In next post, we will start a new journey of Angular Redux State Management (NgRx).