Home / Programming / Using the Chrome Developer Tools for JavaScript Debugging

Using the Chrome Developer Tools for JavaScript Debugging

One of the thorniest problems with web development has always been cross-browser compatibility. As our web sites become more interactive we focus more on JavaScript and AJAX to deliver rich user experiences, which introduces new challenges for debugging and tracking down cross-browser differences.

Firebug is an excellent option when working with Firefox, and Visual Studio is perfect for Internet Explorer. Until recently there was no good option for Google Chrome, but earlier this year Chrome updated the developer tools, and they rock.

Assuming you’re on a Windows machine, hit Control+Shift+J to open the developer tools window. You can also get there from the page menu, or by right clicking on any element in the page to “inspect element.”

The toolbar at the top lets you inspect the DOM elements, debug scripts, even inspect the cookies currently saved in the browser. It isn’t obvious from teh UI, but there are keyboard shortcuts for each of the debugger commands:
F8 - Run
F10 - Step over
F11 - Step into

Note that if the browser window is focused and not the debugger window, F11 will have the window go into full screen mode.

You can set breakpoints by clicking on the line number in the script window, or by adding the “debugger;” line to your javascript. Simply mouse over a variable to see its current value.

While I’ve found that Chrome is a phenomenal browser and I’m in love with its performance, it can be somewhat less forgiving of errors than other browsers. The Chrome debugger is an excellent tool for tracking down those errors.