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
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:
By doing so, you will be able to track the progress of the code and easily debug it.
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>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;
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 README.md 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.