A Great Free Tool for Debugging and Inspecting Code

About a year my company was tasked with customizing a Ning installation for a large client. In addition to the standard design and CSS tweaks, our developers also took on the challenge of building a custom front-end interface to validate new members against an external database, and then pass them to Ning’s registration if they were validated.  It was a nice solution.  During this project I was introduced to Firebug – a free plugin for Firefox that eases the pain of inspecting websites code when you don’t actually have access to the source code.  There are plenty of other ways to go about this, but Firebug is the quickest and easiest that I’ve found.  The expandable panel allows you to clearly see the associated HTML, CSS, and JavaScript for each page element you hover over.  This tool is a real time saver when you’re trying to decipher extremely complicated nested CSS – like Ning uses.

In this example I’ve got the Firebug panel at the bottom of Firefox expanded. As I hover over a button the HTML code is shown on the left side and the corresponding CSS code is shown on the right side of the panel.  When Ning’s CSS has 5-10 styles influencing a single page element, this plugin makes life a lot easier than trying to dig through a bunch of separate style sheets to determine the CSS inheritance.

Firebug Screen shot

Firebug makes life easier...

Leave a Reply