Firebug primer by Hugo

For those that are not aware Firebug is a add-on for Firefox, and is essentially a development debugging tool, that allows you to inspect various aspects of a web page.

It has become – for those that have used it for a while – one of those indispensable tools that make day to day coding life that much more productive.

This post is by way of introducing those unfamiliar with it to it’s most basic functionality, I do not attempt to explore any of the deeper functions but concentrate on the HTML / CSS tools available.

The image below shows the Firebug console on initial activation.

The HTML tab is selected and this shows an initial view of the pages markup in the panel to the left hand side at the bottom. To the right is a view of the CSS rules that apply to this page and to this element specifically in the initial view and is selected using the tab above marked ‘CSS’ (more about the other views later).

The image above shows the options selectable for the HTML markup view.
The important options are the three bottom ones:

  • ‘Highlight changes’ this will place a background to the element being viewed or that is receiving focus and helps greatly when the markup dynamically changes
  • ‘Expand changes’ this feature will automatically reveal collapsed branches in the markup (note the plus sign against the element nodes in the makup view which are clickable to inspect nested detail) when the page refreshes or one inspects an element in the main viewport (see later explanation on ‘inspecting’)
  • ‘Scroll Changes into view’ very useful as this moves the html view to the element in question rather than you have to find it in a large and complicated page

Next is where Firebug starts to get interesting!

The image below shows a view when one uses the ‘inspect’ button whilst in html view

Note the blue bounding border around the text in the viewport; when you click the ‘Inspect’ button you can then move your pointer over any portion of the rendered viewport display, as you highlight elements they will be demarcated by the blue border, as this happens you will notice two things occurring firstly the html markup view will be scrolling to the element that you have hovered over and the CSS view in the right hand pane will jump to the specific CSS rulesets that style this element.

When an element is highlighted you may click on the element and this will ‘fix’ this element in the two view panes in Firebug allowing you to further inspect aspects without loosing the focus on that element.

The image above shows a further method to inspecting elements and one that provides a further level of detail that is extremely useful. By clicking on any element in the left hand Firebug pane showing the page markup you will be able to highlight the elements padding and margins, this can be seen as the yellow highlight which represents the margins of the element and the purple highlight which represents the elements padding applied.

Moving on to the CSS aspect of Firebug demonstrates some invaluable tools and information that make dealing with CSS cascade and inheritance much easier and is perhaps is a feature above all others that would justify installing and learning to work with Firebug.

Looking at the right hand pane showing CSS rulesets shows us some very important information firstly it show us all the rulesets and properties that have been applied to the element highlighted in the left hand pane but much more than that it shows us specifically the specificity order of those rulesets in other words it shows us those rules that carry the heaviest most important weight first it then shows rulesets of a lesser value but that have been applied to the element, and thirdly it shows us properties that have been inherited by the element from parents or ancestors, note the “Inherited from div.content” heading, this is telling us that there was a font-size applied to any div with a class ‘.content’ and that as .submit and/or a paragraph was a child element of that div.content it had inherited that font-size; which brings us to the final feature of this CSS view, note the strikethrough on that inherited ruleset font-size, Firebug is telling us that in actual fact although this property was inherited in reality it was overwritten bu a more specific font-size described on the child element.

This set of features and information make debugging CSS problems extremely fast and far easier than having to wade through the stylesheet trying to understand where there might be an inheritance or specificity issue. On a final note please observe the line numbers to the right of the rulesets these correspond to the actual line numbers in your stylesheet which further speeds up locating specific rulesets; In the examples I have used grabbed from the forum It went unnoticed until too late that cetain styles/stylesheets appear to be ‘packed’ or ‘minified’ and thus all rulesets are in fact collapsed to a single line to preserve space and reduce file size, hence we mainly see ‘(line 1)’ normally this would show as mentioned earlier, an example of actual line numbers can be seen if you look further down at the third rulest that has a file name html.css and a line number of ‘(line 65)’

A further aspect of the right hand view can be seen in the image below where the ‘layout’ button has been selected. This speaks for itself but briefly it shows the aspects of the elements box model.

Lastly in either viewing pane one can edit in real time either the markup or, as shown in the image, the CSS rulesets, you can add new properties, delete existing ones or simply modify existing ones.

Conclusion:

Firebug is a very powerful tool and one that simply increases ones productivity; I can’t stress enough though that I have only scrapped at the surface of what it can show and do and concentrated on the basic HTML/CSS features, if you’re working with client side scripting Firebug becomes equally indispensable in allowing you to observe in real time dynamic changes to the page.

There are other aspects that I leave to the reader to discover but once you do you’ll realise why you can’t really do without this tool 🙂

Let me check my calendar

OK, this is 2008. I know there are tons of hack web designers out there that bought a copy of dreamweaver but please give me a break. Hey, I’m not against hacks, I mean someone’s got to do pages for $10 or else the bait shop won’t ever get a web site. I just want to help you not look completely incompetent.

I have my speakers on because I sometimes like to listen to music when I’m working. A lot of other people do, too. When I go to a web page I. DO NOT. WANT. The accursed thing to scream at me or play me a flourish or orchestral hit. Sometimes I have my speakers on at night when others in the house are sleeping and that’s not only unprofessional, it’s just not courteous.

So please, since for some reason you refuse to do away with your stupid, worthless, out of date since 1997 splash pages at least get rid of the idiotic automatic sound. That is, of course, unless you enjoy being a laughing stock and enjoy your marvelous hit counter to remain at one visit (from your mother, she’s the only one that would bother to look).

I was going to post links to offending pages but the last 5 I ran across have been from the same “web design” company. 🙄

Third annual CSS Naked day

April 5th, 2008 is Bette Davis’ 100th birthday and it is also the third annual CSS Naked Day. If you are viewing this on April 5th then you will see no styling. Any other day it will look normal. A properly written web page should fail gracefully and still be useable by browsers that do not understand CSS. It is the web standards way. 🙂

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and; well, a fun play on words. I mean, who doesn’t want to get naked?. Feel free to see the original reference article for more information.

Second annual CSS Naked Day

April 5th, 2007 is the second annual CSS Naked Day. If you are viewing this on April 5th then you will see no styling. Any other day it will look normal. A properly written web page should fail gracefully and still be useable by browsers that do not understand CSS. It is the web standards way. 🙂

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and; well, a fun play on words. I mean, who doesn’t want to get naked?. Feel free to see the original reference article for more information.

A new guru

It seems today that I was given the distinct honor of being named one of the New Guru’s for css creator.

I am humbled and grateful and I suppose now I am actually going to have to learn what this CSS thing really is. 😆

Thanks to Tony for the finest learning forum online!

I’ve had enough. Too many jerks and not enough thanks or help. Four or five guys actually helping people that take the help and split, never to be seen again. Noobs calling out the long-timers. Braggarts that can’t accept that they may be doing something incorrectly. Insults and other childish reactions. I did receive a thank you once or twice but the overwhelming amount of abuse just sent me out. On top of all that I usually ended up helping some guy that fancied himself a web designer because he accidentally bought a copy of dreamweaver. It didn’t bother me until I saw the jobs these guys were getting paid to do. Big jobs. Given to someone that can’t do that job unless I help them. Help I was expected to give for free. Being a moderator I could delete users from the site. Today I exercised that right on myself. I know Tony and the moderators mean for it to be a site for helping but the takers and abuser ruin it. I wish you the best Tony. Good luck to you, along with Hugo, Gary, Tyssen, Chris, Deuce and Ed Seedhouse.

Ow! My bandwidth is clogged.

Only one thing annoys me more than uncompressed images and that’s SPAM!

A decent digital camera is cheap these days. Just about everyone owns one. Unfortunately, not everyone understands that a 2 Megapixel jpeg weighs in at about half a megabyte. Don’t get me wrong, I like when people send me big files to work with but having 45 half-meg pics on a web page all shrunk down to size using height and width attributes is nothing but annoying, even with broadband. That’s not to mention those that use these gigantic files as an avatar on their favorite forums.

Speaking of forums, those that allow image uploads really get abused by these guys. Come on, people, let’s compress and resize those images and treat your favorite forums better. Bandwidth isn’t free, ya know?

OK, so let’s get down to business. I use Adobe Photoshop so I’ll show you how to get those images down to size the way I do it.

Step one – Crop and Resize

Don’t use height and width attributes in your image tags to resize your images. Make the picture the size you need it to be. This is the number one way to reduce image size and bandwidth use.

Here is my test image [edit – test image removed because some morons were hotlinking to it] weighing in at 796kb straight from my 2.2 Megapixel Kodak DX3500 (which exports jpegs at 230 pixels per inch). Computer monitors usually show information at 72 pixels per inch so that is how I set all of my images.

I am going to open it in Photoshop and crop out any parts I don’t want to show in the final product and then go to the Image menu to “Image size…” and change this:
Original image size
to this (notice the resolution):
New image size
resulting in this:
Resized image
which is a 288kb file. Much better but not good enough.

*Note – If, after resizing your image down to size, the image looks jagged and unnatural, then undo the resize (in the edit menu) and then apply a little bit of Gaussian Blur in the Filters menu and then resize it. Who knew blurring an image can make it look sharper when you shrink it down? 🙂

Step two – Compress

Next I use the “Save for web…” item in the File menu.
Save for web menu item
and simply set it to “Medium” under the presets (for jpegs).
Medium setting

Now if you are going compressing a logo or similar graphic (not a photograph) with only a few colors or large spots of a single color then a gif will serve you much better. If you need color matching you don’t want to use jpegs because their compression is based on throwing out some information to get the files smaller. Some of that information is color information and a jpeg over a gif background will sometimes not match but the differences will only show on certain platforms using certain browsers.

After compressing my picture this is the result:
Compressed image
coming in at tidy 28kb. That’s about a 90% savings in file size from the resized and over 99% savings in file size from the original.

So, come on, people! Let’s compress those images and save the bandwidth!