The cool thing is console.log is not the only method available to us in the console. There's a long list of Console Methods we can use to display all sorts of information in the console. The MDN article on the console has a full list for you to dig through. Here in this movie, I want to show you the two I find the most useful, Console.info and console.error. In the exercise files for this movie 11-03, you'll find our typing speed tester application but when you run it in the browser, you'll notice, not all is well.
When I type in some content here and then erase it and then type in, "The "text to test," the clock doesn't stop. This is what happens when I developed this code during the preparation of the course and I want to walk you through my own troubleshooting of this problem, step-by-step, using the console so you see how this works. The first thing I did when I saw this error was open the console to see if there were any errors and looking through the console, I see there's a bunch of logged content that's all coming from this console.log entry right here but there are no red errors so obviously there's nothing terribly wrong with my code.
Next, I mess around with the application to see if I can trigger the problem again. So I reload the page and then try to see, "The text to test." That stopped the clock, alright. What if I say, "The text stra..." and then go fix it to test. Clock stops again. Alright, what if I go, "The text to te..." and then delete everything and then go, "The text to test." That is what triggers the problem.
So apparently, when I clear the entire box and start over the clock doesn't stop. You'll notice that even now when I click, "Start over," the clock is reset to zero but it's still running. Obviously, this is a major problem. My app is not working properly. What's happening here is the interval is not being cleared. You'll remember that up here in this spellcheck function if the text entered equals the origin text, we run this method, clearInterval, that clears the interval but obviously that's not happening over here.
Reading the documentation for the Set Interval Method. I know the Set Interval Method returns an I.D. for the current interval. So, I can output the interval I.D. for the current interval and make sure we're actually clearing the correct interval. I do that inside the spellcheck function. Here in the conditional statement, I'll say, "Console... "info" then "Interval "stopped" and the interval I.D., which is just interval.
Save my code, go back in the browser, open the console then I'll make the mistake again. So, I'll go here, type in some content, then clear and then type in the content again. And here down at the bottom of our console, I now get an info flag that says, "Interval stopped five." This is the difference between console.log and console.info, console.info gives you this little 'i' icon on the left-hand side, that's the only difference though.
It doesn't do anything fancy, it just adds this 'i' so we can clearly see this is different from a regular console.log. Okay, so the interval we stopped is interval number five. To bear a little further down, I also need to figure out, what is the current interval that's running. Inside the start function where the interval is set, I'm going to do another console.info interval, and this will run immediately when we start running the script and then we can match these two numbers. I'm also going to get rid of that console.log up here because it's taking up a lot of space in the console.
Alright, so, when I start typing here, we get the I.D. for the current interval, which is four. Then I clear and I start typing again. Oh, here I got another I.D. for the interval, which is now five. If I complete the test now we're stopping the interval with the I.D. of number five but the interval that's running here, that's driving the clock, is the interval with I.D. four. So, what's really happening here is the logic in the start function is incomplete.
Every time we clear this box completely, this conditional statement kicks in, we start a new interval and that's why the clock is not stopping. Just to make sure my hypothesis is correct, I'm going to do a really crude test here and set up a "let" called "test," set it to zero, go into the conditional statement here and then say, "If test "is bigger than or equal to one, "then console.error, "the start function "is triggered." Then, after running the interval, I set test plus plus, save that, go and type the first time, blah blah blah, everything is fine, delete and then type a second time and here we console.log out an error.
This is what console.error looks like, a red flag that tells us this is an error, again, it's purely visual, it doesn't do anything else, it just gives us a little more information about exactly where the error occurred. Now I know conclusively what the problem is, I need to fix my logic and we already fixed this earlier in the course but I'll do it again here. I create a new variable called, "timerRunning," and set it to false. Then inside my start function I say, "If textEnteredLength triple equals zero and timerRunning is false then we run this function and we also set timerRunning to true.
Then down here in the reset function, I set timerRunning back to false. Save all this. Then go back and test it. Now you should see a difference down here in the console. If I start typing we get the I.D. four then I clear this and then type again. We don't get a new I.D. because we're still running the same interval and then if I type in the correct answer, the clock stops, interval stopped number four.
And everything is working properly. Using the console to log out data like this is something all Java developers do all the time. Anytime something acts in a surprising way, try adding a log or an info box or an error to the console and see what's going on or explore the many other console tools available from the MDN console page.
- Working with data
- Using functions and objects
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality