Firebug demo

Firebug Demo: How to Troubleshoot CSS

Today’s offering is a brief screencast showing you how to use the Firebug browser plugin to identify and fix CSS issues on your website. For my example, I’ll answer a CSS question from the StudioPress forums.

This is my first screencast. Ever. So forgive me the extra clicky-clicks, throat-clearing, and uhhhhs…

Firebug Demo Video:

Links mentioned in the screencast:

8 thoughts on “Firebug Demo: How to Troubleshoot CSS”

      1. I worked with firebug and loved it.
        Then I moved over to Chrome and tried the dev tools – not better just different.

        I’m still fascinated by the fact that you can change CSS on the fly!

        I like to work with both the Genesis Extender custom CSS panel open and dev tools open.
        Then I can copy and paste from dev tools into custom CSS panel and make changes there.
        If the change is OK I can just hit save.

        1. I have noticed that if I get really granular on some CSS, Chrome does a better job of “unveiling the mystery” – I thought I was looking through the Firebug lens, but possibly it’s some developer tools creeping in. I’ll keep playing!

    1. Thanks David!

      Great tip on the headset. I’ve seen others wearing them, but didn’t realize it was tied to audio quality.

      What tool do you use for screencasting? I tried Screen-Cast-O-Matic. Also had a recommendation for screenr.com that I need to check out.

      Cheers,
      Carrie

  1. Hello Carrie, great tutorial my friend very easy to understand. I just love StudioPress’s themes because there’re so simple to customize.

    Thank you so much for the share my friend.

Leave a Comment

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

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.