To become a programmer, we have to learn coding and additional subjects. To become a good programmer, we need to know many different things, debugging is also something that a good programmer must be proficient in.
Before studying in university, I didn’t know about it, so when I went to work, I had a lot of difficulties, so I wrote this article to share about debugging, hoping to help you more on the path of programming.
1. What is debugging?
Debug is a debugging tool that every programming language must have, when it comes to debugging, people will think of a program that is faulty, and will use this tool to find errors, but that is only partially true. never mind. In addition to its debugging function, it also tells us other things, what those things are, let’s learn about real-life examples.
2. Debug in javascript language
To understand debugging, you need to know four important things: breakpoints, step over, step into, and watch.
2.1 What is Breakpoint?
Breakpoints are breakpoints, regardless of whether you work on javascript or any other language, there are breakpoints, when you debug, you need to put a breakpoint in the source code, where you are suspecting that place. bugs.
Observe the picture above, circled in red (line 8) I have set a breakpoints, when my program runs to line 8, the program will automatically stop and not run again until I act.
2.2 What is step over?
Step over is to move down one line, after where breakpoints are located
Looking at the picture above, we see that the original position has moved down to line 9, and the breakpoints of line 8 previously set will remain the same for the next run.
2.3 What is Step into?
Step into is to move the debug location into the child function, look at the picture above you will see the function getLocalStorage(). Step into will move debugging into this function.
What is 2.4 Watch?
Watch is a place to display the information of the variable, the return value of the function, so that we can see and diagnose the bug, and can come up with a way to solve our bug.
Observing the image above, I can see what the data of the key variable passed to the getLocalStorage(key) function is. And what is the return result of getLocalStorage.
2.5 How to debug in javascript
To debug javascript, I will use google chrome’s developer tool. To open this tool, just press F12, quite simple, then your interface will look like this.
When opening, select the Source tab, where it will contain html, js, css, image files of your project.
2.5.1 Set a breakpoints
To set a breakpoint for debugging, I will left click on the red circled area.
2.5.2 Step over
To move to the next line, press F10, or the button circled in red in the image below.
2.5.3 Step into
To move into the subfunction of getLocalStorage press F11, or click on the button circled in red in the image below.
2.5.4 Watch
To view the data of the ants or return values, highlight the value you want to see and right-click on that value and select “Add selected text to watches”.
Press F8 to jump to the next breakpoints location, if there is no next breakpoints position, the program will continue to run.
The above are the most basic of debugging, maybe you have finished watching this part, but you will still wonder because you can’t imagine what the bug will look like when entering the actual project, how to solve it. If you have such questions, it is obvious, because this article I write at a basic level, approach to debugging only, in the next post I will write more advanced articles, I will set up my own questions. Real life examples of the ones that I have encountered and how to solve them. Then you will understand more about the power of debugging.
This is the end of the article, please read the next article.
[Thủ thuật lập trình – Phần 4] : Advanced debugging skills
If you find it interesting, please like and share to help me, thank you for watching.
