So what exactly does ‘inspecting an element’ mean?
gives you easy access to specific code the browser is interpreting to
display particular elements. This becomes especially important when you
just can’t figure out why a certain chunk of text won’t move into the
space you want it to.
(After you have spent any amount of time developing sites with HTML and CSS, you’ll quickly fall in love with any tool that helps you troubleshoot their code.)
bonus feature allows you to edit the code in question, and then see the
results instantly in the browser. So, if you thought one piece of code
might be offending the browser, you could turn it off and see whether
the page displays better without it.
To do so in Firebug,
simply hover near the code you’d like to temporarily turn off, then
click the disable icon that appears. You can also double-click to edit
In Chrome, uncheck the adjacent box next to turn off bits of code, or double-click to edit it.
should be aware that temporarily hiding or otherwise editing the code
is for testing and troubleshooting purposes only. It does not actually
change the page stored on your host company’s web server. Therefore, say
if you made any changes in Firebug, be sure to keep track and copy them
into the pages stored on your
One additional note about inspecting elements in Firefox:
you right-click (or Control-click on the Mac) a web page item in
Firefox, you’ll also likely notice there is an option for ‘Inspect
Element’ above the Firebug option. This is the native code inspector new
to recent versions of Firefox (as shown in Figure 2-7). While it does
offer many of the same options as Firebug, many people find it to be a
memory hog (at least, as of this writing). Because this can lead to
frequent crashes, we suggest you test it a few times before deciding to
use it exclusively.