"If debugging is the process of removing software bugs, then programming must be the process of putting them in."
Debugging in the process done by developers to find and fix errors of their code, all modern browsers support debugging tools. The debugging tool is a special UI in browser developer tools that makes debugging much easier and makes it easy to trace the code step by step.
Here we will use Chrome because of its features, most other browsers have a similar process.
The Sources Panel
Let’s start by creating two files index.html and greet.js and make sure to put them in the same folder.
// index.html
<!DOCTYPE HTML>
<html>
<body>
<script src="greet.js"></script>
An example for debugging with Chrome.
<script>
hello("Chrome");
</script>
</body>
</html>
// greet.js
function hello(name) {
let phrase = `Hello, ${name}!`;
say(phrase);
}
function say(phrase) {
alert(`** ${phrase} **`);
}
Â
- Open the index.html file in Chrome.
- Open developer tools with F12 or (ctrl + shift + i)
- Select the sources panel.
By now you should be able to see this:
Now let’s click on greet.js.
As we can see, the Sources panel has 3 parts:
1. File navigator where all files are listed, which are generally html, css, JavaScript, images.
2. Code editor which shows the source code.
3. JavaScript debugging pane and we are going to go through it soon.
Console
Let’s move to the console by clicking on it.
Here we can type commands and execute them immediately when we press on Enter. After a statement is executed, the result is shown.
Breakpoints
A breakpoint is a point chosen by the developer, where the debugger will stop the execution of the JavaScript code.
Let’s go back to the Sources panel and in the code editor click on line 4 and line 8, you will see that line numbers are highlighted with blue; which means you successfully created two breakpoints.
When the code is paused, we can see the content of some variables at a specific moment, execute commands in the console. In the right panel, we have the list of our breakpoints. We can use it to go to anyone we want.
You can also create a breakpoint that will trigger based on a condition by doing a right click on the line number then we choose add conditional breakpoint and after that we enter the breakpoint condition, let’s create one!
We created a breakpoint that will be triggered when there is no name passed to hello function. let’s do a simple change in index.html and make hello have an empty string as parameter  hello("")
The breakpoint is triggered because our condition is satisfied, and we can check that clearly when we look at the variables content.
Debugger command
Another technique to stop our code execution is to use the debugger command inside our code, just like this:
function hello(name) {
let phrase = `Hello, ${name}!`;
debugger;
say(phrase);
}Debugging pane
- Watch – shows current values for any expressions.
- Call Stack – shows the nested calls chain.
- Scope – shows current variables and their values.
As we can see, there are three main ways to pause a script:
- A breakpoint.
- The debugger statements.
When paused, we can debug, examine variables and trace the code to see where the execution goes wrong.
There are many options in developer tools that you can know about them here: https://developers.google.com/web/tools/chrome-devtools.
