It 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.)
A 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 it.
In Chrome, uncheck the adjacent box next to turn off bits of code, or double-click to edit it.
You 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
web server.
One additional note about inspecting elements in Firefox:
When 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.
No comments:
Post a Comment