Skip to main content

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.

Comments

  1. Learning the webkit debugger is especially essential when writing applications with frameworks like ExtJS. Most errors occur with scoping, and it's very difficult to track down the problems until you set a breakpoint and see what's in the "this" scope when the breakpoint is encountered.

    The reason I mention ExtJS in particular is because Adobe ColdFusion comes package with ExtJS components. It is seemingly impossible to leverage the CF implementation of ExtJS without a full debugger.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. Firebug does allow you to set breakpoints in javascript code and examine the values of variables at runtime. In the script tab, select the script you want to debug and click next to the line-number to set a breakpoint there, just like in Chrome's inspector.

    ReplyDelete
  4. Wow, I never noticed the ‘Pause on all exceptions’ button - Thanks it really being useful to us now.

    ReplyDelete
  5. This is new to me, thanks for the post


    http://www.javatips.net

    ReplyDelete
  6. Very nice and helpful tutorial. Thanks :)

    ReplyDelete

Post a Comment

Popular posts from this blog

Adding beforeRender and afterRender functions to a Backbone View

I was working on a Backbone application that updated the DOM when a response was received from the server. In a Backbone View, the initialize method would perform some operations and then call the render method to update the view. This worked fine, however there was scenario where in I wanted to perform some tasks before and after rendering the view. This can be considered as firing an event before and after the function had completed its execution. I found a very simple way to do this with Underscore's wrap method.

De-obfuscating javascript code in Chrome Developer Tools

I had blogged about JavaScript debugging with Chrome Developer Tools  some time back, wherein I have explained how these developer tools can help in debugging javascript code. Today Google Chrome 12 was released and my Chrome browser was updated to this version. As with every release, there have been some improvements made on performance, usability etc,. One feature that stood out for me is the ability to De-obfuscate the javascript code. What is Minification? Minification is the process of removing unnecessary characters such as white spaces, comments, new lines from the source code. These otherwise would be added to make the code more readable. Minifying the source code helps in reducing the file size and thereby reducing the time taken to download the file. This is the reason why most of the popular javascript libraries such as jQuery are minified. A minified jQuery file is of 31 KB in size where as an uncompressed one is about 229 KB. Unfortunately, debugging minified javascript f

On GraphQL and building an application using React Apollo

When I visualize building an application, I would think of using React and Redux on the front-end which talks to a set of RESTful services built with Node and Hapi (or Express). However, over a period of time, I've realized that this approach does not scale well when you add new features to the front-end. For example, consider a page that displays user information along with courses that a user has enrolled in. At a later point, you decide to add a section that displays popular book titles that one can view and purchase. If every entity is considered as a microservice then to get data from three different microservices would require three http  requests to be sent by the front-end app. The performance of the app would degrade with the increase in the number of http requests. I read about GraphQL and knew that it is an ideal way of building an app and I need not look forward to anything else. The GraphQL layer can be viewed as a facade which sits on top of your RESTful services o