The Talent500 Blog
effective debugging

Steps for effective debugging of web applications

With the evolution of technology, web applications are becoming complex. Bugs occur all the time. Read on to find out the steps for effective debugging of web applications.

Web applications are at the forefront of business expansion irrespective of the industry. With the evolution of technology, web applications are becoming complex. Bugs occur all the time – when you build the applications, test after completion, and even post-production. On average, a developer creates 70 bugs per 1000 lines of code. Most web developers spend many more hours debugging rather than creating. 

Around 75% of the development time is spent on debugging, but there are some techniques to reduce the pain significantly. 

This article aims at providing some practical recommendations to help you prevent bugs and shorten the time spent on debugging. 

Use Console.log with variable

JavaScript is part of over 90% of web applications, and one of its most commonly used methods is console.log. Developers often use this method with variables to debug. When you run a web application, the values returned by the variables are specified inside the way in the console. This makes it easier to check the returned values to ensure that they are as expected.

However, it is not an effective debugging method because you cannot see the progress of code execution. If you try to see the progress, you have to insert console.log every few lines. You would not want to use console.log so frequently because then the amount of data shown in the console will be unreadable.

To overcome this challenge and more efficiently use the console.log method for debugging, use a string and the following variable like this:

console.log(‘variable’, variable)

By doing so, you will be able to track the progress of the code and easily debug it.

The ‘debugger’

The debugger is a vital JavaScript concept that can make your life easier when debugging the code. The debugger is a JavaScript keyword that halts the execution of a web application such that the developer can interact with the variables, executing code one step at a time.

Developers can use this keyword for explorative debugging, a paradigm used in manual testing. The debugger is handy for large web applications for which console.log is not enough. You can use the debugger directly from Chrome’s Sources tab or Firefox’s Debugger tab.

<h4>Debugging demonstrations using Debugger keyword</h4>
The solution of 20 * 5 is:
<p id=”test”></p>
<p>If the debugger is turned on the code stops
execution at the start of the debugger</p>
var x = 20;
var y = 5;
var z = x * y;
document.getElementById(“test”).innerHTML = z;

As you can see in the code above, the debugger is used before the variable z in the JavaScript part of the code. The code execution stops before displaying the output when you run the code in the Google Chrome browser.

This is a simple example of how developers can use the debugger keyword to make debugging more efficient.

React developer tools

If you are working with a web application built in React, you can utilize React Developer Tools suite for debugging. These tools allow you to easily view the React tree structure, breaking down the project code by the states and the props in the component. It comes in handy when hundreds and even thousands of parts are in a project. Going through thousands of lines of code to find a component is tedious; this debugging tool simplifies the process.

You can install React Developer Tools as an add-on to the Google Chrome Developer Tools debugging module. It is a free and open-source extension that provides a powerful ‘Select an element’ functionality to inspect any project element if you are unaware of the whole project. It also helps you quickly discover components in a large project. If your project uses Vue.js, there is another excellent extension, Vue.js devtools, that you can use for similar debugging features.

Explicitly document all external dependencies

Every project should have a README file within its source control system. A quality of a good developer is that they include every bit of information with the applications they develop to make it easier for other developers and stakeholders to use the application.

A README file should document all external systems, resources, or databases necessary for the web application to function correctly. It should also explicitly list what resources are optional and how to handle external resources.

All significant web projects have a file that keeps track of what bugs occurred and changes made to the project. It is also a way to tell your company what improvements you made to the project through debugging.


Follow these recommendations when you are building a new web application, and it will become a lot easier to debug errors. These debugging techniques will reduce the time and cost spent troubleshooting production bugs and crashes.

Top Indian talent finds career re-defining opportunities with Talent500. Join us today and be part of an elite pool of developers.



Girish is Talent500’s architect for systems software. His experience in backend development has helped him convert visions of many a product into reality. From his days at BITS-Pilani, he has always dreamt about beating AplhaZero at chess.

Add comment