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.
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.
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
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
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.