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!