Friday, February 23, 2007

Firebug Firefox Extension - tweak any web page

Earlier this week someone directed me to a FireFox extention called "FireBug" - possibly the most interesting tool for web developers I've ever come across.

It allows you to open a console for any page you are browsing (not just on your own server- if it loads in your browser, you can work with it) and view and change the code in a very convenient manner - to me it is much easier than the typical "view source" method. Want to know what your favorite site would look like with a black background? Find your bgcolor tag and modify the color - presto, you have a black background.

FireBug provides a host of other features too, though.

One really useful feature is a graph that shows where HTML and CSS layout controls are trying to place each object, showing a small boxed example with rulers and guides. Great for finding out why things aren't lining up correctly.

Another really slick feature is the "network monitor" that shows how long it takes each element to load - perfect for finding out why some pages take a mysteriously long time to load.

Also worth mentioning is the error console and logging, including JavaScript errors.

Quick Install:

If the install link doesn't exist by the time you read this page, head over to the project's page on the FireFox Extensions site:

Project home page:

No comments: