Example of using Chrome Dev tools to solve Ajax issues

This post is more than 2 years old.

Many moons ago I did a quick video on using Firebug to solve Ajax issues. While Firebug does quite a bit, for me it was primarily an Ajax debugging tool and I showed how to use it to quickly diagnose issues that may be a bit hard to see visually. Most of the time Ajax issues show up as nothing in your browser. Firebug can help make them a lot more apparent.

Now that I'm mostly a Chrome user I thought it might be nice to create a new video that demonstrated the same process using Chrome's "Dev Tools" feature. Like Firebug, there is a heck of a lot more to the tool than what I'm going to show. But there are still way too many people out there trying to do Ajax development without knowing how to debug and I hope that this video can be helpful. Just click the image below to load the video (it's quite a bit larger) and let me know what you think.

I explain this in the video, but to be absolutely clear, while I make use of jQuery and ColdFusion, they are not relevant at all to the discussion. You can use Chrome Dev Tools with any other Ajax library or back end server.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Joel Cox posted on 6/15/2011 at 5:47 PM

Thanks for this. I like the way that the JSON returned from a query in a remote call is formatted in the Chrome tool. It's nicely parsed and collapsible, much easier to review.

Comment 2 by Raymond Camden posted on 6/15/2011 at 5:50 PM

The flip side though is that Firebug has a rendered view of the result. In the case of ColdFusion, where the error has a _lot_ of formatting HTML on top, it is easier to read in Firebug then Chrome.

Comment 3 by tof posted on 6/15/2011 at 6:54 PM

I really like the look of the chrome dev console. Another cool bit is the timeline tool, which allows you to benchmark your client-side code. We recently used it at work to run tests and ended up replacing FCK with with a faster WYSIWYG editor.

Comment 4 by Stephen Weyrick posted on 6/15/2011 at 7:25 PM

Thanks, I feel silly for not knowing about that.

Comment 5 by Rick Mason posted on 6/15/2011 at 9:35 PM

Thanks Ray, I had no idea these tools came built into Chrome. I like how things are formatted in comparison to Firebug.

Comment 6 by Chris Giminez posted on 6/16/2011 at 10:24 PM

Thanks for this, Ray. Very helpful.

Comment 7 by Kerrie posted on 7/1/2011 at 5:10 AM

Ray, thanks so much. This really helped me solve my problem tonight. I can now go have a well-deserved glass of something alchoholic!

Comment 8 by gregory posted on 4/7/2013 at 6:00 PM

Thanks for the tut. For some reason it has been hard for me to find a simple example using developer tools to debug ajax request.