Sometimes when you discover you wonder how you had never seen it before.
You know, things like Coca Cola in a glass bottle, Pandora (not the Planet), and WordPress, all very practical and awesome things. These things change the way you operate and make you want to tell everyone you know about them.
Today my friends, I want to let you in on something that I have discovered, Firebug. It was an interesting discovery mainly because I had it on my computer but I never understood how to use it nor did I have a reason to use it. This all changed the day I spent the night at Jared Erickson’s house (@alliswell).
The OMG Moment
I have heard a lot of discussion about firebug and its great use, but I never dove into understanding why it was awesome. I knew that it helped web designers, and I knew that if I clicked on the bug at the bottom right corner of my browser I would be able to see page information and some code, but I did not realize that I could see the entire layout of a page and even edit the page through one simple little tool called the inspection element.
This opened up a whole new world to me and I want to make sure that you know about it as well. It was, for lack of better words, an “OMG” moment.
So, here is a very simple guide to installing and using firebug…
For some readers this will be very basic and maybe even boring, but for guys like me that have heard of these tools but do not know what they do, this is for you. Firebug can be set up and running in one easy step.
Installing Firebug
The first thing you are going to want to do is make sure you are running firefox (or chrome).
None of that internet explorer junk or even safari, you have to be running firefox for firebug to work. After you open up a new browser in firefox you want to go to to add-ons for firefox and click “add to Firefox (go here for install).
Once you have added this to firefox you are ready to move onto discovery. Be sure to configure the add on to your liking (I personally have it set up at the bottom of my browser).
Using Firebug
There are several uses for firebug that make it a must install add on in Firefox or chrome. Here are a couple that I am discovering:
1) Inspect Tool
This feature alone makes firebug worth the money (which is ironic because it is free). This tool allows you to select any piece of information on a site and find the CSS, style sheet, even its line location inside of your theme. Very easy to use, and does exactly what it says, inspects the page.
2) Redesign your blog
The main feature that I use firebug for is to mess up my blog without actually messing up my blog. This program provides me the ability to change background colors, change padding height, and even change the alignment of the body or sidebar. The best part, you cannot screw anything up. Instead this just gives you a draft of what it could look like and what you could do. For someone who does not know a lot about PHP or CSS, this turns out to be a safe way to edit your blog design.
3) Understand the Setup
Another great feature is the ability to see where things are located and set up. Firebug acts like a teacher educating eager students on the ways of hacking up a blog theme. It teaches you how the CSS is written and put together and really starts to bring some order to the chaos.
Firebug is a must add on for any blogger. No matter how much experience you have with editing and design, firebug saves time and effort.
J.C. says
Totally agree! Great Post. For someone who knows very widdle code, firebug is freaking sweet. Plus I can go to websites and totally cheat to figure out how they did something…
Great, Great Post.
Kyle Reed says
Exactly, I am the same way. It really helps to teach me about CSS and lets me see behind the curtain, so to speak.
Rod Bayron says
Have to agree wholeheartedly. In a CSS heavy environment, Firebug is invaluable (especially if the CSS was coded by someone else). Being able to temporarily disable specific parameters on inherited styles helps the debugging process tremendously when something goes completely wrong.
I also agree with you; being able to edit the HTML and see the results is way helpful.
Kyle Reed says
I think that is my favorite feature. Honestly I can make a lot of changes and not worry about breaking things, that is the best part.
Bo Lane says
I’ve used Firebug for Firefox for quite some time now. I’ve also used the light version for Chrome but haven’t seen it operate nearly as good as it does for Firefox. Either way, Firebug is a great resource for all things web development. Great post!
Kyle Reed says
Yes, you hit the nail on the head. I hope to be using it for a very long time and continue to learn.
kylan says
Firebug is an amazing tool. Best of all, it’s free! It really takes the mystery out of CSS and site design.
Kyle Reed says
Exactly, I love that. Free is great.
PhillipGibb says
yeahhh, it’s cool.
the only thing I would improve, if possible, would be the adding of style element to html elements that have no explicit style. at the moment one needs to add a style property to the tag. If FireFug could bind the style to a temp style sheet that would be perfect.
PhillipGibb says
awesome, I can’t life without it and find it frustrating 🙂
Kyle Reed says
Now for it to just really work with Chrome and work well things will be perfect.
PhillipGibb says
that’s one thing that bugs me with Chrome is that the so-called Inspect Element (devtools) looks very useful in viewing elements, styles and scripts but appears to miss the one thing I need the most : element editing.
Jared Folkins says
Kyle,
You may also want to touch on that Firebug allows you to see the GET/POST data that is sent to and received from the server during AJAX requests. That is insanely helpful when programming. Even should people not be into programming, there are a lot of wordpress tools doing ajax requests, and firebug will help you figure stuff out when they break.
-peace
jared
Kyle Reed says
I am going to have to go and discover this now. Sounds interesting
trey says
holy crapola!!!
this add-on is awesome..
Kyle Reed says
That was my reaction to when I really started to discover what this add on could do. Holds a ton of power and can help out your design and coding tremendously.
PhillipGibb says
Something else interesting that is good for CSS development and other things: http://chrispederick.com/work/web-developer/features/ another firefox extension that comes up as a toolbar. look extremely useful. E.g. I can disable custom.css and see the effect, disable JavaScript, and hide images.
Tim Lemons says
Any chance a video tutorial could be made to accompany this? Would love to see changing stuff on the fly in action. I think I am missing something.