EW Resource

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; links to the W3C and WAI validation pages; disabling of JavaScript and CSS, 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,

  • Switch IE mode
  • View applied styling cascade
  • View page element timings
  • View source in different ways
  • Change the user agent string
  • Validate the page HTML, CSS and accessibility

 

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:

http://chrispederick.com/work/webdeveloper/

  • Image tools
  • Page element information
  • View applied styles
  • View Responsive Layouts

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 convenient.

The toolbar will run on any platform FF supports: Windows, Mac OS X and Linux.

The Firebug Extension gives in-depth investigation of your CSS, HTML and JavaScript and allows live inspection and editing of the code.

http://www.getfirebug.com/

 

There's also Firebug Lite, a JavaScript file you can insert into a page that then gives you the Firebug Console in IE, Opera or Safari.

http://www.getfirebug.com/lite.html

 

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.

  • Chrome developer tools - Elements view
  • Chrome developer tools - Network view
  • Chrome developer tools - Sources view

 

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.

  • Interactive layout view

 

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.

image of Safari tools

   Having done this the 'Develop' menu is shown and has a variety of options (first image)

  • Develop Tools list with User Agent change showing
  • Page element and CSS cascade
  • Network load times

Not surprisingly, being a WebkKit browser, the tools are similar, though not identical to those found on Chrome.