How-To Use Firebug: Part I
By Josh | November 21, 2007
I always wondered what all of the talk about Firebug was. I downloaded it once and didn’t see how it could be that useful. A few days ago, I downloaded it again. Firebug is actually a really great tool for many things, but what I’m going to touch on here in Part I is how to use it to quickly make changes to your sites source code.
When I first started messing around with it, I found out that you can actually make changes to your sites code and see the changes happen in front of your eyes. The first time that I downloaded this, I didn’t know you could do that. I thought you could just view the code and find errors so that you could fix them. It is very nice to be able to tweak your code just how you like it. When I first started tweaking, I was wondering if there was any way to save my changes through Firebug. Well, there isn’t (at least from what I can tell). You end up copying your edited code and pasting it into the file on your server that you want to apply the changes to. This way, you can test out many different things before you actually apply it to your code.
I used this to change a couple things on my website that weren’t appearing the way I wanted. One of these things that I changed was the way that the “Top Posts” box appeared. It looked fine on Firefox, but it didn’t look so good on IE. There isn’t a Firebug extension for IE, unless you want to use Firebug Lite, which isn’t as good as Firebug. I was able to apply changes to my CSS Style Sheet so I could see the changes before I applied them to my site.
All you have to do when you want to do some editing is:
- Click the green check mark icon in your status bar on Firefox
- Click the Inspect button at the top.
- Click on the area of your website that you want to edit.
- Click on the Edit button beside the Inspect button.
- Tweak the code to the way you want it.
- Copy and paste the code into your files on your server when you have it tweaked the way you want.
It’s very handy for making changes without everybody else seeing them. For fun, you could also make temporary changes on any website that only you can see.
In Part II, I’ll cover how to use Firebug to obtain hidden files, i.e. videos and music, from different sites. Make sure you subscribe to my feed or check back later.
 |
Related posts |
Can Firebug be used to track HTTP GETs including the request header and the responses from the server including the response header. Will it show all the HTTP GEts done when an HTML page is being loaded and the page references resources that require HTTP GETs?
Thanks,
Norm
Many thanks for this “know how” post,
I’ve looked at several videos and tutorials, but none of them tells me what to do after making changes to the design. Know it is very clear.