Fresh

Writing web applications or even simple static HTML pages requires the pooling of a multitude of technologies all of which can become a broken link in the event of a failure. Anecdotally, most of a developer’s time is spent troubleshooting so it can be a real headache tracking down a bug when you are jumping between three or more scripting/markup languages and more client environments than you have fingers to count.

A good web developer knows to look at their sites in every browser available to them however we all have a favorite when it comes to our primary development environment. Unless you’re working in a Microsoft shop you are undoubtedly using Firefox for this purpose …. right? Well in any case, it’s always a good idea to use the right tools for the job and a well equipped tool set can really boost productivity quite substantially. Given the extensible nature of Firefox, the web is rich with nifty plugins to give a web developer tools to speed up development, debugging and profiling and generally make life a little more bearable.

[1] It’s All Text

http://trac.gerf.org/itsalltext

In a nutshell, this allows you to use your favorite text editor to filll out textboxes. Once installed and configured, a small ‘edit’ button will appear next to textboxes when you hover your mouse over it. When you click on this it will open your text editor and if necessary it will display the text already present in the textbox. Once you have finished making your edit, rant, comment, etc…, you simply save the document and your changes will magically appear in the textbox on the webpage. It will even flash yellow to indicate that something has happened. This is one of my favorite extensions since I typically do all of my development in Emacs so rather than fighting the lack of proper indenting and syntax highlighting in web based CMS systems I BYOE (Bring your own editor). This one is a great extension even for people who aren’t developers but just hate typing in textboxes on web pages. It should work for everyone regardless of whether you use Emacs, Vi, Textmate, or Notepad.

[2] Html Validator

http://users.skynet.be/mgueury/mozilla/

At times web developers need to view the html source at since it is difficult to determine how the output from a server side script will look when working with raw PHP or ASP code. Reading html source after the browser has rendered it leaves much to be desired in regards to information gathering especially when using the built in source code viewer. Essentially all the gets served up is a flat text file and what you see is what you get. To make matters worse, html is rarely properly formatted by the time the browser gets it so you can forget about troubleshooting layout issues or missing tags. What ever is a wise developer to do? Html Validator to the rescue.

This handy extension is built on the already proven tool known as Tidy which takes ugly and broken html or xml and formats it into something workable. Html validator replaces the built in source editor so when you use the standard View Page Source command (Control+U), you are greeted with a much more useful window displaying the page source as well as every little bit of advice tidy has to offer on the structure of said page. On the bottom left you are provided with a list of warnings, errors and other information regarding missing tags, unsupported attributes and syntax errors. In a nutshell it validates your html directly in your browser so you know longer have to rely on services like the w3c validator.

But wait! It can do more. If you are feeling particularly lazy, it will automatically format your html and and fix the validation errors that it finds simply by clicking on ‘Clean up the page…’. With this command you are presented with another copy of your html as it should be. A productivity booster for experienced developers and a valuable educational tool for the aspiring.

[3] Firebug

http://getfirebug.com/

No web developers toolkit is complete without the ubiquitous firebug. This tool embeds itself deep into the gecko engine to provide every nitty gritty detail you could ever want about a web page’s DOM (Document Object Model), javascript and css. This tool manifests itself with a collapsible or detachable console which utilizes a tabbed interface to analyze different aspects of a web page. The HTML tab allows you to inspect the individual tags, their attributes and the styles associated with them. This is particularly useful to troubleshooting the css as it displays the cascading relationships as they are defined and their effects on a particular node. This is perfect for tracking down those annoying spacing issues. A bonus feature of this is the ability to right click on a portion of the web page directly and ‘inspect element’ which takes you to this console expanded to the requested node.

Other notable features include the ability to inspect XML HTTP requests (ie AJAX calls) and see their raw payloads. This helps when server side scripts misbehave on the other end of an AJAX request which often to do not return any sign they have failed other than a 500 server error. Additionally, newer versions include a nifty network profiler which displays a nice graph of how long individual assets took to download.

Needless to say, Firebug is an essential troubleshooting tool as without it, tracking down troublesome javascript bugs can be next to impossible. It can be figured to toggle on or off depending on the site you are visiting so it plays nicely when you are off the clock and don’t want the additional overhead of firebug’s hooks.

[4] Web Developer

http://chrispederick.com/work/web-developer/

This one is usually a no-brainer to most web developers as it is probably one of the oldest extensions geared towards web developers. This extensions adds an arsenal of tools using a toolbar. Different options are grouped into submenus for different aspects of a page. There are options to manage your cookies (great for testing session based authentication), manipulate forms, overlay DOM information, HTML validation, and my personal favorite, the ability to review and edit the css in real time. This ability allows you to see the effects of CSS directives instantly rather than editing, saving, uploading, and refreshing (We’ve all gone through that fun cycle). Another really useful feature is the ability to view generated source. This differs slightly from the built in page source viewer which only displays a snapshot of the html before it is rendered. Instead this viewer displays any changes that are made to the html after the document has rendered. This is helpful for viewing the DOM after an AJAX call when the structure of the page has been altered as a result; something that is not possible with the built-in viewer.

The web developer toolbar automates many tasks for developers as well as exposes some buried firefox features so they can accessed quickly in the heat of development. Forms can be quickly populated with junk data, sessions can be reset, cache files can be blown away and page resolutions can be switched on the fly all from one convenient location. It’s a must have.

[5] Tamper Data

http://tamperdata.mozdev.org/

The last extension I want to share is Tamper Data. This tool is akin to a network sniffer for HTTP traffic. When turned on it logs each and every HTTP request and all the associated details with each call including request types, headers, parameters and their corresponding responses. It’s the perfect compliment to other development tools in that it allows developers to see the interaction between your browser and the backend server. It’s great for determining if form posts are behaving as they should or whether ajax calls are occuring or where are all of a page’s assets being downloaded from. It makes for a great troubleshooting tool but it can also be a valuable asset during regression testing.

One of the features included in this extension is the ability to tamper with or modify a request in transit, hence it’s namesake. Headers can be tweaked and parameters can be modified to simulate requests and responses in order to create myriad ‘what if’ scenarios. No header is secret when you have this extension installed.