With so many browser out there in the wild, working as a Web Developer certainly is not an easy job these days. Thankfully, over the last years, decent tools have been developed by bright people that make developing and debugging of code easier for the developer. But sometimes, it is not easy to keep track which tools are at a Developer’s disposal (and which are actually usable). The following article seeks to list the best tools available and quickly describing how to activate/install/use them.
To give a quick overview of the tools per browser, please refer to the table below.
|Browser||Available Tools (main area of debugging in parenthesis)|
Web Developer Toolbar
If you can only pick one extension to install for debugging and developing web sites in Firefox, it has to be the Web Developer Toolbar. A real gift for web developers, cause it consists of a myriad of tools ranging from Cookie related tasks (disable, delete, view their content) to CSS, display of line guides, ruler and much too many to mention. Go and install it now.
Modify Headers is a useful extension to add, modify and filter out HTTP request headers. As stated on the web site, you could fake a request from a mobile device or an Ajax request.
The Poster extension is a developer tool for interacting with web services and other web resources that lets you make HTTP requests, set the entity body, and content type. This allows you to interact with web services and inspect the results.
XRAY & MRI
XRAY and MRI are bookmarklets for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). XRAY can be used to inspect the box model for any element on the page, whereas with MRI you can test and play with selectors.
Firefox Accessibility Extension
The Mozilla/Firefox Accessibility Extension makes it easier for people with disabilities to view and navigate web content. Developers can use the extension to check their use of structural and styling markup that support functional web accessibility.
IE Developer Toolbar
Microsofts Internet Explorer Developer Toolbar is, when it comes to DOM inspection and CSS debugging, the best tool out there for IE debugging. Due to the high market share and flaws in the whole rendering model (like hasLayout), debugging IE can’t be ignored but can become a nightmare pretty quickly without the toolbar. It still is a bit clunky and far less slick than Firebug, but it helps to tame the IE beast.
Web Accessibility Toolbar
The Web Accessibility Toolbar (version for Opera) offers functionality that not only lets you check how accessible your site is (or rather might be, cause machines can’t really check how accessible something is for humans), but also provide a bunch of other features like e.g. validation links or resizing of the browser window.
Visual Web Developer Express Edition
You can also use Microsoft Script Editor, which is, unfortunately, not really free, but rather included in the Microsoft Office 2003 bundle and not available as a separate download. Because of that, I am not including it in this list, but Jonathan Boutelle offers some instructions how to use it for debugging.
Microsoft Script Debugger
Opera developer tools
On their developer site, Opera mentions two developer tools, Opera Developer Console and DOM Snapshot, as some kind of bookmarklets for their browser version 9 and above. From the screenshots presented, they both look very promising. Unfortunately, I could not get them to work in version 9.10.
Opera Error Console
Dragonfly attempts to bring Firebug-like debugging functionality to Opera’s latest 9.5 browser.
Safari Debug Menu
defaults write com.apple.Safari IncludeDebugMenu 1
On Windows, use a text editor to add the following to the Preferences.plist file located at C:\Documents and Settings\USERNAME\Application Data\Apple Computer\Safari\Preferences.plist:
To activate the Safari Web Inspector (available in Safari 3 and above) on Mac OS, type the following in a terminal window:
defaults write com.apple.Safari WebKitDeveloperExtras -bool true
On Windows, open WebKitPreferences.plist in Documents and Settings\*Your User Name*\Application Data\Apple Computer\Safari and add this key:
If you then quit your Safari and restart it, you should have an “Inspect Element” option in the context menu.