Ok, that’s a really mixed metaphor. I’ll ask you to let it slide today.
I stumbled across something called Firebug. It is a plug-in for Firefox and it does all of these things to help web developers. For the most part, I don’t use too many of them because I haven’t had the time to figure out most of what it does, but it does do one thing so perfectly, that I must share.
I’m a freelance writer. But, I also do many other things for our clients. We do so much, in fact, that I’m looking into to re-branding as business consultants. (The catch is how to do that without losing those who love us because we are freelance writers…) One of the things we do is websites – building them, fixing them, designing them, and so on.
Often, we use templates, or we are called upon to work with something that is already in place. Either way, understanding the code is paramount to getting things done. One area that this can be difficult is in the CSS. With inheritance and so on, it can be difficult to find the right spot to make changes. Even worse, it can be difficult to know what those changes might end up looking like.
Firebug is Great
Enter Firebug. Firebug allows you to right click on any thing in any webpage (yours or otherwise) and do something called Inspect Element. When you do, you get this:
Click on that picture to make it bigger and you’ll notice that in the webpage displayed above the Firebug panel I’m looking a some text gone awry. Specifically, it is too big and blocky. I have right clicked it (you don’t have to highlight, I did that to make it easier to see) and chosen Inspect Element.
I can see that this text is wrapped in <h2> tags. So far, no big deal, but in the other panel, we have GOLD, Baby!
(Yes, I am aware that using the h2 tag here is not optimal, but that is for a later day.)
As you can see, the element that is giving me the wrong text is not the main <h2> tag, but rather the .post h2 tag. Now, I won’t spend a bunch of time editing the wrong thing, or searching back through DIV tags to try and figure out which h2 tag I need manually. I’m already sold. But, wait, there is more!
The Firebug panel also tells me exactly which line in the style.css file this tag is at so I can jump into notepad++ and scroll with reckless abandon until I get to line 264 and make my quick easy edit.
Wait! There is still more. If I click where it says “font-size” and change the value in the Firebug panel, it will preview it for me instantly on the webpage panel. So if I want to see what 1.5em will look like instead of 2.5em, I just change it in Firebug to get a preview. No actual code was changed, no files were saved, and I don’t have to remember what I did in order to back it out! I can play with the numbers all day until I get what I want and then edit line 264 just once!
How great is that?