Yes, we all love the Web Developer Toolbar. However, unless you’ve really taken the time to explore it, you’re probably only scratching the surface in terms of what it can do for you. I know I am.
Recently, however, I’ve been trying to learn some of its less obvious (but no less useful features). Here are 10 of them that you may not be aware of.
1. Display Line Guides (Miscellaneous)
Of course, you’re using a background grid to layout your site. But in case you’re not or you need to quickly check the alignment of some elements on a page (or perhaps within a graphic), this handy feature lets you add as many individually positionable horizontal and vertical guides as you want.
2. View Image Information (Images)
There’s a wealth of image-related features in the Images menu. However, I like the ‘View Image Information’ option as a quick way to see all the images on a page, including background images, all listed in a new tab along with paths, dimensions and file sizes.
3. View Color Information (Information)
I’ve lost count of the times that I’ve needed to look up color information about a page element. Colorzilla is often my tool of choice; however, clicking on the right color – say, for a heading – can sometimes be tricky.
It’s much easier to use this feature of the Web Developer Toolbar and have a complete list of CSS colors (with samples) laid out in a new tab.
4. Display Element Information (Information)
Are you still highlighting a page element and then choosing “View Selection Source” from the context menu to find out how it was coded?
Then stop and hit Ctrl+Shift+F instead. Click on an element to view its information (class/id, position, dimensions, etc). You can also see the ancestors for that element, which is really useful if you need to add some extra specificity for your styles to take.
5. View Page Information (Information)
Click on this option to access a variety of information about your page in a tabbed pop-up window. From here you can see basic information about your page as well as form details, link info and detailed image information (including file size, dimensions and a preview).
By the way, you can access this feature with one click by clicking on the green checkmark at the right of the Web Developer Toolbar.
6. Show Passwords (Forms)
The Forms menu is an invaluable tool for anyone building … well, forms of course. But the ‘Show Passwords’ option is probably one feature you never knew existed.
Most of mine are saved into Firefox’s password manager, so if I ever need to know what one actually is, it’s helpful to have this information just a click away.
7. Populate Form Fields (Forms)
Speaking of forms, this feature is very helpful when it comes to testing them out. If you actually need the form to be sent to you, you can change the default email address from within the Options menu (click on Miscellaneous).
8. Small Screen Rendering (Miscellaneous)
Ever wondered how your site renders on a mobile device? This option gives a close approximation and will at least show you if your sidebars are displaying above your main content.
9. Mark All Links Unvisited (Miscellaneous > Visited Links)
This is a useful feature for a couple of reasons. Say you want to take a screenshot with all your links in their natural state. Simply click and presto – a pristine page. It’s also useful if you’re running a usability test and you need to reset the page for the next task.
10. View Speed Report (Tools)
For some reason, you have to right click on the page and access the ‘Web Developer’ option from the context menu to get to the ‘Tools’ sub-menu. This feature runs Web Site Optimization’s Web Page Analyzer.
This service tells you how quickly your page loads at various connection speeds and also provides a wealth of other page-related information, including recommendations based on its analysis to speed up your site (tip: make your images smaller and don’t use so much HTML, CSS, scripts, etc).
Bonus: Edit HTML (Miscellaneous)
Sure we all know about the awesome CSS editing features that the Web Developer Toolbar provides. But did you know that you can also edit the HTML in the same way as well?
As well as using this feature for web development, it’s really handy for tweaking content – for example, if you’re trying to edit a headline or some teaser content down to fit within a certain space.
These are my favorite lesser-known Web Developer Toolbar features. What have I missed?
Also, if anyone can explain the purpose of some of the more esoteric features (for example, Enable Auto Completion, Show Window Chrome, Display Object Information), I would be grateful!
Thanks for this post. I have installed it but normally use firebug with mixed results, maybe now with some more knowledge in web developer I can even be better.
Currently with the website I am working on for my part time job I tested the ‘small browser’ and it does not look good for mobile phones 😛
Excellent tips, but at least in web developer toolbar version 1.1.4 “View color information” is located under “Information”, not “Miscellaneous”
Yeah some great info in this post. I love the edit HTML feature, between that and the edit CSS feature it’s totally changed the way I put sites together.
Customizing the Resize feature
In some developer scenarios it might be mandatory to test the work in some odd window’s dimensions rather than the default sizes the feature comes with.
Go to Resize » Edit Resize Dimensions and set a customized width and height for your tests.
*Jaakko* — good catch. Fixed.
Information > Display Title Attributes : Useful for reading the longer titles on images at xkcd.com
Also a hint for colorzilla. If you are having problems grabbing a color from a small area on a site first go to
Miscellaneous > Display Page Magnifier (in web dev toolbar)
When the magnifier loads click on the colorzilla box now you can use the magnifier to see small areas and when you click on them the color will be saved to colorzilla 🙂
Nice list, some things I did not know yet. Here the things I use quite often (next to some already mentioned):
* SHIFT + CTRL + S = zap stylesheet
* SHIFT + CTRL + Y = view styles applied on element after click (+ view the domtree it’s located in)
* SHIFT + CTRL + A = Validate Local HTML (viz. when viewing a file on localhost or after having it manipulated through JS)
* SHIFT + CTRL + H = Validate Page
* SHIFT + CTRL + C = View all CSS
* The resizing options (+ custom sizes to set!)
* The Ruler (handy measure stuff)
* Find Broken Images
That’s it I think 😉
*Aaron* — good tips, especially that one about Colorzilla. You know, I’ve used the magnifier in the past; I guess I just forgot about it.
*Bramus* — thanks for those shortcuts. Now all I have to do is remember them! It’s worth pointing out that to turn off a feature you just type shortcut again, although it would be nice if hitting Escape did the same thing.
View styles applied on an element is really handy. I love the way it pops up the information in the sidebar, ready for editing. Excellent tool for understanding and debugging complex style sheets.
Woah, *Bramus!* Thanks for those! Shift+Ctrl+Y is excellent! I never knew that!
*Christian*, thank you sooo much for this post! I have the web-dev tool bar installed at home, at work and on my laptop, and i only ever really use the ‘Display Element Information’ tool as I never really had a chance / nor understood most of the tools encompassed within the tool bar, but this post certainly has helped matters! Some really clever tricks there (like the grid lines etc) will definitely come in handy!
Thanks!
I had never used “View Color Information” before. Very handy. Thanks!
This is a great list of hidden features. I never knew there was a grid layout option and I always right-click (until now) to “View Selection Source”. I love the quick way the Toolbar allows validation checks
Nice list! Especially #2 and #3! Hahaha!
@Bramus!: Ctrl+Shift+Y really helped.
I usually use local validation found under Tools. Or sometimes, the one found on Notepad++ under
TextFX > TextFX Convert > Submit to W3C * Validation
Its been an year since I have used this amazing toolbar. I love to use it when designing a page since it shows you which blocks you have added if ever you got a layout wrong.
I was amazed to see the Edit CSS for any website just for seeing it your own way. Even the plugin Platypus can be used for this though!
Now the first thing I do whenever I have to install Firefox is to install the web developer toolbar add on! 🙂
Thanks for these; I’ve had the toolbar installed forever, and never really explored it thoroughly until now. This is really useful.
Great list! I’ve also found the ability to add your own tools to be rather handy. For instance, you can add a tool that calls up the Internet Archive Wayback Machine from whatever page you’re on:
Tools → Edit Tools… → Add…
Description: View Wayback Machine
Tool Type: URL
URL: http://web.archive.org/archive_request_ng?collection=web&url=
The amazing thing about the web developer toolbar, is that every single time I have imagined a tool to help me debug a website issue, I have found it by searching through the menus.
The only problem is that 80% of my debugging has to be done in IE! Argh!
Information > Display Title Attributes works, of course, but there’s another fix for long titles that doesn’t require user interaction.
why is “View Page Information” in the list?
it’s a standard feature of Firefox and this extension doesn’t add anything to its functionality.
*gonchuki* — I’m not familiar with that feature in Firefox. How do you access it?
I would guess that for old pros at web design these things are all well-known, but I have to say, for someone like me, who’s trying to put together his first web page, this is a godsend. I’ve been having particular problems with passwords, and so that was really helpful, but the tip I loved the most was the screen rendering tip. My site isn’t really for mass consumption – it’s only a class web page for the college courses I teach, so I don’t know who would ever care to access my page via a mobile device, but knowing they could is pretty awesome. And maybe once I know the page will work in a smaller version, it will give me options in terms of making sure they can always access assignments. I so long for the day when every excuse loophole will be closed forever.
a wealth of information here i new about some but never gussed there was so many
Christian, right click on the page > “View Page Info”.
Brilliant! I’ve been using the toolbar for a couple of years now and had no idea it could do all that. It goes to show that you can take things for granted – time to have a good explore to see what else I’ve been missing.
I can’t live without this plug-in. I don’t know what I’d do if i didn’t have it, besides pull my hair out. #10 is the only one I didn’t know about. Thanks!
A stab at those meanings (I scanned the comments, and I don’t think anyone’s mentioned them yet):
Enable Auto Completion – enable/disable auto completion on forms/elements that may have it disabled in firefox settings (I think)
Show Window Chrome – shows the toolbars, address bar, etc. in windows that currently don’t have them shown. helpful with javascript window.open()s that like to hide all of that
Display Object Information – I’m guess it’s like display image information, etc. except that it works on <object>s rather than <img>s.
Sorry, just to add to this – I used to use the web dev toolbar all the time. Then I found out about Firebug. Now the only thing I use the web dev toolbar for is ctrl+shift+s to quickly disable/enable styles. Firebug tells you all about styles (including superseding rules, etc.) and you can edit html and styles, and quickly add/change/delete attributes from tags. There’s a javascript debugger and profiler, a net profiler (“Why doesn’t my background image load? Ahh, I pointed it at imades/bg.png”) and AJAX monitoring, complete with request/response headers, post/get params and the response body and how long it takes.
Well basically it’s amazing and in my mind it’s a load better than web dev toolbar, especially since it officially became version 1.
http://www.getfirebug.com/ – it has more info on the features, too…
*Al* — thanks for the info. ‘Show window chrome’ may come in very handy; in fact, I just used it tonight on a popup window!
Oh, and I’m aware of Firebug. It’s just that I’m so familiar with the WDT that I’m reluctant to start using a new tool. I’ll check it out again though.
Thanks for the tips Christian. I use the toolbar, but there were a few of these features that were new to me.
I’ve always loved your blog design by the way!
Great tips! Thanks!