—tbd—

i have had to do webapp development again for the past couple of weeks . i use quite a few tools to simplify my development work and thought it would be a good idea to share it in a blog.

here it goes. anybody developing web applications that use javascript should have the following firefox extensions and tools installed. it would greatly ease the pain that one has to go through debugging and fixing javascript. if you are one of the folks who develop code that is designed to only work in ie, all that i can say is “i am really sorry for you”.

1. firebug
firebug allows to easily debug javascript, add breakpoints, watch expressions etc… it also lets the user modify css, html etc… and see the changes reflected on the screen rightaway. it also allows visually inspecting the various html elements and identifying associated html code. the console comes in real handy to inspect any ajax calls and inspect the results coming back. you can also type in additional javascript commands and directly inspect the changes without having to repaint the page. there are tons of other cool features.

it is definitely one of “the” best things ever to happen to web app development –> http://www.getfirebug.com/

2. view sourcechart
view sourcechart is another great plugin that lets you visualize the source that gets rendered in the browser. it lets you collapse and expand html elements. it uses different colours for divs, tables, spans etc… avoids having to resort to adding multi-colored borders to tables and divs.
definitely the next best thing –> http://jennifermadden.com/scripts/ViewRenderedSource.html

3. web developer toolbar
web developer acts as a good compliment to firebug and provides additional functionality to manipulate css styles, forms, images etc…
get the toolbar @ https://addons.mozilla.org/en-US/firefox/addon/60

4. greasemonkey and chickenfoot
greasemonkey and chickenfoot are two firefox extensions that allow you to integrate your custom javascript into existing websites. they server more as utilities for tweaking common websites, but they do become helpful in some situations. you can probably use greasemonkey to test all your javascript before adding it to your server code. it avoids the hassle of having to shutdown / restart the server.
http://www.greasespot.net/
http://groups.csail.mit.edu/uid/chickenfoot/index.php

developing for internet explorer
of course we all are forced to test and develop for ie6.0- browsers all the time. when forced into such a situation (which is almost always), there are some tools (and practices) that can help.

1. view rendered source available at http://billfriedrich.tripod.com/index.html?Web provides a mechanism to display the source that is rendered on the screen. this will allow and provide us a mechanism to look at dom manipulations that are done on the client side with javascript. using view source in internet explorer will not show client side dom manipulations.

2. leave the dirty work to toolkits. mochikit, yui, dojo etc.. take care of the dirty ie details. use their services.

3. if you do not have an option and are forced to do direct dom manipulations, then always assume that the code will not work correctly in ie. because it almost never does. especially when you do dom manipulations. never ever develop a large chunk of code in firefox and assume that you are getting closer to being done. you will have to invariably rewrite it to support the stupid browser.

hope these tools help you ease your javascript pain. if you have other firefox extensions / tools to help javascript, do post comments. i would be really interested in knowing more.