What You Didn’t Know About The Web Developer Toolbar

There can be no denying that the web developer toolbar is not handy and useful for a variety of reasons – but if you haven’t taken the time to explore this toolbar, like most web developers, you have probably only just scratched the surface of features it has to offer.

Images Option

• View Image Information

This feature offers a quick way for web developers to see all of the images on a given page (including those that have been used as backgrounds). The images are listed in a new tab, along with their paths, dimensions and file size – all for quick and easy reference.

Information Option

• View Colour Information

It is not uncommon for web developers to be in need of looking up colour information for a particular element – perhaps they need to match another element to it. This feature will provide you with a list of CSS colours (complete with samples) in a new tab.

• View Page Information

This feature provides you with access to a range of information about your page, all in a tabbed pop-up window. As well as basic information about your page, you are able to view form details, link information and detailed image information.

Miscellaneous Option

• Display Guide Lines

Generally, web developers use a background grid to layout their website, but if you need to quickly check the alignment of particular elements (such as images), this feature allows you to add your own guidelines. They are individually positionable and can be made either vertical or horizontal.

• Small Screen Rendering

This feature allows you to see what your website would look like on a mobile device, such as a smart phone or iPad. Even if the view is not perfect, it is a very close estimate and will not differ greatly to the real thing. It also gives you the opportunity to see whether your sidebars are displaying above your main content.

Tools Option

• View Speed Report

This feature allows you to determine how fast your website loads at various connection speeds. You are also able to access a variety of other page related information, including recommendations (based on the analysis) of how you can speed your pages up.

Next time you are using the web developer toolbar and find yourself facing a problem, why not try out one of the above shortcuts or tricks? Not only will your job be made that much faster, it can also help you to vastly improve your web development process.