Must-have web application development tools

I have come up with a list of my “must-have” development tools:

  1. Dual Monitors – Developing with two monitors will make you much more productive simply because you spend less time switching between windows all day if nothing else. Monitors are pretty cheap and the productivity gains will more than pay for a dual output video card and second monitor. Even Microsoft says so.
  2. Firebug – If you do any kind of web development you should have Firebug on your tool belt. This Firefox Add-on will tell you exactly what CSS properties are being applied to an HTML element and from where and then allow you to change those properties on the fly in the browser. It also offers JavaScript debugging, a DOM tree inspector, and last but not, least, a “Net” panel that allows you to see all your browser requests, responses, and times.
  3. IE Developer Toolbar – IE’s answer to Firebug. It is not quite as full featured as Firebug in my opinion but it does at least allow you to inspect an element and determine how styles are being applied to it and where. This is quite useful since IE has a different box model than Firefox and you can use all the help you can get when trying to make a site look the same in both browsers.
  4. Charles Web Debugging Proxy Application – Charles acts as an intervening proxy to your web browser that records all the requests and responses. Some of this functionality overlaps with Firebug but Charles goes a bit further by providing request breakpoints, request editing, throttling, and DNS spoofing.
  5. Firefox Web Developer Toolbar – This is another very useful Firefox Add-on that allows you to:
    • Display element attributes in-line with the page you are viewing.
    • View a page’s JavaScript generated HTML.
    • Resize the browser window to preset sizes.
    • Outline different types of elements in the page.
    • Quickly disable, enable, and delete cookies
    • The list goes on…
  6. JQuery – JQuery is a JavaScript library but I also consider it an important tool to make JavaScript programming less painful. It allows you to easily select a DOM element you want to manipulate without typing a whole lot and handles many of the browser idiosyncrasies. Using JQuery’s selectors, you can easily change attributes and chain those changes to together. JQuery also has shortcuts for event handling, effects, AJAX, rich UI components, and anything else that is repetitious, boring, or aggravating to do in plain JavaScript. It takes a little time to learn JQuery but it quickly pays off. While there are many other JavaScript libraries available, I would say JQuery has become the most popular and so does this very scientific poll ;). If JQuery or one of its hundreds of plug-ins don’t do what you need then JQuery will work very well along side some of the other popular JavaScript libraries such as Dojo, Prototype.js, Ext.js, Mootools, and YUI.
  7. Putty – If you need to connect to your web host via Telnet or preferably SSH, Putty is tough to beat for the price.
  8. WinSCP – WinSCP provides SSH file transfer for Windows machines. If you use Windows on your desktop and a Linux host, this is one of the best ways to upload your files.
  9. Notepad++ – If you want a basic, lightweight text editor to do your coding with color syntax highlighting Notepad++ is a great choice. Even if you use a full featured IDE for your development I find it handy to have a good text editor handy. Notepad++ has several plug-ins available as well.
  10. PHPUnit – If you are developing a web application that you think will be around for any length of time then unit testing is a critical time saver. Chances are you already write tests to check if your code is working if you don’t have a user interface built yet so often you are already committing the time to writing tests. Unit tests developed using a unit test framework allow you to make “assertions” regarding the output of each function or small “units” of code. Unit tests stick with your code throughout it’s life cycle and are usually executed before you check-in a new change. When you run your unit tests using the unit test framework’s executable you can generally test just a single class or your entire code base. This will quickly tell you if the code you just wrote is working correctly and if you have inadvertently broke any existing code elsewhere. For current job my team and I code in primarily PHP and JavaScript so we use the PHPUnit and JsUnit frameworks but there are unit testing frameworks available for nearly all popular programming languages including C++, Java, C#, etc.
  11. Selenium – While unit testing covers individual units of code, integration tests cover how everything works together. Selenium accomplishes this by allowing you to build scripts that you can playback to emulate a user’s browser interacting with your application. Like unit tests, you can make assertions that elements in the web interface are working the way they should. This allows you to effectively perform an automated regression test of your application so you can make sure your code changes didn’t break any interactions between the components of the application. Although I personally really like Selenium, there are other good automated test tools such as Watir
  12. Web Application Vulnerability Scanning Software? – This is an area that will strongly depend on your budget. I think vulnerability testing is essential but short of doing a lot manual probing and experimenting, it is going to cost you. Even if you have read the OWASP guide back and forth and are careful to escape all your inputs, I still think it is important to run a test tool against your app before you release it into the wild. Although automated testing won’t reveal all your security issues it will at least reveal some of the more embarrassing ones. If nothing else, it is important that the script kiddies don’t find anything interesting when they do the same. While there are many open source security tools, I am not aware of any that will do automated application security scanning like HP’s WebInspect, IBM’s Rational AppScan, or Acunetix WVS. I found an interesting comparison between the three here. I would be interested in any alternatives if you know of any.
  13. Security Web Sites – The following web sites are good security “tools”:
  14. WebLOAD? – Instead of hoping your web application will hold up to high traffic volumes, wouldn’t you like to really know for sure? A load testing tool is essential to predicting how your application will behave under load and will also help identify bottlenecks in the application that can be optimized. Optimizing your application based on load test data will help to ensure you are focusing your optimization efforts on the real problem areas. In my current position we were using the alleged open source version of WebLOAD, which, worked pretty well. Unfortunately Radview is making new versions, err… I mean, pro, closed source and I am guessing the licensing costs are ridiculous just by the fact that they don’t list the price on their website or provide a shopping cart so you have to contact their sales folks (I am not a big fan of this practice). I am fine with convincing my boss to buy software if need be so long as it doesn’t cost so much he will laugh at me. So… I am in interested to hear about any other load test tools you have experience with.
  15. Subversion – Version control is essential if you are working on a project for any length of time and especially with other people. Subversion is easy to setup and as long as you back up your Subversion server and make frequent commits, your code will be safe and you can always revert to a previous version if you really mess it up. CVS is also an option but I prefer Subversion because it maintains versions across the entire code base instead of just individual files. This allows you to easily revert a bad multi-file commit. There are plenty of clients available for Subversion and many development tools have subversion support built-in or provide plug-in options.

Well that’s it for this post. I would really like to hear about any other must-have web app dev tools that you think should be on the list.