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.

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.

Firebug

If you are using Firefox, Firebug is probably the first or second extension you should install (in addition to Web Developer Toolbar). Firebug lets you inspect, monitor and edit HTML, CSS and JavaScript live on any web page. In addition to that, it provides a script console which makes JavaScript development much easier. The console object offers a huge load of options that lets you output code to the console and debug it. Michael Sync provides a tutorial that explains these options in further detail. Also included in Firebug is a bandwidth monitor to track which resources on your site consume how much bandwidth. A must.

Modify Headers

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.

Poster

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

As JavaScript debugging is not included in the IE Developer Toolbar, you need a different tool to do that. You can either use the Microsoft Script Debugger (mentioned below) or download (for free) the much heavier Visual Web Developer Express Edition. Bernie explains how to use it to debug errors in your JavaScript code on your web site.

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

You can download this MS debugger from their download section for free and there is even a documentation on MSDN. It provides less functionality than the Visual Web Developer Express Edition, but still helps you to deal with more or less cryptic error messages like “object required” that IE normally comes up with. Jake Howlett describes how to debug JavaScript using Microsoft Script Debugger at codestore. As a sidenote and to be safe, after installing the Script Debugger, restart your machine to be able to use it next time you start IE.

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

The error console is a built-in feature of the Opera browser and can be activated going to Tools > Advanced > Error console. A window pops up which displays any kind of error or warning messages related to the currently loaded web page. They can also be filtered by certain categories (e.g. HTML, CSS, XML, JavaScript). You can find a detailed article about using the Error Console as a debugging tool in the developer section of the Opera Web site.

Safari Debug Menu

Safari’s debug capabilities are kind of poor, but at least there is a way to display a JavaScript console (similar to Firebug and Opera Error Console) to make JavaScript debugging a bit easier. In the developer section of the Apple Web site, there is a FAQ article that explains how to enable the hidden debug menu. On Mac OSX, open a terminal and type:

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:

<key>IncludeDebugMenu</key>
<true/>

In Safari 1.3 and above, you can now access the new Debug Menu and check the “Log JavaScript Exceptions” menu item. Then selecting “Show JavaScript Console” will open the console to log JavaScript exceptions.

Web Inspector

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:

<key>WebKitDeveloperExtras</key>
<true/>

If you then quit your Safari and restart it, you should have an “Inspect Element” option in the context menu.