Preview changes on live webpages with the Firebug plugin

One advantage when working in print, is that once the design is committed to paper your work is done. With web design however, there is the never ending “what if” factor. What if I tweaked this, nudge that and change that a little.

It’s a bit of an industry joke that graphic designers are never completely happy with their own work. If you frequent a few design blogs it wouldn’t be unusual to notice a little change every few months or so.

Depending on the particulars of your site making these changes can be more or less difficult. A static HTML/CSS web page can be edited and previewed locally, but if your running a php site, wordpress blog etc. there isn’t really a great way to preview the work offline.

A dummy site could be set up or you could make the changes to live site, neither of which is particularly time efficient, and worst yet a little mistake somewhere along the line can ruin the appearance of your live site for current visitors or even bring your site down depending on the nature of the error.

This is where Firebug comes in. The firebug plugin allows you to inspect, edit and preview HTML, CSS and javascript on any live web page without having to change or upload any of the sites files.

Before.

After.

Demonstrated above; before, showing my current sans body copy and red background when hovering over links, and after, showing serif body copy and grey links.

A basic example obviously, however the firebug tool can be used to change any rule or element on your web page without any impact or risk on your live site, and no wasted time creating and uploading copies.

Very useful.

The firebug plugin also has a variety of analysis and performance tools to optimise the performance of your site. Even if you only do a small amount of web design, the plugin’s worth a look.