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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: