Development Tools

Before a craftsman can truly ply his trade, he must be equipped with the proper tools, and Web Application Developers are no exception. Below is a list of the tools that I find useful.

Firefox by Mozilla, Inc.

http://www.spreadfirefox.com/?q=affiliates&id=199155&t=218

Firefox is not just a browser, but the best development tool for web applications. It complies with almost every web standard, is extremely fast, and has the most plugins that aid developers. Keep in mind that a web application developer should always code first in a standards compliant browser, then tackle less compliant browsers, such as Internet Explorer.

There are a large number of useful FireFox extensions, but here are the ones that I find most useful:

Firebug by Joe Hewitt

http://www.getfirebug.com/ or
https://addons.mozilla.org/firefox/1843/

FireBug is the most powerful web development tool for FireFox. With FireBug you can monitor AJAX/HTTP requests, view and edit live CSS, delve into the DOM, mark breakpoints to step through JavaScript, and it can be extended by other plugins. I use FireBug everyday and it is my primary development tool.

Venkman (Mozilla JavaScript Debugger) by James Ross, Robert Ginda

https://addons.mozilla.org/firefox/216/

This was the original JavaScript debugger for FireFox, and is also great for marking breakpoints and stepping through JavaScript code. I used to occasionally use this addon as a backup for or in parallel with FireBug, but have not needed it in over a year.

Web Developer Toolkit (WDT) by Chris Pederick

https://addons.mozilla.org/firefox/60/ or
http://chrispederick.com/work/webdeveloper/

This toolbar is filled with a lot of little features that increase productivity. Some of the most helpful features are: live cookie editing, outlining elements by tag type, and resizing to browser to support different resolutions. After spending some time and get to know the features, I am sure you will find something that you cannot live without.

MeasureIt by Kevin Freitas

https://addons.mozilla.org/firefox/539/

While FireBug is a great tool for viewing element sizes, it is not very good to measure whitespace. MeasureIt allows you to measure all aspects of a webpage by simply clicking and dragging.

PageSpeed by Google, Inc.

http://code.google.com/speed/page-speed/

This is a FireBug addon to analyze web pages to find what detailed changes you can implement to tune improve the performance of your Web Application.

View Source Chart (VSC) by Jennifer Madden

https://addons.mozilla.org/firefox/655/

This is similar to the standard view the page source, but more powerful, as it is more readable and includes elements that were rendered by DOM scripting and AJAX. However, I no longer use this addon as FireBug has similar features.

Y-Slow by Yahoo, Inc.

http://developer.yahoo.com/yslow/

This is a FireBug addon to analyze web pages to find what simple changes you can implement to drastically improve the performance of your Web Application.



Internet Explorer (IE) by Microsoft

http://www.microsoft.com/windows/internet-explorer/default.aspx

Unfortunately, after your development in FireFox, you then need to look at your web application in Internet Explorer. Although, it is far easier and efficient to not support IE, your business demands will probably require you to support IE, as it has the largest market shared among web users. And to make matters worse you also need support the last few versions of IE, as many users are not tech savvy and often corporations mandate their employees use older versions of IE.

Microsoft Script Debugger (MSD) by Microsoft

http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=en
When you start testing IE, this tool is a must have. You can do a lot with script debugger, including JavaScript breakpoints and variable watching. A usage information can be found at:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/sdbug/html/sdbug_1.asp

Fiddler by Microsoft

http://www.fiddlertool.com/fiddler/

Fiddler allows developers to see most network traffic in and out of your computer by using a proxy. This is useful for monitoring http and AJAX request in IE. You can also use this with other browsers (see the documentation).

Multiple IE (MIE) by Manfred Staudinger

http://tredosoft.com/Multiple_IE

You still need to support IE 6 for a few years and this tool allows you to run an IE 6 instance without launching a virtual PC. You can also see how your pages behave in IE 3, 4.01, 5.01, 5.5, and 6, without interfering with the latest version of IE. The only problem I have ever encountered is an occasional memory leak having to do with older IE versions and displaying elements with the opacity style.

IE Developer Toolbar

http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

Although, it has a long way to go to replace the Web Developer Toolbar of FireFox, this is must-have tool for IE 6+. You can outline and navigate through the DOM, measure page elements, see and change applied styles, and more.

DebugBar for IE8

http://www.debugbar.com/download.php

This is the latest tool in your arsenal, combining IE Developer Toolbar and Microsoft Script Debugger to have a tool that attempts to rival FireBug. It does not, but at least it&rsquot;s a step in the right direction.



Opera

http://www.opera.com/

Opera has been around for a long time, but has never really claimed much market share, except on mobile platforms. I usually check to make sure my web applications look decent in Opera, and since it is mostly standards compliant, anything that works in FireFox, tends to work in Opera as well.

Opera 9 Developer Console
http://dev.opera.com/tools/

If you need to support Opera, you will occasionally run into JavaScript errors not triggered in other browsers. I have found this tool to be useful for debugging Opera only issues.



Safari

http://www.apple.com/safari/

Safari is blazing fast and with the new found popularity of MAC computing and the iPhone, it is becoming an important player in the browser market. It is based on Web-Kit technology, and is also mostly standards compliant.

Web Inspector

http://www.macosxhints.com/article.php?story=20030110063041629

This is part of Safari 3+. It allows you to inspect the DOM, to see the styles applied to elements and the surrounding HTML. If you also need to support earlier version of Safari, I suggest you test and fix Safari 3+ first. Then run separate Safari installations for each version and see if the bug is fixed, before trying to debug in those less hospitable versions.



Chrome

http://www.google.com/chrome

Google has entered the browser market as well with its Chrome browser, which is also based on Web-Kit. So it renders very similarly to Safari and will often have the same issues. Additionally, Chrome creates a new process for each tab, so it should crash less frequently.



Non-Browser Tools

JSLint by Douglas Crockford

http://www.jslint.com

Before releasing your JavaScript code to a production environment, run it through JSLint to help prevent many easy-to-overlook errors. Also, if your code validates with JSLint you can use a minimizing or obfuscation tool to reduce and protect your code.

YUI Compressor

http://developer.yahoo.com/yui/compressor/

YUI Compressor combines JavaScript and CSS compressor into one, easy-to-use tool. See the website above, for examples on how to use it. I now use this instead of both CSSTidy and JSMin.

JSMin by Douglas Crockford

http://www.crockford.com/javascript/jsmin.html

jsmin.exe < fileToCompress.js > fileToStoreCompressedJS.js

If you have more than 50k worth of JavaScript, then the downloading of your JavaScript files becomes an issue on machines with slower connections (if you have more than 200k of JavaScript, then you might even have issues on high-speed connections). To reduce script download times you can combine your JavaScript into fewer files, and then remove needless white spaces and comments from your production code. JSMin is a command-line application that usually reduces the file size by 33% and removes your comments.

Online minifiers are also available:

http://www.brainjar.com/js/crunch/demo.html

CSSTidy

http://csstidy.sourceforge.net/

csstidy.exe < fileToCompress.css --template=highest > fileToStoreCompressedCSS.css

This is the CSS version of JSMin. Use it to remove needless white spaces and comments from your production code. Some online CSS minifiers are:
http://www.cssoptimiser.com/index.php
http://www.cssdrive.com/index.php/main/csscompressor/