Friday, February 25, 2011


Firebug integrates with Firefox to add good web development tools while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. This will show you some web performance tools to show you how you can test your sites performance so you can see how to improve your sites load time

One Click to Start Firebug

After you install Firebug you will see a gray 'Firebug' in the Firefox status bar (along the bottom of the window). Click on the Bug to start. Firebug will open in the bottom of your web page.

Inspect and edit HTML

As soon as you open Firebug you will see the Web page HTML,CSS styling, and object model. Three tabs -- HTML, CSS, and DOM -- activate as soon as you open Firebug. If you are a Web designer, this may be all of the Firebug you need. as 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.

Visualize CSS metrics 

When you’re editing CSS and the CSS boxes aren't lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.

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.

Quickly find errors

When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.

Explore the DOM

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.

Execute JavaScript on the fly

The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol' fashioned command line for JavaScript complete with very modern amenities.

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.

No comments:

Post a Comment