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.
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
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.