It is nearly impossible to overrate FireBug as a web development tool.

One of its awesome qualities is that it lets you test design changes on the fly, without actually changing the code.

Here are some examples:

Editing a specific element style

To add style properties to elements that already have CSS styles declared, you need to:

  1. Right click on the element you want to edit style for and select Inspect Element.
  2. Right click anywhere in the right pane in FireBug window, and select New Property.
  3. Type the new property and its value

But what if you wanted to test different looks on an element that has no declaration in your CSS file? or maybe to add style properties only to the first li (list item) tag in a list, and not to the rest of the items in that list?

In this case, follow the 3 simple steps described below and then type the new property and its value.

Adding an attribute to an HTML element

hmmm… maybe my gravar image will look better when aligned to the right instead of left?

I can test it really quickly like this:

Testing new images in your live site without adding them to the code

How about adding a nice Digg icon below my posts, just below those RSS and twitter icons?
First I need to find a icon that may be suitable (and free for commercial use), and then follow these steps:

Now I can go back to my blog and past that img tag:

Nice, eh?
This was only the tip of the iceberg, though. Firebug has a lot more great features so I will post some more tips in the future.

The real beauty of firebug is the ability to test changes in live websites without duplicating the site, because these changes appear in your own private browser only, and don’t have any effect on other site visitors.

Want to add something? Have a question? Shoot!

Topics:   | | | |