Browser Toolbars for web development
Developer toolbars are available for IE, Firefox, Opera and Safari and give some
indispensable tools for the web designer and developer.
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
IE 'DevToolBar' is at Beta 3 and works with both IE6 and
IE7, on Windows only. (Plus see
this Blog about the IE8 Dev Toolbar)
Be aware that there some issues with Beta 3 on Vista with the toolbar not
docking on the taskbar and only being available from the DOM inspector.
Some images:
The DebugBar claims to be "The most advanced web development
tool for IE" and it certainly has some excellent features.
The Toolbar (highlighted in yellow below) has, from left to right, DebugBar
Settings; DebugBar toogle (toggles the panel); Script Error
Notification; 'Send Page by Email; a Colour Picker; Page Resize; Page
Zoom (not as effective as that in IE7+); View Source; and 'Spy other IE
Instances'.
See the DebugBar
homepage for full details and download.
The toolbar's developer also has a JavaScript Debugger for IE which gives
features similar to the FireFox 'Firebug' extension (see below).
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/
It will run on any platform FF supports: Windows, Mac OS X and Linux.
There's a good article on a thorough evaluation of a websites
accessibility, using the FireFox Developer Toolbar at:
http://www.webaim.org/articles/evaluatingwithfirefox/
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
The Opera Developer Toolbar has different features
again to the IE and FF versions, some better some not as good.
See
http://operawiki.info/WebDevToolbar
There's also a micro version with everything on one toolbar moved above
the tabs.
Although not immediately obvious, the Quick: menu links at the top of
the page are very useful and take you directly to the W3C pages on the
topic you choose. Cool.
Last but not least, the Safari browser has a built in
'Developer' menu that just needs adding to the main toolbar.
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 the
following options:
