What I Learned about Firebug

Tonight I attended a meetup with the Austin WordPress group on how to use Firebug presented by Nick Batik. I have used Firebug for ages, but no one ever taught me how to use it, so I’ve just fumbled around and pretty much stuck to finding out what CSS elements did what. Here’s what I learned tonight!

  1. When inspecting an element you can click on a color code and then use your arrow keys to change the color incrementally. Click up to go lighter or down to go darker – on the entire value or just a color 0pair (R G or B)Change Color in Firebug
  2. Can click up and down arrows in all of the elements (like above) and it will change the value up or down. This is a good way to find the right margin or padding.
  3. Same thing if the field is blank just use the arrows to see what options you have. I tested this with ‘text-align’ and it told me values like justify, right, and left.
  4. If a field doesn’t have a style you can right click in the style area of firebug and choose to add an element style (will effect only this element – so if it’s the 2nd H1 it will only effect the 2nd H1) – it will add it in line which isn’t the best way to do css, but gives you the code you need to create a style tag with the next tip
    • You can right click on the tag in the html editor, copy the css path to get what you need for the style sheet
  5. To make a rule for all fields of a type you can choose to ‘add rule’ which will add a rule for all fields of the same type – like all H1s
    Add CSS Rule
  6. I never clicked the ‘Layout’ tab! Did you know you could see the ‘box model’? Do you know what the ‘box model’ is? I didn’t! See the image included here. Basically it shows you the size of the element, the padding, the border and the margin – and you can click the numbers here to edit them.
    Firebug Layout
  7. The computed tab will show you how the style is being defined and where it’s being defined – what file and line number it’s being set on.
    Computed Tab in Firebug
  8. The Cookies tab will show you all the cookies on the page so you can easily edit or remove them.
    Firebug Cookies
  9. Someone asked why firebug over the built in inspector? Our speaker said that originally it was because it was the only option – and then it was because other developers kept adding on more features to firebug that aren’t in the inspector
    • for example there is fireftp – so you make changes in firebug, click send and it sends it directly up to your site.
    • And YSlow which suggests ways to speed up your site.
    • More add ons for Firebug

A lot more was covered, but these are the quick and easy tips and tricks I can share with you!

Leave a Reply

Your email address will not be published. Required fields are marked *