December 19, 2014
Hot Topics:

Keeping Up With The Ajax Trend

  • November 9, 2005
  • By Jordan Frank
  • Send Email »
  • More Articles »

JavaScript Debugging

Now that JavaScript-based applications are becoming more complicated and powerful, it is important to have better debugging methods than the traditional alert()s that seem to be commonly used. Most programming languages have very powerful debuggers built for working with them, but because JavaScript has usually been reserved for short, simple tasks, there has been little need for a powerful debugging environment. There are a number of good debugging tools available however, and they are seeing much more attention now that the Ajax movement is in full swing.

In the Mozilla browser suite, there is a debugging interface provided via XPCOM and an excellent debugger has been built on top of that interface. The debugger is called Venkman [3][4], and as it is written in XUL and JavaScript, it works on any platform that the Mozilla browser or Firefox work on. With Venkman, you can step through your code and watch and modify the variables, just as you would with any debugger. You also can include special comments in your code to set breakpoints, or you can use the debugger statement in the JavaScript code to trigger the debugger, or to log debugging messages. The benefit to using the comments is that the browser will only interpret the comments when the debugger is running; otherwise, it will ignore them, as will any other browser. Leaving debugging comments in production code is obviously not recommended, but having the debugging statements not break the page if it is run in a different browser is definitely of value.



Click here for a larger image.

Venkman JavaScript Debugger

Microsoft Visual Studio also includes a facility for debugging client-side JavaScript. The Microsoft Script [5] debugger provides all of the same functionality as the regular debugger, and Microsoft also offers a standalone version of the Script Debugger for developers who don't have Visual Studio.



Click here for a larger image.

Microsoft Script Debugger

DOM Debugging

As pages get more complicated, and elements become dynamic objects which are created, manipulated, and destroyed on the fly, Web developers need powerful tools to inspect the state of a page in the browser. A number of very good tools have emerged for looking at the current DOM for the page being displayed. Firefox ships with an extension called the DOM Inspector that provides a user interface for looking at the DOM for a page as a tree, allowing the developer to view the attributes and values for all of the nodes in the DOM. Microsoft recently released a similar tool that combines functionality similar to the Firefox DOM Inspector with another powerful Firefox extension, the Web Developer Toolbar, to create a very handy tool for inspecting the DOM. Another handy lightweight tool for quick debugging is the Mouse Over DOM Inspector [6], which is a bookmarklet [7] that is essentially a snippet of JavaScript that can be loaded into the current page in the browser to allow a developer to inspect the various elements in the page by simply moving their mouse over them.



Click here for a larger image.

Microsoft Developer Toolbar for Internet Explorer



Click here for a larger image.

Mouse Over DOM Inspector

Looking Ahead

As the Ajax trend continues to build momentum, new technologies are going to enter into the fray, and it is important to keep up with useful innovations. As more business logic is moved from the server applications into the client applications, Web developers are going to have to be smarter about how they implement the client Web applications. JavaScript has been mainly used for scripting and enhancing Web pages with special effects, but now it is being used to build real programs, and so it is important that the principles of general software design and implementation be applied now to programs built with JavaScript. Web developers can no longer throw together a few scripts into a page and call it a day; they need to start designing and building robust applications. Fortunately, some tools are already available to assist in incorporating object oriented programming, and other methodologies from the software world into Web applications. An excellent resource for more advanced JavaScript techniques is Douglas Crockford's site [8].

Regardless of what new technologies come and go, the fact remains that more and more intelligence is being moved from the server side of things to the client side. Traditionally, the real processing power happened on the Web server, and the client acted as a means to gather and display information. Now with the Ajax trend, and the tendency towards rich Internet applications, we are looking at a change in the way that Web developers have to work. The separation between the client and server is becoming more complicated, and so a new breed of Web developer that can understand the entire life cycle of the Web application, from both the client and server perspective, will emerge from the dust and the true vision of the Web 2.0 movement will slowly be realized.

References

  1. Introducing Fiddler: http://www.fiddlertool.com/fiddler/
  2. Immunity: Free Software: http://www.immunitysec.com/resources-freesoftware.shtml
  3. Venkman Homepage: http://www.mozilla.org/projects/venkman/
  4. Learning the JavaScript debugger Venkman: http://www.svendtofte.com/code/learning_venkman/
  5. Scripting Debugging in Internet Explorer: http://blogs.msdn.com/ie/archive/2004/10/26/247912.aspx
  6. Mouse Over DOM Inspector: http://slayeroffice.com/tools/modi/v2.0/modi_help.html
  7. Web Development Bookmarklets: http://www.squarefree.com/bookmarklets/webdevel.html
  8. JavaScript: The World's Most Misunderstood Programming Language: http://www.crockford.com/javascript/javascript.html

About the Author

Jordan Frank is a hybrid software engineer and hacker who has been working with the Internet in various shapes and forms since the early days of ISPs in the mid 90s. He is a lead developer at www.ebusinessapps.com and is an expert in rich Internet applications, AJAX, Service Oriented Architectures, and security. Jordan maintains a blog at http://blogs.ebusiness-apps.com/jordan/.





Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel