I’ve been doing a lot of web development lately. Mainly someone else supplies the design, and I implement a WordPress site to that design. I’m using the Thesis theme (affiliate link) as the basis of my work because of its power and flexibility.
Inspect Element with Firebug.
As I work though I’m often baffled by something: where did that border come from? How can I make that gap bigger? Why isn’t this text changing colour?
Sometimes it’s user error — I spent an hour the other day trying to get rid of a gap below an image, only to find the image included a 1 pixel white line at the bottom. There was no gap. Sigh.
Saving my bacon 50 times per day is a Firefox extension called Firebug.
Firebug allows me to Control Click on an item in a web page in Firefox and choose Inspect Element. The Firefox window divides, so the bottom portion displays HTML code on the left and CSS on the right.
If you chose Inspect Element then the relevant part of the HTML will be selected on the left, and you can see all CSS rules that apply to that portion of HTML on the right.
That’s nice, but now it gets really interesting.
Select a portion of HTML in the Firebug window and the relevant part of the web page is overlaid in light blue. Margins and padding are shown with yellow and purple, respectively.
Try out CSS changes with Firebug.
But even better: edit the relevant CSS on the right hand side of the Firebug window and changes are immediately reflected in the main window.
My second screenshot shows that I added a red background to the div with the class teasers_box.
This ability to adjust the CSS on the fly is invaluable. Handily, you can adjust values by increments with the up and down arrows.
For example, set a margin to 0em. Then, while the cursor is still in the 0em press the up arrow once and that value becomes 1em. Set a color to white then press the down arrow once and it changes to whiteSmoke.
Today I had to tune up a 3-column layout. Being able to adjust widths 1 unit at a time and on the fly meant I could quickly and easily establish the correct widths and get all 3 columns lined up.
I now can’t imagine being able to develop a web page without Firebug. While I don’t use Firefox for everyday web browsing, it’s certainly an essential tool for developing, because of Firebug. Give it a try.
