3 Firebug Time Saving Tips for Web Designers

1. Pixel Perfection

Too often designers get too close too their designs and then unconsciously leave out subtle yet very important design elements for the sake of code cleanliness or just to make things easier on themselves. To aid themselves in pixel perfection and making sure the details aren’t missed especially when the design isn’t your own and you must run your coded composition past the original designer for quality assurance. To the rescue is Pixel Perfect. Pixel Perfect allows for developers to overlay their coded with a semi-transparent image of your choice to align and match-up.

2. Inspecting :hover Selectors

A real pain inside of Firebug for me has always been dealing with hover states especially when it involves inspecting CSS drop down menu’s. Maybe it’s me just being an idiot and spending 5 minutes to Google for a better way but I can’t be the only one out there who would inspect an element and the repeatedly hover over it to see it’s attributes and to troubleshoot my CSS inconsistencies. Well, guess what, it was there staring me in the face the whole time. Using the html selector pane, and under the console portion, click the arrow next to the Style tab to reveal a drop down menu. From the drop down menu select :hover.

3. Firecookie

Firecookie in my opinion is one the most complete add-ons available for the Firebug extension. While Firefox certainly offers it’s own ability to add, view, clear and easily edit any cookie in your cache. It even enables filtering for the site you are on as a method to clear the clutter.

In conclusion these tips probably won’t make your job as interactive developers any less of an ordeal but can certainly take away some frustrations or tedious aspects that you deal with on a daily basis.