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();  

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.


  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.

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

  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.

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

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

  6. Very nice and helpful tutorial. Thanks :)

  7. Thank you for the above information it was so helpful.Also look up on Data Analysis Help Needed

  8. What a nice blog! I have enjoyed reading through the article although I landed on this site while I was looking for irrigation equipment suppliers in Kenya. I will be visiting this site occasionally to read more interesting and intriguing articles. I hope the writer will continually keep us updated with new information.

  9. You are sharing delightful post. It is effortless and easy to understand for me. Thanks for sharing the post. Moreover, our team provide Assignment Help Australia for all Australian universities.

    My Assignment Help

    Assignment Help Sydney

  10. Best piece of info ever looking forward for more, if you have always desired to look like Jesse James or James Bond, your look won’t be complete without a typical full-length all-leather duster. Get one from Leather Dusters

  11. Thank you for great and outstanding piece of info well delivered. Students who seek help with data analysis assignment consider us for we deliver unique and high quality academic paper seek our help from data analysis assignment help

  12. For a change, there is an article that focuses on a specific topic and is not all over the places. I like the fact that it is actually problem-solving and not just random and baseless subject. Great going!
    Management Assignment Help

  13. is known worldwide for its excellent quality Business Law Assignment Help services and affordable rates. Many of students have trusted our writing services throughout their academic years. Business Law Essay Assignment Help is one of the best services that can offer to law students.
    Business Law Assignment Help
    Business Law assignment
    Business Law help
    Business Law Homework
    Business Law term paper
    Business Law thesis
    Business Law coursework


Post a Comment

Popular posts from this blog

A cheat sheet of keyboard shortcuts in ColdFusion Builder

In my last post I have explained about keyboard shortcuts in ColdFusion Builder 2.0. This blog post contains a list of all shortcut keys and I have listed these keyboard shortcuts based on the categories that it falls into. Well, this post was not planned since users can easily get to know the keyboard shortcuts by navigating to the preferences (ColdFusion -> Profiles -> Keys). However, I met Joshua at Scotch on the rocks in Edinburgh and he suggested that it would be nice to have the list of keyboard shortcuts handy. So this post is for those who would like to have the list with them and refer it whenever required.

Keyboard shortcuts for inserting text:

These are the keyboard shortcuts which are used to insert some text into the editor:

CommandKeyboard shortcuts on WindowsKeyboard shortcuts on MacInsert anchor tagCTRL + T, LCMD + T, LInsert bold tagCTRL + T, BCMD + T, BInsert br tagCTRL + T, RCMD + T, RInsert cfabortCTRL + T, ACMD + T, AInsert cfdumpCTRL + T, DCMD + T, DInsert cfs…

Custom validation messages for HTML5 Input elements using the constraint validation API

HTML5 has introduced several input types such as EMAIL, URL, RANGE, SEARCH, DATE, TIME, etc,. Most of the modern browsers have implemented them and are ready to be used in a HTML document. Another exciting feature introduced in HTML5 is the form validation. Instead of writing JavaScript to validate users input, browsers can now validate it and show an appropriate message if the validation fails. The validation message is shown in line with the field for which the validation has failed. The default error message is shown when the validation fails. In this post I'll explain how these error messages can be changed.

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 file…