Wednesday, April 16, 2008

Tools and utilities for JavaScript development

For many people, developing web applications with JavaScript seems to be an irritating task. But the reason maybe that they don’t use firefox and its hugely popular extensions to improve their development time period. In the early stages, developers used alert boxes to debug JavaScript. For this they put alert boxes on each and every line where they wanted to know the value of a variable. Now everything has changed!


Leading the bandwagon is firebug, an extension of firefox. One of the many exciting features of firebug is JavaScript debugging. We can place breakpoints in JavaScript code and watch the variable values just inside our browser itself. Walking through array values can’t be much easier as in firebug. Keyboard shortcuts for debugging are also similar to widely used Ides’. Selecting the JavaScript files used in a web page for viewing can be done with ease. To search the JavaScript code a simple text box is also provided.

The Console shows the logged messages for each web page. It will show any JavaScript, CSS and XML errors and even warnings. You can also test JavaScript functions by calling them in the command line given below the console. The output will be displayed in the console. This command line can also be expanded to accommodate batch statements of JavaScript. One case in which the console will be much useful is during the Ajax application development. Whenever any Ajax (Asynchronous JavaScript and XML) request is sent, the console displays the request header, response header, request parameters and response XML every time. This can be helpful in debugging and analyzing the Ajax enabled web application.

A mini HTML editor is also attached with firebug. It enables us to travel through the HTML node tree and inspect the elements and their attributes. We can even edit the html, delete the html, edit the attribute of any element and create new attributes for elements. Styles of elements can also be edited on the right hand side box. There you can edit, delete or disable any style attribute. Whenever you select any html element in a page the element will be highlighted in firefox browser. On the right hand side box there is also an option to show the layout of the element. It is a graphical representation of the border, margin and padding attributes of an element. There is also a DOM inspector where you can walkthrough the node tree.

Any http connection made through the browser can be viewable in the “network” tab of firebug. This shows connections made for resources such as images, web pages, scripts, style sheets and flash objects. Each connection detail comprises of headers, parameters and the response data. The size of each resource is also shown along with the time taken for loading them. We can also preview any images or icons in this network tab just to cross check if that is the correct one. Apart from this one special feature of firebug is that you can profile JavaScript runtime. That is we can peek into the JavaScript calls and their execution time with call counters.

Web Developer:

A perfect web developer tool, that’s how this can be described. The menus provided by web developer are listed below:

  • Manage HTML
  • Manage CSS
  • Manage cookies
  • Manage images
  • Manage forms

You will be wondering, what’s the use for JavaScript developers. In the case of web developer, JavaScript utilities are limited. But it’s useful! For example, we can disable JavaScript directly in firebug. We can change the form element values directly on the browser screen. We can display the web page response headers and other useful information easily. Apart from this outlining group of elements are the main advantages of the web developer firefox extension. All kinds of validation can be done through this tool. Other tools include page magnification and page ruler. We can also view the generated source i.e. the source dynamically changed by JavaScript using the web developer extension.


This is a cool JavaScript utility which makes use of JavaScript functions to make dynamic changes to web pages viewed in our browser. These scripts can be customized such as they run for a particular domain only. The Greasemonkey extension also adds some functionality to the JavaScript API. One of them is the console class through which we can log warnings, messages or error details. The Greasemonkey is one dream tool, by which you can entirely change the way you browse the internet. You can develop scripts for any website such as to make your view more attractive or faster or compact and ask Greasemonkey to embed your script for that particular website.

I’ve even tried a simple Greasemonkey hack. I wrote a JavaScript function to listen to keyboard input event if the current focus is in password and then recorded the input in the console log. And then I added this function to Greasemonkey user scripts. So whenever anybody uses my browser to logon to any website, their password will be recorded in the console along with other details such as cookies, page title and web URL!

No comments: