The Developer Tools window in JavaScript has another really wonderful tool called the console. There's so much you can do for your HTML5 pages with this wonderful tool. Try this exercise to see some of the great ways you can use the console:
Begin with the forLoops.html page.
You can debug any page, but forLoops.html is especially helpful for debugging.
Place a breakpoint.
For this demonstration, put a breakpoint in the count() function.
Step through a few lines.
Use the button or F11 key to step through a few lines of code.
Switch to the console tab.
The Console tab switches to console mode. This is particularly interesting when the program is paused, as you can investigate and change the nature of the page in real time.
Change a style.
Try typing document.body.style.backgroundColor=lightGreen in the console. This modifies the background color of the page in real time. This is fun but not seriously useful.
Examine the document.body.
Type document.body in the console and press Enter .You'll see plenty of information about the body. Document.body is actually a JavaScript variable containing the current document body. It's very powerful and allows you to understand a lot about what's going on.
Examine the body's innerHTML.
Like any HTML element, document.body has an innerHTML property. You can examine this in the console: document.body.innerHTML.
Look at the variable i
You can examine the current value of any variable as long as that variable currently has a meaning. Type i (then press enter) to see the current value of the variable i. If the count() function isn't currently running, you may get a strange value here.
Check the type of
All variables have a specific type defined by JavaScript, and sometimes that data type is not what you expected. You can ask the browser what type of data any variable contains: typeof(i) returns “number.” You may also see “string” or “object.”
See if your output variable is defined correctly.
Like many interactive programs, this page has a div called div that contains the output. If this is not defined correctly, it won't work. Try output in the console to see if the variable is correctly defined and in scope. You can view the contents of output with output.innerHTML.
Check your functions.
You can check to see if the functions are what you think they are in the console. Try typing count (with no parentheses) to see the contents of count.
Print to the console from your programs.
You can even have your programs print information to the console. Use the code console.log(“hithere”) anywhere in your code to have the code print a value to the console. Normally you'll do this only when your code is not functioning properly to see what's going on.
The console was not available in earlier browser versions, so it isn't always taught as a part of JavaScript programming. Now that it's a commonly available tool, you should definitely consider using it.