As you may know, I’ve been spending quite a bit of time lately tweaking the design of my blog. It has made me realise just how useful a tool like Firebug is. What is Firebug you ask?

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

With Firebug, you simply click on any item in the page, and it will display everything you’ll want to know about that element. In particular, I’ve had to debug numerous CSS issues with the blog. Firebug will show you the style inheritance, allowing you to determine where each CSS style value comes from. The real-time tweaking feature is just an additional bonus for me. I assure you Ctrl+Shift+C is a key combination that you’ll never want to forget.

Unfortunately, Firebug does not work with Internet Explorer. Microsoft does provide the Internet Explorer Developer Toolbar that has similar functionalities. It is not as powerful as Firebug but is useful if you need to work with IE. I find that debugging CSS issues is usually easier if done in Firebug. However, things like DIV layout issues need to be addressed in the respective browser due to the different layout handling between Firefox and IE.

In the short few years that I’ve been away from the web development scene, it seems that TABLEs are out, and DIVs are in as the element of choice for layout design. Oh well, you’ve got to keep up with the technologies.

Quick Links

• Firebug
• Internet Explorer Developer Toolbar