As a developer, finding and fixing errors in your code can be extremely difficult at times. The tool that makes resolving errors so much easier is the Chrome Developer Tools (also referred to as Chrome DevTools).
Chrome DevTools is a comprehensive developer toolkit with various web authoring and debugging tools. It is built directly into the Chrome browser and gives developers a deeper understanding of their applications.
Debugging is the process of finding and resolving bugs within software programs. In programming and software development, the word "bug" is synonymous with "error." A bug refers to the defects or errors that cause computer software (or programs) to produce incorrect or unexpected results.
Let us look at some errors you are likely encounter in your program.
consol.log('your result')would cause a syntax error because
- Semantic (logical) error: This causes a program to compile and run correctly. However, it will not produce the desired or expected output.
- Runtime error: Here, a program is syntactically sound but has an error that can only be discovered during its execution.
The debugging process is vital in software development and often takes just as much time as writing code.
Chrome Developer Tools is a set of web developer tools built directly into the Google Chrome browser. It helps developers edit web pages and identify and resolve errors, enabling them to build sites and applications much faster and efficiently.
The interface of Chrome DevTools has about nine panels.
Here is a summary of what each panel does:
- Elements: Modify DOM elements in real-time and observe the effects of your changes on the page.
- Console: Provides information about the interactive elements on a web page.
- Network: Displays all the resources or files loaded on a site.
- Performance: Analyses the speed and optimization of web applications.
- Memory: Provides information about how a page uses memory.
- Application: Displays content from your browser's storage. e.g. localStorage, sessionStorage, cookies, IndexDB, etc.
- Security: Provides basic security-related information, allowing you to view a site's HTTPS certificate and TLS status.
- Lighthouse: Audit applications' quality, performance, accessibility, and SEO.
To get started with the Sources panel and all its components, let's first look at how to open Chrome DevTools in your browser.
Here are some ways you can open the Chrome DevTools in your browser.
- Using keyboard shortcuts:
- Command + Opt + I (macOs)
- Control + Shift + I (Windows or Linux)
- Right-click anywhere on the browser page and click the "Inspect" option.
- Using the Chrome main menu:
- Click the Chrome menu button
- Select More Tools
- Select Developer Tools
Here’s what you’ll see when you open Chrome Developer Tools:
By default, the Chrome DevTools opens to the Elements panel.
Open the Sources panel for the sample demo page we'll be using for this tutorial by following the intstructions below.
- Open the example page in Chrome.
- Open Chrome developer tools.
- Select the Sources tab.
Here's what you would see if you opened the Sources panel for the first time:
Click the toggler button and select the
main.js file in the tree view. Here’s what would show up:
As can be seen, the Sources panel has three parts:
- Code Editor : Click on a file in the file navigator pane to view or edit its contents in the code editor.
However, there are some bugs on this page that you will fix if you follow this tutorial.
The simplest way to resolve the bug on the sample demo page is to insert the
console.log() function in your code to inspect variable values simultaneously.
This method is one of the most common among developers. Often, it’s enough, but sometimes you don’t get enough insights or the expected results needed to debug an error.
console.log() function can be a good option for resolving bugs, Chrome DevTools does a more effective job.
Therefore, rather than using the
console.log() function to determine where your code is going wrong, you should consider using the Chrome DevTools instead.
Now that we have had a quick overview of Chrome DevTools, let's discuss some useful debugging strategies to help debug the code for the example demo page.
The general idea here is to set a breakpoint, an intentional stopping place in your code, and then step through your code's execution, one line at a time.
Reproducing the bug is the first step to debugging. "Reproduce the bug" means finding a series of actions that consistently cause the bug to appear.
Follow along with the instructions below to reproduce the bug that you’re going to fix:
- Open sample demo page in a new tab.
- One the page, enter 23 for the first input field.
- Enter 4 for the other input field.
- Click "Add Numbers" button.
Whoops! Looking at the results printed below the button. It says 23 + 4 = 234, which is wrong. The result should rather be 27. This is the bug that you're going to fix.
A breakpoint is an intentional stopping point in your code's execution. It is the point in a program's execution where the developer wishes to pause the program and inspect the contents of variables and other properties.
On the demo page, it is evident that the sum of the two numbers becomes incorrect after clicking the “Add numbers” button. Therefore, you need to check to see if the program is adding the correct values.
To do this, you must set a breakpoint just before the program adds the two numbers. Doing this will help to analyze the values of all defined variables up to the breakpoint.
There are many types of breakpoints you can set in your code. Let's take a look at some of them:
|Type of Breakpoint||Use This When You Want to Pause...|
|Line-of-code||on an exact point in your code.|
|Conditional||on an exact point in your code but only when a defined condition evaluates to true.|
|DOM||at point in a code block that modifies a specific DOM node.|
|Event Listener||at a piont in a code block that runs after an event is fired.|
|Function||Whenever a function is called.|
Here, we are going to set a line-of-code breakpoint. To do this:
- Open Chrome DevTools and go to the Sources panel
- Navigate to the file navigator pane and select
main.jsto open its content in the code editor.
- Within the code editor, click at line number 21, right on the number digit, not on the code.
It should look like this:
After setting the breakpoint, the easiest way to activate the debugger is to fill in the input fields on the demo page and click the "Add numbers" button. DevTools will pause the execution and highlight the 21st line (where the breakpoint was set).
Congratulations! You've set a breakpoint.
Executing scripts in the wrong order is a common source of bugs. Stepping through your code allows you to walk through the code one line at a time to find out where the bug occurred.
Let's get started:
- Resume: With this button, DevTools executes your script until the next breakpoint. And if there are no more breakpoints, the debugger loses control of the program.
- Step over next function call: Allows debugger to execute the next code block. However, if the code block involves a function call, the debugger "steps over" (skips) it.
- Step into next function call: Causes debugger to execute the next function to further analyse it. If there is a function call, it goes into it and you can see how the function is executes line by line till it returns.
- Step out of current function: If you step into a function but don't want to see how the rest of the function executes, you can skip it with this button.
That’s the basic idea behind stepping through your code. If you look at the code in
main.js, it is evident that the bug is probably somewhere in the
onClick() function (where the two numbers are added).
When debugging a large codebase, a lot of code may not be related to the problem you're debugging.
You could "step" through all the lines, but that can be tedious. You could also set a line-of-code breakpoint on the line you're interested in and then press "Resume Script Execution," but there's a faster way.
Right-click the line of code you're interested in, and then select "Continue to here." DevTools will run all the code up to that point and then pause on that line.
Chrome DevTool provides tools that help you analyze the state of your code and variable values on any line as you step through it.
Watch: Using the Watch window, you can specify a variable (or expression) you want to monitor. You can add the expression or variable by clicking the plus sign +.
Call Stack: The Call Stack window displays a set of functions and methods invoked during your code's execution.
Scope: Use the scope window to view and edit values of properties and variables in the clossure, local and global scope.
By "watching" the variables
secondNumber, we can see that their values look suspicious. They're wrapped in quotes, which means that they're string values. To confirm this, let's watch the data type of these variables by adding the following expressions to the watch list:
It is now confirmed that the values of the variables are strings, which is probably the cause of the bug.
After finding the cause of the bug, all that's left is to try to fix it. You can do this by editing your code and re-running the demo.
- If you are in debugging mode, click the Resume script execution button to exit.
- Now, in the Code Editor, replace the code on line 21 with
let sum = parseInt(firstNumber) + parseInt(secondNumber).
- Press Command+S (Mac) or Control +S (Windows, Linux) to save your change.
- Click Deactivate breakpoints to ignore any breakpoints you've set.
Now, try out the demo with different values.
The demo now works as expected.
Congrats! You've successfully debugged the code for the sample demo page using Chrome DevTools. There's so much you can do with Chrome DevTools. It is a powerful tool, and taking the time to master it will make you a more efficient debugger.
I encourage you to experiment with DevTools using your own applications. Get used to stepping through your code and analyzing the state of variables and properties at each point.
Thanks for reading. I hope this has been a worthwhile read. Kindly share this article and follow me on Twitter @dboatengx for updates on future posts.
💡 Want to learn more?