JavaScript debugging with Chrome Developer Tools and some tips\tricks

Last Friday I was having a conversation with Ben Nadel and Jonothan Joyce on Twitter about examining the content of a JavaScript object. While the firebug add-on for Firefox comes in very handy in examining the request\response header and for various other internals, I can’t really debug the JavaScript code by adding breakpoints. I use Google’s Chrome browser for my day to day web application development. Both Chrome and Safari provide ‘Developer tools’ which help the user not only in debugging the JavaScript code but also in examining the content of an object at any point in time by providing watch expressions. What I like about debugging in Chrome is that it is very much similar to how I debug my server-side code using ColdFusion Builder or Eclipse. This certainly reduces the learning curve to understand debugging in a browser. However, Chrome has more to give when it comes to debugging web applications.

In this post I’ll explain how Google Chrome can help you debug web applications and several other internals.

JavaScript debugging with Chrome Developer tools:

I have taken an example of a CFAJAXPROXY tag, which is used to create a JavaScript proxy for a ColdFusion component. The proxy class can then be used to invoke any method defined in the CFC (methods with access attribute set to remote):

 <cfajaxproxy jsclassname="myCFCProxy" cfc="TestCFC" >  
 <script type="text/javascript">  
      var myObj = new myCFCProxy();  
 </script>  

Now to see the methods that I can invoke using the proxy object (myObj in the code); I can make use of the developer tools in Chrome. After launching the page in the browser, you can invoke the developer tools by selecting the same under settings > Tools. Alternatively, you can use the shortcut key CTRL + SHIFT + I (CMD + OPTION + I on Mac):

As shown in the above screen shot, you can click the line numbers to add a breakpoint. This would turn the background color of that particular line number to blue. Once a break point has been added, the same would get listed in the ‘Breakpoints’ section. To inspect the content of a JS object, expand the watch expressions column and click ‘Add’ button (myObj added to the Watch Expressions list). The button bar just above the Watch Expressions column is used in debugging JavaScript code. Once the page is refreshed, the breakpoint is hit and you can inspect the object content:

As shown in the above screenshot, the line at which the break-point is hit would be highlighted and an arrow mark at that line would also be shown. The button bar to debug the JS code can now be used:

There are five buttons provided to debug the JS code:

• Pause\Resume: Use to run the code until it comes across any other break-point.

• Step over: Used to step over the highlighted code and move to the next line.

• Step Into: Similar to Step over, except that when one clicks Step Into at a function call, the debugger moves its execution to the first line in the function definition. If the user clicks Step over button, then the function is executed and the debugger moves to the next line.

• Step out: Say if you have stepped into a function definition by clicking Step Into button, on clicking the Step out button the remainder of the function definition is executed and the debugger moves its execution to its parent function and highlight the next line in place.

• Deactivate\Activate all breakpoints: The last button is used to deactivate\activate all the breakpoints added.

Once the line at which the break-point was set is executed (by clicking Step Over\Step Into), the JavaScript object (myObj in the code) is populated and the watch expression indicates that. As shown in the above screenshot, the object contains several methods including the one that is defined in the CFC – retrieveAuthorDetails.

Tips and Tricks:

1. There are times when one would get JavaScript errors in the console and to debug the entire web application at that time can seem daunting. To resolve this, click the button ‘Pause on all exceptions’ which is available at the bottom left corner of the window, to pause at the line wherever the exception occurs. The debugger would then highlight the line where the exception occurred, just like how it would highlight when the user sets a breakpoint at a particular line. 
2. With the advent of HTML5, you can leverage the offline database to store some records offline. Chrome has added support for WebSQL database; with Developer tools, you can examine the database records by switching to the Resources panel. This lists all the resources\files and various entities:
   
   
   As seen from the above screenshot, the resources are shown which also includes Databases, Local Storage, Session storage, Cookies, and Application Cache.
3. If you run a script that creates an offline database and stores some records offline, then the same is listed in Resources panel under databases. What is cool is that, you can see all the tables and query the same. That is, you can click the database and a console would be shown to the users wherein they can query the offline database using SQL statements.