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.
Archived Comments
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.
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.
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.
Thanks, I feel silly for not knowing about that.
Thanks Ray, I had no idea these tools came built into Chrome. I like how things are formatted in comparison to Firebug.
Thanks for this, Ray. Very helpful.
Ray, thanks so much. This really helped me solve my problem tonight. I can now go have a well-deserved glass of something alchoholic!
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.