20 November, 2008

Firebug – The ultimate tool for the web designer

Many of my friends were saying firebug could do that and firebug could do this. Recently, I decided to see for myself what it could and what it couldn't do. And , I must say I'm very pleased by what I saw. Firebug comes as an add-on with Firefox. Simply visit http://addons.firefox.com and get your firebug add-on. It sits just above your Firefox status bar, making it non – obtrusive and really helpful whenever you need it.


 

But the area where firebug really shines is its ability to highlight elements of the page you are viewing. Just click the "inspect" button on firebug, and wherever you take your mouse on the HTML page, the corresponding markup will be highlighted. This is really useful and priceless for a web page designer because this would save a lot of time and help you learn how someone else has coded his webpage. If you see a nifty CSS trick that you could use, just take your mouse over the element and its corresponding markup would be shown. You would be amazed to know that this works even with Javascript generated content. For example, if you generated a button at runtime. Now if you go into inspect mode, you can see the code for the Javascript that made the button what it is! This way you can get to debug your pages on the fly.