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.
- There are 3 methods to debug our code to find the errors,
- 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 -
Start development server –
npm start or yarn run
.The server starts inhttps://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
in .vscode folder.
In launch.json, under ‘Configuration’ key change URL
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.
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.
- In next post, we will start a new journey of Angular Redux State Management (NgRx).
August 16, 2023