Being able to know exactly what’s happening with your code is invaluable when developing in any language on any platform. When a bug arises, the more you know about what’s happening, the better you will be able to fix that bug. This is where web development tools come in. Web development, for example, surely can be done with tools like notepad and any browser, but is it practical?
Frontend Development Tools
When debugging the client-side of a web page, I have found https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug extension to be a life-saver. Firebug was originally a Mozilla Firefox extension, but has since been ported to Internet Explorer and basically any browser you want. Firebug does many things with regards to web development. For JavaScript debugging, the Firebug extension allows you to debug by stepping through your code line-by-line, as well as monitoring network calls made via AJAX.
For designing, Firebug allows you to edit the active stylesheets and apply new styles instantly and see how your page is affected. Also, Firebug allows you to inspect the document to see the generated source code. This is very different from the raw source code, because as with many Web 2.0 websites, much of a web page tends to have a dynamically modified DOM (i.e. new tables are inserted into the page as a user clicks ‘view more results’). Being able to see this generated code is something that wasn’t possible before with just a simple browser.
Backend Development Tools
Also, for backend development of newer Web 2.0 websites, an integrated development environment (IDE) is becoming more and more necessary. An IDE is generally slower and uses more resources than a simple text editor, but provides expansive features to allow for accelerated development. Eclipse, an opensource IDE supported by IBM, is my IDE of choice, but most IDE’s will provide a similar feature set, to most it will be up to personal preference. Some important features that IDE’s provide are code completion, refactoring, step-by-step debugging, automated deployment, inline error checking, and more. Every one of these features has saved me countless hours in development and I’m not quite sure how I would develop without them.
Lastly, while not a tool in itself, the Mozilla Firefox extension platform allows developers to download a multitude of useful extensions essential to web development. Depending on your exact needs, there are hundreds of extensions, many of which you may find useful. Here are my favorites:
- Aardvark – Quickly inspect and modify elements on a web page
- Checky – Validate and analyze HTML, XHTML, CSS, RDF, RSS, XML, WAI, Section 508, P3P, Hyperlinks, Metadata and many more.
- http://codetch.com/ – Codetch – WYSIWYG editor for web pages directly within your browser. Dreamweaver-like features.
- Web Developer Extension – Many, many features targeted for web developers. A must have.
