PiXELWiT

I’m not a big-time web developer so I’m often a bit behind the curve when it comes to cool new tools. If you’re like me and you happened to miss the seemingly omnipresent buzz, Firebug is one of the few web development tools worthy of the praise heaped upon it. It has so many features it’s easy to be overwhelmed by them all. I don’t claim to know everything about this Firefox plugin, but one thing I know how to do is use Firebug to edit CSS right inside the browser. Not only that, but it rounds up all the files, colors all the code, shows you what rules are in effect for every item on the page, provides code hints… and that’s just what it can do with CSS.

When it comes to high tech tools I’ll admit I can be a bit like a clever monkey that discovers a Zippo lighter, immediately recognizes its fire-starting ability and then starts making sparks by bashing it on a rock. That’s why I’ll leave the explanation of Firebug’s finer details to the plugin’s author Joe Hewitt. You can read what he has to say about his Firebug’s capabilities at his site GetFirebug.com.

Now let’s make some sparks…

• Download or install the plugin from Mozilla.org.
• Restart Firefox.
• Start Firebug by either going to the “Tools” menu in Firefox and selecting “Firebug/Open_Firebug” or by clicking the green checkmark or red “X” in the bottom right corner of the Firefox status bar. A red “X” means the page you are viewing contains an error of one sort or another.
• Press the “HTML” tab near the upper left of the Firebug console. You should now see the entire HTML code for the current page in a very handy dandy expanding and collapsing code structure. Take a second to check it out.
• Near the top left corner of the Firbug panel, press the “Inspect” button.
• This is where it gets impressive. Move your mouse around in the HTML page currently displayed. Each HTML element should show a box around it when hovered over. Kinda neat.
• As you mouse around the HTML document, look at the left side of the Firebug panel. The HTML code automatically folds and unfolds to display the HTML node for selected page element.
• Now look on the right side of the Firebug console and you’ll see that every CSS property associated with the currently highlighted element is on display.
• Not only is the CSS and HTML fully exposed and on display but Firebug lets you to fiddle around with it too. Click on any value in the CSS list and it’s instantly editable.
• Change the value of the selected CSS property and you can see Firefox update the page almost instantly.
• Many of the CSS property and value fields can be altered simply by pressing the Up and Down arrow keys. This is a great way to precisely place and resize CSS elements with pixel perfect precision. You can also use the arrow keys to scroll through standard CSS properties and keywords which saves time and serves as a reference.
• Once you’re done tweaking your little heart out, it’s time to save your changes. On the right side of the Firebug console press the bright blue text which links to your modified CSS file.
• Press the “Edit” button on the left side of the Firebug console to restore the CSS file’s original format while retaining all your modified values.
• Press Ctrl A to select all the text in the CSS document.
• Copy and paste the text into a new document.
• Save the document with the appropriate file name and upload it to your server.
• Refresh your page and start the process all over again until fully satisfied.

Obsessive Compulsive types beware, FireBug may induce excessive over-tweaking. KNOW WHEN TO SAY WHEN! Don’t succumb to your Firebug Jones.

Comments(3)