Console.time() - Javascript Debugging - Hungry Turtle Code
Hungry Turtle Code Logo Hungry Turtle Code Logo Text. Learn to write code, one line at a time

Console.time() – Javascript Debugging Tips

Please share this post if you enjoy it!

Just In Time – Console.time

I have seen some amazing ways of timing how long javascript code takes to run. Taking timestamps and comparing them is a common way. But console.time is method in the console API that allows you to do exactly that with not other hassle.

This isn’t the first Javascript debugging tip I have given. You can check out console.table and console.trace, if you haven’t already.

Video Tutorial

Get all my latest content and exclusive offers direct to your inbox

Just enter you email below

Go back to the video

Subscribe To My Channel...

 

Starting off, here is the very boring HTML that I started with.

Let’s Take Our Time

If we want to time how long a bit of code takes to run, we will probably want some code that takes a bit of time to run in the first place. No point timing how long it takes to add two numbers together.

Conditionals take a bit of time to compute, so let’s have loads of them! We can create a for loop to loop through millions of times and on every loop, check if it is the end of the loop. That should take some time to run.

Now that we have that, we can use console.time to actually time how long it takes to run. To do that we need to put a console.time call before the start of the for loop and a console.timeEnd call after the for loop has run.

You can also have many instances of console.time running at any given point. To distinguish between them all, you can give them each a name, which is the argument that console.time and timeEnd each take. We will just call this one “firstTimer”.

Run The Code

If you check the console once this code has been executed you will see this:

console output

It looped through 100 million times and made a conditional check on each one, all in 0.315secs. I find that pretty amazing. Computers eh?

But why stop there? I said that you can have multiple instances of console.time running inside the same code. So let’s try that.

This time I think I will use setTimeout to “waste” some time. I can set it to take a certain amount of time before the next code runs, which will be the console.timeEnd call.

Running all this code inside the browser we see this:

second timer console output

The first timer runs the same as it did but then we get the second call to console.time. Notice it too slightly more than the 2000 that we set in the timeout. This will be the overhead of actually calling the functions involved in the code.

Can You Run Two Console.time’s Simultaneously?

Of course! Let’s try it. Let’s call a third console.time at the same time that we call the second. But put a second setTimeout inside the first one and only end the third console.time when the second timeout completes.

Running this in the browser we get three timer values. The first two are the same as we have seen in the past. Then we also get the third one which is the first timeout of 2000ms plus the second period of 3000ms, totalling 5000ms plus a bit of overhead as before.

Third Timer Console Output

There you go. That is about all there is to say about console.time. Go out and use this in your own projects and make your code a bit more efficient by learning where your bottlenecks are.

Until next time,

Stay hungry and keep coding,

Adrian

 

Please tell your friends about this if you found it useful…

Comments

  1. Ravinder Singh says:

    Hi Adrian,

    Very nice angular quiz project, each and every concept is so clear. I am always learning JavaScript and angularjs, but with doing any project many concept are not clear. This project really helps me.
    Could you please post more Angularjs projects?

    Best Regards,
    Ravi.

Leave a Reply

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