Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Website Optimization

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Console API

3:48 with Nick Pettit

The Console API is useful for profiling JavaScript code, logging commands, recording the execution time of code, and more. In this video, you’ll learn how to time the execution of a loop.

For more information about the DevTools Console and its built-in commands, refer to the Console API Reference.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    One other console command that I wanna 0:00
    show you is timing how long something takes. 0:03
    This is good if you're trying to profile 0:07
    the performance of your JavaScript, and you wanna profile 0:09
    beyond CPU usage and memory, and you actually just 0:12
    wanna see how long something is taking to execute. 0:15
    So I'm going to write a function here, and I'm going to say MyLogTest. 0:17
    And I'm going to pass it a variable. 0:24
    And inside of here, I'm going to say console.time. 0:28
    And I'm going to pass that string to say Loop. 0:37
    By the way, to hit Enter in my console and skip down to the next line, 0:43
    without actually executing this I'm just holding down Shift, and hitting Enter. 0:48
    And that can break down to the next line. 0:53
    Next I'm gonna create another for loop which is endless here. 0:56
    That's actually not great practice, you shouldn't 1:00
    do that because oftentimes the conditions to end 1:03
    the for loop will never come, as you saw earlier when I crashed my browser. 1:06
    But I'm gonna do it anyway for brevity. So, MyVar is going to increment by one. 1:11
    I'm gonna say console.log. 1:17
    And inside of this, I'm going to 1:20
    use a little bit of JavaScript concatenation syntax. 1:22
    So I'm gonna say, the value of MyVar is, with a space and then a plus. 1:26
    And then I'm going to print the value of my variable. 1:33
    And then, just because we want this to be 1:37
    nicely formatted, I'm gonna print a period after the variable. 1:39
    Now I need to 1:43
    create the condition that will end my loop. 1:46
    So I'm gonna say, if my var is equal to let's say eight, then go ahead and break. 1:49
    And that will stop the loop. 1:58
    Now we're using the console time up here, we need to also end our timer. 2:01
    So we have a timer that starts. 2:06
    Now we need to create the corresponding end timer. 2:11
    So I'm gonna say timeEnd. 2:14
    And, 2:17
    going to say loop. 2:20
    Cuz we want that to be titled exactly the same there. 2:22
    And then I'm gonna go ahead and hit Enter. 2:27
    Now the my log test function has been created 2:30
    and we can go ahead and call it and 2:33
    you'll notice that it even auto completes for us 2:35
    because it knows that function is available to us. 2:38
    So if I were to type in 1 and pass it that value, 2:41
    it will print out every time the loop runs. 2:46
    And then it will say, huh, that loop took 0.782 milliseconds to run. 2:52
    So that's a pretty fast loop. 2:58
    If I were to type in a value of seven, we'll see that it actually takes less time 3:00
    to run, because it's looping zero times. It only had to loop twice or once 3:06
    to actually get up to the value of eight there. 3:11
    You notice down here that we can go ahead and filter by errors. 3:17
    So, I had some errors earlier and we can go ahead and look those, 3:20
    can also look at warnings which are similar to errors, any kind of logs. 3:24
    So we created some logs earlier. 3:29
    And we can also go into debug mode there. That is just a really small taste 3:32
    of what you can do with the console. The console is incredibly robust, and 3:37
    if you wanna see more, definitely be sure to check out the console API reference. 3:43

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up