Anyone doing site design knows that pouring over HTML codes looking for that line of code that you need to change is tedious. Especially when you’re not entirely sure where to look or can’t find it within the thousands of lines of code. That was before I discovered FireBug.
Firebug is not just a HTML viewer and editor that runs on Firefox. It has other tools that are useful for web development. Head over to Firebug’s site for a list of features. I’m just going to show you some features that I really like about Firebug:
Men are visual creatures. Instead of pouring over lines and lines of code, now with Firebug you just have to mouseover the element that you want to inspect. In the example above, hovering over the title “Going Back to Film” reveals that the style class is from “titlecontent” and I instantly know the font family, size, and color. So if I ever need to change the font style, I just have to go look under “titlecontent” in the styles.css file and make the changes there.
These tooltips really help speed things up. Instead of having to go to different programs to figure out the color for example, now you can do it right from Firebug.
3. Instant preview
This is one of the coolest and most useful feature of Firebug. Instant previews.
This happens instantly so it’s really useful if you want to see if a particular style will be suitable without having to edit and upload the file to the server.
The above are just a few nifty features that I like about Firebug. It’s also useful if you want to see how something is done on another site. Maybe you like how they decorate their tables (HTML tables) and want to know the code behind it. Or maybe you like their fonts and couldn’t be bothered to “View Source” and go through all the code just to find the font-family. Now you can do it conveniently with Firebug.
So get Firebug today, and let it do wonders to your web development life!