Browser Toolbars for web development
All of the browsers now have developer tools, either in-built or as add-ins.
and give some indispensible tools for the web developer and designer.
They offer one-click page resizing; highlighting of tables, divs, images etc;
etc. If you're not using these you really should and will wonder how you managed
without! The tools in the different browsers are slightly different so it's
worth exploring them all.
IE Developer Toolbar
The IE toolbar has a variety of options, allowing you switch IE mode,
At the moment (IE10), the dev tools in IE don't identify styles from media
queries when you look at the applied CSS. With the widespread use of responsive
design, this is a serious omission which has been rectified in IE11.
Firefox Web Developer Toolbar
The Firefox 'Web Developer' toolbar is available from the FF
extensions download site or directly from it's creator at:
One excellent feature is the 'View Responsive Layouts'
option on the resize menu (4th screenshot above), which displays a series of
views of the page resized to common mobile/tablet sizes. It's quick and
The toolbar will run on any platform FF supports: Windows, Mac OS X and Linux.
The Firebug Extension gives in-depth investigation of
that then gives you the Firebug Console in IE, Opera or Safari.
Chrome Developer Tools
The Chrome developer tools are arguably the most complete and
give a wealth of information, not only about the page styling and
layout, but of it's size and speed.
Opera Developer Toolbar
Despite the change from their own 'Presto' engine to the Chrome 'WebKit'
based 'Blink' engine, the Developer Tools in Opera are still different
to the Chrome version.
Whether this continues to be the case remains to be seen.
Accessing the tools isn't immediately obvious. First, if you aren't
already doing so, you need to enable the menu bar. Do this via the large
Opera button and then 'Show Menu Bar'. One you have this, use 'Tools -
Advanced - Opera Dragonfly'. This then opens the developer tools window.
The tools are as good as or better than the other browsers tools and
well worth looking at. It's worth installing Opera for the tolls alone.
Safari Developer Tools
The Safari browser has a built in
'Developer' menu that just needs adding to the main toolbar.
First, if not already there, enable the Menu Bar using 'Settings -
Show Menu Bar'.
Then go to 'Edit' - 'Preferences' and then select 'Advanced' then simple
check the 'Develop' box, shown below.
Having done this the 'Develop' menu is shown and has a variety of
options (first image)
Not surprisingly, being a WebkKit browser, the tools are similar, though not identical to those found on Chrome.