How to Manage Bugs with a Debugger in Your HTML5 Game
When you’re writing loops and conditions, things can go pretty badly in your HTML game code and a debugger may be necessary. Sometimes it’s very hard to tell what exactly is going on. Fortunately, modern browsers have some nice tools that help you look at your code more carefully.
A debugger is a special tool that allows you to run a program in “slow motion,” moving one line at a time so you can see exactly what is happening. Google Chrome has a built-in debugger, so let’s begin with that one.
To see how a debugger works, follow these steps:
Load a page into Chrome.
You can add a debugger to most browsers, but Chrome has one built in, so start with that one. You will load the forLoops.html page because loops are a common source of bugs.
Open the Developer Tools window.
If you right-click anywhere on the page and choose Inspect Element, you get a wonderful debugging tool.
Inspect the page with the Elements tab.
The default tab shows you the page in an outline view, letting you see the structure of your page. If you click on any element in the outline, you can see what styles are associated with that element. The actual element is also highlighted on the main page so you can see exactly where everything is. This can be very useful for checking your HTML and CSS.
Look at the Console tab.
Any time your code is not working as expected, look at the Console tab. Often there will be an error message here that explains what is going wrong.
Move to the Scripts tab.
Set a breakpoint.
Typically, you let the program begin at normal speed and slow down right before you get to a trouble spot. In this case, you’re interested in the count() function, so click on the first line (17) of that function in the code window. (It’s more reliable to click on the first line of the function than the line that declares it, so click line 17 instead of line 16.)
Refresh the page.
In the main browser, click the Reload button or press the F5 key to refresh the page. The page may initially be blank. That’s fine — it means the program has paused when it encountered the function.
Step into the next line.
On the developer tool are a series of buttons on top of the right column. Click the Step into the Next Line button, which looks like a down arrow with a dot under it. You can also press the F11 key to activate the command.
Your page is now running.
If you look back over the main page, you should see it is now up and running. Nothing is happening yet because you haven’t activated any of the buttons.
Click the Count button.
The Count button should activate the code in the count function. Click this button to see if that is what happens.
Code should now be paused on line 17.
Back in the code window, line 17 is now highlighted. That means the browser is paused, and when you activate the Step button, the highlighted code executes.
Step a few times.
Use the F11 key or the Step into the Next Line button to step forward a few times. Watch how the highlight moves around so you can actually see the loop happening. This is very useful when your code is not behaving properly because it allows you to see exactly how the processor is moving through your code.
Hover over the variable i in your code.
When you are in debug mode, you can hover the mouse over any variable in the code window, and you’ll see what the current value of that variable is. Often when your code is performing badly, it’s because a variable isn’t doing what you think it is.
Add a watch expression to simplify looking at variables.
If you think the loop is not behaving, you can add a watch expression to make debugging easier. Right under the step buttons you’ll see a tab called watch expressions. Click the plus sign to add a new expression. Type i and press Enter.
Continue stepping through the code.
Now you can continue to step through the code and see what is happening to the variable. This is incredibly useful when your code is not performing like you want it to.
The debugger built into Chrome is one of the best out there, but it’s not the only choice. If you’re using Firefox, the excellent Firebug extension adds the same functionality to Firefox.