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
Web Developer Toolkit (WDT) by Chris Pederick
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
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.
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
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.
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 Microsofthttp://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
Fiddler by Microsoft
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
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
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
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 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
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.
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.
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.
JSLint by Douglas Crockford
JSMin by Douglas Crockford
jsmin.exe < fileToCompress.js > fileToStoreCompressedJS.js
Online minifiers are also available:
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: