Debugging JavaScript code using JavaScript Debugger in Chrome

Debugging JavaScript code using JavaScript Debugger in Chrome

JavaScript Debugger in Chrome
JavaScript Debugger in Chrome

Introduction to JavaScript Debugging

This tutorial will teach you through the fundamental concepts of – Debugging, Google Chrome DevTools, and finally the detailed steps of debugging javascript code using JavaScript Debugger in Chrome.

Debugging is the process of analyzing code flow against specific defect or bug in software application with the help of debugging tools.

Like C/C++ developers make use of gdb debugger to analyze defects in C/C++ application on Linux platform.

Similarly, Google provides DevTools integrated into the chrome browser for web developers to debug javascript code.

Sometimes fixing a defect in web application becomes a very tedious task for web developers. This is because we are often not aware of the proper debugging tools and techniques. We use console logs that does not help developers to find the exact root cause, and also its time killing the task.

Before we jump into JavaScript Debugger in chrome, Let’s understand basic DevTools.

What is JavaScript Debugger in Chrome?

JavaScript debugger is a Google Chrome Developer Tool for debugging javascript code.

JavaScript debugger in chrome is a browser-based tool which provides special UI embedded into browsers. This is used to debug javascript applications. It allows web developers to control the execution of javascript code to find and fix bugs.

JavaScript Debugger provides a very simple user interface (UI) for programmers to walk through the code workflow, examine the values of local and global variables and modify the variables instantly at run time to observe the results.

Once a javascript code is loaded into a debugger, developers can execute code line by line to watch – the execution results, set breakpoints, and examine values of local and global variables.

The basic function of the debugger is to stop the execution and calls the debugging function.

What does Chrome Debugger do?

Think of traditional ways of debugging javascript code. At that time, web developers often have to write a series of alert(), window.alert(), and console.log statements to analyze a specific bug in the code. Sometimes you may be using console.log() statements to do the same.

This is very time consuming and inefficient method to debug javascript code. The main issue with this method of debugging is that developers have to write a lot of log statements, going back and forth between browser and editor to see the changes if the issue reproduced or not.

Even, in worst cases, we forget to remove log statements in the final code before delivering to the customer.

No Worries!

JavaScript Debugger in Chrome is now used to make developers life easier than it can be ever since they developing web applications.

Applications of Google Chrome Debugger

Google Chrome browser ships with developer tools (known as Chrome DevTools) that has inbuilt debugger to perform multiple tasks in the client browser.

Following some main applications of JavaScript Debugger tool:
1. Editing CSS – You can select an element in the browser, e.g a div, right click on it and select `inspect element`. This opens the dev tools and gives you an option to edit the CSS on the far right.

2. Testing performance – The Chrome Dev Tools has a section called network, in which you can see how long it takes to load your application, especially how long assets take to load. You could also test your application in a bandwidth of your choice (3G, GPRS or EDGE). This is called throttling.

3. Debugging JavaScript – Chrome Dev Tools enables you to debug JavaScript code.

Top 10 Best Online JavaScript Editor for Web Developers

Powerful Features of JavaScript That Every Developer Should Know!!

Steps to Debug JavaScript Code using JavaScript Debugger in Chrome

Follow below simple steps to reproduce, debug, and fix bugs in the javascript code:

Step1. Reproduce the Bug in JavaScript:

Replicating a bug in the process of identifying a series of consistent steps to replicate the scenario.

This is the very first step in debugging a javascript application.

Google Chrome is the best-suited browser for JavaScript developers which comes with inbuilt debugging capabilities.

Suppose, you have a javascript function to calculate salary which has some bugs.

Step2. Open the Chrome Sources Pane

Google Chrome DevTools provides Sources Panel to debug JavaScript applications.

1). Open Chrome Console – Press F12 or (Ctrl + Shift + I)

2). Click on Sources Pane

The Sources Panel has three sections:
1. File Navigator pane which shows each and every file javascript file loaded in the current web application.
2. Code Editor Pane – It shows the contents of the selected JS file.

3. JavaScript Debugging Pane. This section has the main tools to debug javascript code.

Step3: Set Breakpoints in JavaScript Code.

A breakpoint is an important step in debugging which lets you pause the execution of code at a specific point, line number, etc. In simple terms, breakpoints help you analyze the code for bugs.

Step4: Step Into the Code

Stepping into your code helps you to analyze the root cause of the issue/bug. You can examine each and every line of code to find the culprit code.

You can make breakpoints on specific events and line numbers in JS files.

So, its always recommended placing all your JS code into a separate file.

Step5: Examine variable values

While debugging you can also check values of variables to check if expected values (i.e string, integer, etc) are populated into them.

This can be achieved using Scope pane to list values of variables or setting Watch Points.

Step6: Fix and Validate

After you find the root cause of the issues and identified the culprit code line. Modify the code and Re-execute the script.

Also, read Laravel Tutorials

Example – Steps to debug JavaScript code using JavaScript Debugger in Chrome

Let’s take a very simple example of the addition of two numbers. This is the common programming mistake that every programmer has experienced in his coding journey. JavaScript Debugger in Chrome is a very powerful tool for web developers to debug javascript code.

Step1: Replicate the Bug

1. Create a simple HTML + JavaScript program to calculate employee salary. Create an HTML form to input employee HRA and Basic amounts. Then, create a JavaScript function calculate() to add the hra and basic to calculate salary.

2. Open the Demo in browser
3. Enter HRA amounts
4. Enter the Basic amount.
5. Click Calculate to compute employee salary

Lets input 5000 for HRA and 10000 for Basic, so the resultant salary should be 15000. But, the result is 500010000. The result should be 15000.

This is a BUG in JavaScript code as shown below:

Debug JavaScript Code
Debug JavaScript Code

Step2: Open Chrome DevTools and setup for debugging.

1. Open the DevTools console by pressing Ctrl+Shift+I or F12 in Chrome browser.
This opens the Chrome DevTools Console panel. This will open the screen below:

Chrome DevTools JavaScript
Chrome DevTools JavaScript

2. Click the Sources tab
The Sources pane has three UI sections divided into the following:
1. File Navigator – Lists every file in use.
2. Code Editor – It displays the contents of the selected file.
3. JavaScript Debugging – This is the important section using which we are going to debug our program to find bugs.

Step3. Set Breakpoint in JavaScript code

The first steps towards analyzing the code are to set a breakpoint at the beginning of the code.

A breakpoint is a specific line of code where we want to pause the execution of the program. From the breakpoint, we start analyzing the line by line…

So, a breakpoint in code lets you pause the execution of code anywhere between the code and examine the values of variable, expression.

Breakpoints help developers to find and fix the bugs.

JavaScript Debugger in Chrome is a very simple tool for web developers to debug javascript code.

Coming to our issue in the code.

We can guess that there is something wrong in javascript calculate() function which is not adding two numbers correctly. The calculate() function is called in response to a Click event on Button.

So, the culprit code is calculated () functions, so pause the program execution inside that function.

This is achieved through Event Listener Breakpoints.

Set Breakpoint in JavaScript code

Following are steps to set Breakpoint in JavaScript code:

1. In the JavaScript Debugging pane, click Event Listener Breakpoints to expand the section.
DevTools reveals a list of expandable event categories, such as Animation and Clipboard.

2. Next, to the Mouse event category, click Expand Expand icon. DevTools reveals a list of mouse events, such as click and mouse down. Each event has a checkbox next to it.

3. Check the clicked checkbox. DevTools is now set up to automatically pause when any click event listener executes.
Tick the Mouse->Click checkbox…

Set Breakpoint in JavaScript
Set Breakpoint in JavaScript

4. Click on “Calculate Salary” button
Now notice that Chrome DevTools will pause execution and highlight line of code.

The execution is paused on a different line of code, then press “Resume Script Execution” until you’re paused on the correct line.

4. Step Into the JavaScript Code

Stepping into the code is the process of walking through the code to find the root cause of the issue.

Use the below steps to step into javascript code after you set a breakpoint.
1. In the Chrome Sources, click “Step into next function call” to step through the execution of the onClick() function, one line at a time.
DevTools highlights the following line of code:

Step5 – Check Variable Values

For a programmer, its very important to examine whether the variables hold an exact type of data.

Method1. Using the Scope Pane. The scope pane defines which local or global variables are being used and what values they hold.

Method2 – Watch Expressions

Now we have identified that values of hra and basic variables are not integers they are treated as a string. Hence, upon adding they are just concatenating together.

Step6 – Fix and Verify the result.

1. To edit the code click on “Resume script execution”
2. Edit the following code in Code Editor:

salary = parseInt(hra) + parseInt(basic);

Now the issue is fixed.

Finally, remove breakpoint in JavaScript

How to remove breakpoint in javascript?

After we have analyzed the root cause of the issue, fixed and verified. The next step is to deactivate the breakpoint. Click on “Deactivate breakpoints”

Congratulations!

We have learned basics of How to debug javascript code in chrome.

Next Steps

Now you understood the basics of debugging in javascript, Google Chrome DevTools. These tools and debugging steps will save your development time. Then, we learned how to set breakpoints and step into the javascript code.

Further Reading:

JS Basics

JavaScript Debugging Tools

Debugging in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *