Getting Started - Development Tools
Before a craftsman can truly ply his trade, he must be equipped with the proper tools; Web Application Developers (WAD) are no exception. Below is a list of the tools that I have found to be most useful.
Firefox by Mozilla, Inc.
http://www.spreadfirefox.com/?q=affiliates&id=199155&t=218
You may think Firefox is just a browser, but as a WAD you need a W3C compliant browser and Firefox is the leading development environment. The browser complies with almost every web standard, which every web application should initially be built against, before attempting to support non-compliant browsers. In addition, there are numerous extensions that can be downloaded to aid in development; here are a few:
FireFox 3
http://www.mozilla.com/en-US/firefox/all-beta.html
Download the Beta for the next version of FireFox and begin updating your website to support it. As of writing this, YUI has some known issues with FF3, but I expect these errors to be fixed in version 2.5.2 or higher.
Firebug by Joe Hewitt
http://www.getfirebug.com/ or
https://addons.mozilla.org/firefox/1843/
For the Mozilla Firefox browser, FireBug is the most powerful tool in a WAPs arsenal. With FireBug you can monitor AJAX requests, view and edit live CSS, delve into the DOM, mark breakpoints and step through JavaScript, and monitor HTTP requests all in one place. Since the release of version 1.0, FireBug has become my defacto development tool.
Venkman (Mozilla JavaScript Debugger) by James Ross, Robert Ginda
https://addons.mozilla.org/firefox/216/
This was the original FireFox debugger, a precursor to Firebug, and is also great for marking breakpoints and stepping through JavaScript code. I used to experience an issue with this extension where closing and re-opening it, would crash the browser. I am not sure if this is still true, as I have not needed to use this extension for over a year. I used to occasionally use it as a backup for or in parallel with Firebug (you can set breakpoints in each tool during an AJAX call, if the callback function might be executed more than once).
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 that make this tool indispensable are: live cookie editing, outlining elements by tag type, and resizing to browser to support different resolutions. Spend some time and get to know the features, and I am sure you will find something that you cannot live without.
MeasureIt by Kevin Freitas
https://addons.mozilla.org/firefox/539/
If you ever need to do anything with layout this tool will allow you to quickly measure page elements and white spaces. Although, I almost always just use FireBug, there has been occasion when FireBug did not report accurately or it is far easier to instantly select the area I want to measure, instead of adding dimensions from FireBug.
View Source Chart (VSC) by Jennifer Madden
https://addons.mozilla.org/firefox/655/
This is much more powerful than the standard ‘view the page source’, as it is more readable and includes elements that were rendered by DOM scripting and AJAX. Especially, useful if you want to see if an invisible element was actually added to the DOM.
Y-Slow by Yahoo, Inc.
http://developer.yahoo.com/yslow/
This is a simple tool that analyzes web pages and determines which, well-documented changes, you can implement to drastically improve the performance of your Web Application.
Internet Explorer (IE) by Microsoft
If you hoped you could simply develop in FireFox and call it a day, I am afraid you are very wrong. Although, it is far more efficient to not develop cross-browser, compliant applications in IE, you will need to support IE before launching your Web Application, as IE is the largest market segment. And to make matters worse you also should support the last few versions of IE, as many IE users are average computer users and often corporate computer users are mandated to use IE because of company intranets.
Microsoft Script Debugger (MSD) by Microsoft
http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=en
This is a must have for when you get to supporting IE (ideally, this will be one of the last steps in your development cycle). You can do a lot with script debugger, including JavaScript breakpoints and variable watching. Once you download the add-on, additional 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/
See most network traffic in and out of your computer. This is useful for http request and AJAX monitoring in IE, although it seems to track more than just IE traffic.
Multiple IE (MIE) by Manfred Staudinger
http://tredosoft.com/Multiple_IE
You still need to support IE 6 for about 4-5 more years and this tool allows you to run an IE 6 instance without launching a virtual PC. With it you can see how your pages behave in IE 3, 4.01, 5.01, 5.5, and 6, without interfering with IE 7. The only problem I have ever encountered is a 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 hot-click on DOM nodes, view and navigate through the DOM, measure page elements, and more.
IE is getting closer complying with the standards every day. IE 8 is Microsoft’s challenge to FireFox, and the Beta looks better and better each week. By default IE 8 will be standards compliant, but Microsoft is introducing a new meta tag, to allow rendering in other versions of the browser (perhaps we will no longer need Multiple-IEs).
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 is almost as powerful as FireBug. This finally makes IE develop efficient .
Other Tools
Opera 9 Developer Console
http://dev.opera.com/tools/
If you need to support Opera, you will occasionally run into JavaScript errors that are not triggered by other browsers. In better develop and debug in Opera, I have found this tool, incredibly useful.
Safari 3 Web Inspector
http://www.macosxhints.com/article.php?story=20030110063041629
This is part of Safari 3, and if you have not already upgraded, you will need it, in order to use this tool. This tool allows you to inspect the DOM, which is not as useful as tool in other browsers, but is very helpful if you want to support Safari. If you also need to support earlier version of Safari, I suggest you test and fix Safari 3 first, then run separate Safari versions installations and see if it is fixed, before trying to debug in those less hospitable versions.
JSLint by Douglas Crockford
http://www.jslint.com
Run JavaScript through Crockford’s tool before releasing to production and will 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.
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 script downloading becomes an issue on dialup and some DSL modems (if you have more than 200k of JavaScript, then you might have issues on high-speed connections as well). 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 allows you to properly comment your development code-base, whilst hiding those comments from everybody else.
If you just have one JavaScript file or want to see an online compression tool, try:
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 this to remove needless white spaces and comments from your production code. Some online CSS minimizers are:
http://www.cssoptimiser.com/index.php
http://www.cssdrive.com/index.php/main/csscompressor/
YUI Compressor
target=”_blank”>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.
