Exploring the Web Developer Toolbar
Last time we talked about Firebug, the Javascript Debugger. This time I’ll write about the Web Developer Toolbar for Firefox, by Chris Pederick. This invaluable tool really changed the way I work, so I’m really excited to explain all the functions it has.
First of all, you can disable or enable the toolbar as needed, I even dropped a button on the standard address toolbar to show and hide it as needed and maximize my screen estate.
From left to right, the commands of the toolbar are Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize, Tools, View Source, Options.
I don’t really want to go on a very long explanation of every single command, it would be maybe boring.. also, the documentation is really good, so better check it out.
Let’s take a look at the commands I use more.
Disable/Cache, Disable/Javascript/All Javascript, Disable/Cookies, Disable/Clear Session Cookies, Disable/Delete Domain Cookies… these don’t really need any explanation at all.. just assure you, it’s good to have them, they make you cut many corners.
CSS/Edit CSS, this is a real beast. It opens a CSS editor (I’ve got a wide screen so I repositioned it portrait on a side). It has no autocomplete functions, nor syntax coloring at all (it’s more than a simple text editor indeed, I would love to have these two things). So why use it instead of the fully equipped one that comes with Dreamweaver, or even a standalone software?
Because the changes made with the CSS editor in the toolbar reflect immediately in the Firefox window, so you can see the effects in real time. Before that, it was a matter of changing a value, saving the file, uploading on the server (at that time I didn’t even use a local test server) and reload the page, change a little that value again an so on. So, it’s invaluable, you can peek at other page’s stylesheets and understand how that effect was achieved by tweaking values yourself.
Firebug has a CSS editor too, but it’s better for on the fly modifications that for full writing. I find myself more and more skilled at writing all the styles of a document in a single session, from top to bottom, using the toolbar’s CSS editor.
Well, let’s go ahead. The function CSS/View style information is good, it shows the full select path of the hovered element, but I find myself using more the Inspect function of Firebug, because it gives additional data, like the DOM attributes of the element, the HTML rapresentation, draws a border around the selection and so on. Indeed, some commands of Firebug and the Web Developer Toolbar are similar, I have both and pick this function from Firebug.
The Forms menu is something I don’t really use that often.. yet. However it has some weird commands worth exploring, like for example the Forms/Populate Form Fields (it writes the name of the form element as a value, so you don’t have to fill your form each time to try it), Forms/Show Passwords, Forms/Convert Form Methods/.. (convert form methods from GET to POST and vice versa). Interesting, aren’t they?
There’s only a command I use almost everyday, on the Images menu, called Images/View Image Information. It opens a new tab listing all the images of the current page.. Did you try it on the new Apple.com AJAX page? Just don’t think of it as a “free buffet” function, it’s never a good reason to steal other people’s artwork, but you can understand very interesting things from that page. For example, Apple uses extensively PNG files for the trasparency effects, and tries to reduce the latency times by incorporating many small images in bigger files, using the so called “Sliding Doors” technique.
If you need inspiration, you’ll find it into the Information menu. Try to go to a page and call Information/View Color Information, you’ll get all the colors used, with the hex numbers and a sample! And the IFrames are listed apart, with a collapsible grouping.
Information/Display ID & Class adds some ‘tags’ to the page, with IDs and classes of each element. Useful for exploration of other sites, and debug. I used the Information/Display DIV Order function instead when I wasn’t sure I closed a DIV and wanted to know the exact render order. It surrounds DIVs with red borders.
The Miscellaneous menu has some real gems, the Miscellaneous/Edit HTML (a realtime HTML editor, useful for debug and trials, but I don’t use it very often), Miscellaneous/Display Ruler (adds DHTML rulers on the page and a measure toolbar, love it!), Miscellaneous/Small Screen Rendering (check your page as seen on a PDA, sorta emulates the Opera function!) and Miscellaneous/Display Line Guides (if you ever used them in Photoshop, you’ll fall in love with this function, it makes aligning elements faster and easier).
The Outline menu is very intuitive, I find myself studying other websites and constantly using Outline/Outline Deprecated Elements to spot no-nos in HTMLs, Outline/Outline Tables/Tables to check for table designs, and Outline/Outline Positioned Elements/… to see what elements are out of the flow and where the designer choose to make a div float.
The only two commands I found useful in the Resize menu are Resize/800×600 (so you can check your design at a lower resolution) and Resize/Edit Resize Dimensions (I always add 1024×768 when I install the toolbar because I work at a wider resolution). The Tools menu has a list of links of validators, while the View Source/View Generated Source command will show you the HTML source of the page you are viewing, after the Javascript and AJAX operations have modified it, a real life saver.
Finally, three icons show if you are in quirks or standard mode, and if your CSS or your Javascript has errors.
To install go to the the Chris Pederick web site, there are versions for various languages and browsers. However, always check up if the localized version is up to date with the main one.