HTML and CSS Reference
can get the job done. Stay away from Dreamweaver because its job is more focused on writing HTML than
Exploring the Chrome Developer Tools
Chrome is available on all platforms, and its developer tools are top-notch. Almost any piece of information
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-
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
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.