Mar 26, 2009
Best debugging tool for front-end and CSS - Firebug (Firefox extension)
The favorite extension of programmers everywhere, Firebug is one of the best applications around for debugging issues with front-end code and CSS. If there’s any image or style that’s out of line, checking it out with Firebug is the best response. It’s even possible to change styles within the extension to see how a website will actually appear in the browser.
Key Features:
- Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.
- Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.
- Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.
- The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly.
Firebug is there when you need it, but doesn’t get in your way when you don’t. There are plenty of options for configuring how and when Firebug springs into action.

Leave a Reply