Firebug – An essential tool for web developer


As a web application developer, sometimes we need to debug javascript code or need to make some css design. In Mozilla firefox web browser there is a plugin named Firebug, that 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.

To install Firebug visit the Firebug download page. Click on the huge orange button half-way down the page on the right hand side. You can also download it from Mozilla’s FireFox Add-ons site. Install it. Restart FireFox, and you’re good to go.

Opening and Closing Firebug

Keyboard and Mouse Shortcuts for Firebug can be found at the Firebug Website. The three sets I use most often include:

  • Open Firebug: F12 or clicking on the green check mark at the right of the right of the browser status bar.
  • Close Firebug: 12 or clicking on the green check mark at the right of the right of the browser status bar or clicking on the red x in the upper right hand corner of the firebug window.

Inspect and edit HTML

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.

Tweak CSS to perfection

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.

Debug and profile JavaScript

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. Firebug provides the console object that has several methods usable for logging. Properties of console object include console.debug, console.info, console.warning, and console.error. When one of these methods produces an output, Firebug links to the line causing the output so you can quickly find the responsible code.

Logging for JavaScript

Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help
you get answers fast.

mahmud ahsan

Computer programmer and hobbyist photographer from Bangladesh, lives in Malaysia. My [Business | Twitter | Linkedin | Instagram | Flickr | 500px]

You may also like

LEAVE A COMMENT