Professional HTML5 Mobile Game Development

Exploring the Chrome Developer Tools

Chrome is available on all platforms, and its developer tools are top-notch. Almost any piece of information you want to view about your page is available as it’s running, and you can execute arbitrary JavaScript from the console. Safari has tools that are nearly identical (they share the same codebase); however, Safari isn’t available for Linux and isn’t nearly as popular as Chrome among developers.

Activating Developer Tools

Unlike Firebug, Chrome developer tools come pre-installed with Chrome and just need to be opened. To access the tools, you can go to the Wrench menu in top-right corner of the browser, select Tools, and then select Developer Tools. On a PC or Linux, you can also press Ctrl+Shift+I to open them. On a Mac, Command+Option+I works.

Inspecting Elements

The first tab on developer tools is Elements (see Figure 7-1) and it enables you to view the current state of the Document Object Model (DOM). This is different from the HTML you see in View Source, which shows you the HTML loaded from the server because JavaScript may have modified the DOM. On the left pane, you can browse around the DOM, opening and closing individual block elements as wanted and modifying attributes by double-clicking them. You can also right-click (Ctrl-click on a Mac) to make further modifications, such as editing the Node as HTML or adding or removing elements.

Figure 7-1: Inspecting an element.

If you want to inspect a specific DOM element on the ...