I will be writing this as series as a part of byte sized blogs which will talk about some of the basics of JavaScript.
Whether you’re a veteran looking to brush up on your skills or a beginner eager to learn something neat, these blogs are crafted with all of us in mind. They’re perfect for those who want to learn on the go, with examples and practical use cases.
Exploring console object
The humble console object, an unassuming tool that comes bundled with all JavaScript engines providing a gateway to the browser’s developer console, is a treasure trove of debugging tools that many have overlooked.
Once the go-to tool for JavaScript developers, the console was essential for debugging, analysis, and performance measurement. However, with the evolution of modern browsers and the exponential increase in device computing power, it seemed to have faded from the limelight. Or so we thought…
In this article, I’ll explore the console.time function available through the console API. This powerful function will aid your debugging process. When used alongside the debugger and breakpoints, this will streamline your workflow and make your performance optimisations much more quantifiable.
console.time Functionality
console.time function can be used to measure the execution times of various functions and their branches. This is especially useful when you are trying to measure how fast or slow a particular workflow executes. The console.time function when used in conjunction with console.timeLog & console.timeEnd shows its true potential.
I find this function really useful when you have to measure workflow performances of things like user onboarding, a user signup journey or a calculation heavy execution. It is perfect those pesky conditional statements in the code where after a point it becomes hard to track
You’d say we can measure all above using the network tab of browser console, but where this function really shines is we can see all the output nicely displayed in the console of the browser even when you have forgotten to open up the developer console before the page loads. If you use any UI observability tools like Datadog, new relic etc, this will show up in their respective UI monitoring tools.
Examples
Here is an example of nested for loops which will print the values of i & j when i is odd and j is even. We are measuring how long the total execution took.
console.time('Loop execution');
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; j++) {
if (i % 2 !== 0 && j % 2 === 0) {
console.log(`i = ${i} and j = ${j}`);
}
}
}
console.log('Total duration');
console.timeEnd('Loop execution'); If you want to progressively measure how long each iteration, where the condition was true took, you just need to add another line of code and it will print the log view.
console.time('Loop execution');
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; j++) {
if (i % 2 !== 0 && j % 2 === 0) {
console.log('i = %d and j = %d', i, j);
console.timeLog('Loop execution');
}
}
}
console.log('Total duration');
console.timeEnd('Loop execution');The good thing about this is that you can start as many timers as you want, just pass in the name in the initiating function console.time as below:
console.time('Timer for odd i and even j');
for (let i = 0; i < 5; i++) {
console.time('timer_check_j');
for (let j = 0; j < 5; j++) {
console.timeLog('timer_check_j');
if (i % 2 !== 0 && j % 2 === 0) {
console.timeLog('Timer for odd i and even j');
}
}
console.timeEnd('timer_check_j');
}
console.log('Total duration');
console.timeEnd('Timer for odd i and even j');The last snippet will reset the timer for 2nd for loop after each iteration of the first. The scope of each timer is tied the scope of execution of the code block.
Go ahead and run these variations and see the difference for yourself. Have you used time function in your code?
Did you notice the different ways we can print the dynamic values in console.log function. If not go back and look at the first 2 code snippets.
Share your thoughts on any other use cases where you already have, or you could use this. A good real-world example is always welcome and helps everyone learn and give provides new perspective.
Happy coding!
