HTML and CSS Reference
In-Depth Information
can get the job done. Stay away from Dreamweaver because its job is more focused on writing HTML than
JavaScript and can do more harm than good.
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+Op-
tion+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.
