JavaScript is the web language used by over 90% of websites. Still, it has a reputation of being difficult to debug. JavaScript’s asynchronous nature makes it easy for developers to create complex web applications, but the same attribute makes it challenging to locate errors. Fortunately, knowing the right tools and understanding a few debugging tricks can make it easier to resolve bugs and errors.
Here we have put together a list of practical JavaScript debugging techniques you should keep in mind.
Use debugger
For many JavaScript developers, the debugger is their favorite debugging tool. When writing extensive code with complex logic, experienced programmers place a debugger in the code line that they anticipate will produce an error. When such code is run in Chrome, the Developer Tool will automatically stop when it encounters a debugger keyword.
You can also wrap the debugger in conditions to run them in a particular event like this:
if (thisThing) {
debugger;}
Learn more about debugger keywords here.
Learn to use the console.trace
JavaScript has many frameworks such as Node.js, Vue.js, and React. These frameworks make it easy to produce code quickly. In a project, you will have many views, triggers, and too many events. When working with a framework, most of these events will be hidden in an abstract layer, so it will be challenging to identify what caused a particular function call.
JavaScript is not very structured, and it is hard to get a clear overview of what happened and when. This is why JavaScript developers should use the console.trace method.
Let’s assume in the following code, you want to see the entire stack trace for the function call funcZ:
var car;
var func1 = function() {
func2();
}
var func2 = function() {
func4();
}
var func3 = function() {
}
var func4 = function() {
car = new Car();
car.funcX();
}
var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
this.funcZ = function() {
console.trace(‘trace car’)
}}
func1();
var car;
var func1 = function() {
func2();
}
var func2 = function() {
func4();
}
var func3 = function() {
}
var func4 = function() {
car = new Car();
car.funcX();
}
var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
this.funcZ = function() {
console.trace(‘trace car’)
}
}
func1();
This will be the output at Line 33:
As you can see that the trace clearly indicates func1 called func2, which is further called func4. Then the func4 created an instance of variable Car calling the function car.funcX, and so on. This is a simple script, so it is easier to follow through the flow, but when the code block is a big console.trace method proves to be handy. You can easily trace all related functions to pinpoint the bug.
Use console.time() and console.timeEnd() to benchmark loops
Not just JavaScript, but loops are trouble makers in every programming language. To create efficient and fast code, developers need to know how long any code segment takes to execute. Slow loops can degrade the performance of the entire JavaScript code.
But you can benchmark loops to evaluate their performance. Here is a way to set up multiple timers using console.time() and console.timeEnd() methods.
console.time(‘Timer1’);
var items = [];
for(var i = 0; i < 100000; i++){
items.push({index: i});
}
console.timeEnd(‘Timer1’);
The output will be:
As evident, benchmarking loops in JavaScript can help you save time trying to troubleshoot performance issues.
Chrome Developer Tool for responsive test
As most web applications are accessed through multiple devices, you have to make sure your JavaScript code works on all screen sizes. In an ideal world, developers would have every single device check the compatibility of their code. Unfortunately, in the real world, it is not feasible.
Chrome Developer Tool has the option to resize the viewport to check your code’s performance on any screen size. To use this feature, open the inspector in Chrome and click on the toggle device mode button as highlighted in the image:
Using this tool, you can instantly check the media queries, forms, and dynamic code for various screen sizes.
Black box scripts for faster debugging
Modern web applications use libraries and frameworks that are tested for bugs. But when you run any debugger tool, it will still check and try to debug all files, even those that have no relevance. It substantially increases the cost of debugging and takes longer too.
The solution lies in black-boxing the scripts you don’t need to debug. Fortunately, both Chrome and Firefox provide the option to blacklist scripts that you don’t want to debug.
In Chrome, open the inspector and right-click the JavaScript file you want to blacklist, and choose ‘black box script.’ You can learn more about Chrome Script Black Box here.
In Firefox, go to the debugger tab in the element inspector. Mark the scripts you want to blacklist, then click on the eye at the bottom-left corner. Learn more here.
Conclusion
Debugging is an active responsibility of developers. Its unstructured design makes it challenging to identify and resolve errors with JavaScript. The techniques shared above will help you create JavaScript debugging more efficiently.
Talent500 is one of the best platforms for developers to find remote work opportunities. Join us today to be discovered by the best companies.