How to Manage JavaScript Errors with the Chrome Debugger for HTML5 and CSS3 Programming - dummies

How to Manage JavaScript Errors with the Chrome Debugger for HTML5 and CSS3 Programming

By Andy Harris

By the time you’re writing loops and conditions in JavaScript, things can go pretty badly in your HTML5 code. 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 great built-in debugger.

To see how a debugger works, follow these steps.

  1. Load a page into Chrome.

    You can add a debugger to most browsers, but Chrome has one built in, so start with that one.

  2. Open the Developer Tools window.

    If you right-click anywhere on the page and choose Inspect Element (or press the F12 key), you’ll get a wonderful debugging tool.

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

  4. Move to the Sources tab.

    The Developer Tools window has a separate tab for working with JavaScript code. Select the Sources tab to see your entire code at once. There’s a small menu button that lets you select from all the source pages your program uses. If your page pulls in external JavaScript files, you’ll be able to select them here as well. (Note some older versions of Chrome called this the Scripts tab.)

  5. Set a breakpoint.

    Typically you let the program begin at normal speed and slow down right before you get to a trouble spot. Click on the first line (16) of that function in the code window. Click the line number of the line you want to pause, and the line number will highlight, indicating it is now a break point.

  6. Refresh the page.

    In the main browser, use the refresh button or 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.

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

  8. Click the Count button.

    The Count button should activate the code in the count function. Click this button to see if that happens.

  9. 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 will happen.

  10. Step into the next line.

    In the Developer Tool window is a series of buttons on top of the right column. Step into the next line looks like a down arrow with a dot under it. You can also use the F11 key to activate the command.

  11. Step a few times.

    Use the F11 key or the step 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.

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

  13. 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 in i and enter.

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

Safari has a similar web Inspector tool built in, and even IE finally has a decent debugger called F12. All work in roughly the same way. Usually, however, a JavaScript error will crash on all browsers, so pick one you like for initial testing, and then use other browser-specific tools only when necessary.