Firebug’s Hidden Gems

Like many people who develop sites these days I find that Firebug is an indispensable part of my toolkit. It has evolved from “yet another web developer extension” into a tool which is an essential part of any developer’s toolkit – at least if they’re using anything but plain HTML. Its facilities for observing, testing and tweaking what’s going on in your web application are countless and as far as I’m aware, without compare.

If you haven’t tried it then you’re severely handicapping yourself so I would recommend that you install it and start playing. If you already have it, then you’ll know what I mean – the moment you end up on a computer without it, you feel like you need it installed. But even having used it for a good while (years?) now, I’m constantly amazed by the attention to detail the developers and contributors have paid.

For example I was just poking around with a test site trying out some CSS and discovered something new tonight. Like me you’re probably used to opening up Firebug to tweak the CSS styles to see how things will look without needing to reload the page. I should probably point out that if you’re not used to Firebug and you think it is just for looking at things, then you’re missing a good 50% of the picture… In fact lets try it.

Select an element on screen using the “Inspect” button in the HTML panel. You’ll see the DOM tree open up to that element. Want to try out a change, say a different background color? Select the “BODY” element and then right-click. Lots of options huh? Select “New Attribute” and you’ll get to add a new attribute to the element. So here’s a quick way of testing a new background, border, etc. – add the attribute “style”. Here’s a perfect example of the attention being paid. Instead of typing it all it, you enter only the name, and then hit “tab” and you’ll move on to entering the attribute’s value. You don’t need to worry about the equals symbol or quotes because FB fixes that for you, you just enter the value you want to use.

The alternative to editing this inline is to use the Sub-Panels on the right of the HTML Panel. When you view the DOM tree you’ll see that the sub-panels on the right update. They show the Style, Layout and DOM for the selected element. Here again is an example of the detail. The Style sub-panel shows by default the CSS rules applicable to this element. It strikes through rules which have been superseded as well as the source file and line number. This is extremely handy for working out why your DIV tag has a bright blue background instead of bright red. But by checking an option in the “Options” menu you can see the additional rules set by Firefox (this may be a 1.3 track setting) and view the computed style rules.

Okay so yes, this was available in the DOM inspector, but the packaging is nicer, and it is combined with the particularly useful Layout tab which allows you to see, and modify, the settings for the layout characteristics – border, padding, margin, height, width and top/left offsets. If you haven’t discovered it yet (or read the manual, may be its all in there?), then you can click on any of the numbers in the Layout tab and edit them. Did you also discover (read about?) how when you hit tab you move on to the next number in the square? And how you can tab all the way around from offset to margin to border to padding in a loop? Oh and of course how if you shift-tab you tab backwards in reverse order? Yeah, that’s the kind of attention that I’m talking about.

Well if you found all of that and think that’s cool then there’s the surprise I found tonight back on the “Style” tab. I knew that instead of editing the style attribute you could also edit the styles for an element from with in the Style tab – if you didn’t then select your element and right click in the style sub-panel and you’ll see a host of options for editing the style, adding new properties, editing the existing properties etc.

So here’s the cool bit… Can’t remember what the CSS property is called? No problem they’ve thought of that too. Type whatever you can think it starts with and hit up/down. You’ll scroll through all of the properties that FB knows about. This includes all of the new CSS3 and -moz extensions that FFx supports. If that wasn’t handy enough hit tab to go on to editing the value… and you can do the same thing.

This was the “easter egg” I found tonight, having FB be intelligent enough that I was able to scroll through appropriate values for an attribute (handy with some of the obscure/new -moz… attributes).

For example; If your value is numeric then up will increment and down will decrement, seems reasonable. But if it is a known CSS attribute then you’ll be stepped through a list of possible options. For example, can’t remember what border styles are supported? No problem add an attribute “border-style” tab into the value field and scroll through them all with up/down. Can’t remember the (256?) named web colours? Again, if its a recognized colour attribute then you can scroll up/down through a list of known colours.

If that isn’t good enough try it with a combination attribute such as “border”. Try editing a standard CSS value like “border: 1px solid black”. If you edit this value and hit up/down then the border width will increment/decrement. Okay so you’re not impressed because its only doing it because it starts with a number. So double-click on the border-style (in this case “solid”) and yeah, you can scroll through a list of known border-styles. When you’ve found something you like you can repeat this with colour attribute. If the auto-complete of the names, the tab/shift-tab support wasn’t enough then this while not commonly used, just makes it a much nicer experience.

A huge thank you to Joe Hewitt, John J Barton, and everyone else for this amazing extension.

Colin.

Google’s Chrome Web browser; A First Look

So I decided to try out Google’s new web browser, Google Chrome (“Chrome”)

… so far I’m not sure on my opinion. I was, I think, hoping to be blown away. I was hoping that it would be Safari in Firefox’s clothing, and frankly it isn’t. It is just “okay” which is a little disappointing from the company that gave us Google Maps, Google Earth, and lets face it a search engine which at its inception was unique in not being part of a portal.