How to Use Chrome Developer Tools to Debug Ajax

Ajax is a popular technique that we’re seeing more of our clients use to create faster and more dynamic web applications. It’s also part of the new WebSmart templates and used in the underlying Presto code. It can, however, be difficult to know where to start when debugging Ajax. How do you tell which component (e.g. HTML, jQuery event, Ajax call, server-side script, Ajax response callback) isn’t working properly?

Chrome Developer Tools (CDT) is a powerful debugging tool that saves you a significant amount of time in debugging Ajax calls and other client-side issues. CDT, which is included in Chrome and widely used within our company, gives you access to the internals of your web application and allows you to inspect each step to quickly find the problem. The example below illustrates some of the ways you can use CDT to probe your client-side code and improve it or find bugs.

Code Example

Using a drop down list with the names of four friends, we’ll send an Ajax request to the server to find out what their favorite food is. You can use the example we created to follow along. When our Ajax response is returned from the server, it’s displayed in an alert box. Generally, this is a good debugging method to use in order to display our response data but would be fairly uncommon in production.

HTML

<select id=”friendList”>
      <option value=”winter”>Winter</option>
      <option value=”moonbeam”>MoonBeam</option>
      <option value=”spondon”>Spondon</option>
      <option value=”bennyb”>BennyB</option>
</select>

jQuery

$(document).ready(function() {
      $("#friendList").change( function(){
              console.log(“Event Called”);
              jQuery.ajax({
                      url: "index.php",
                      type: "POST",
                      data: { “name”: $(this).val()},
                      success: function (rtndata) { alert(rtndata);}
             });
      });
});

Chrome Developer Tools

If you’re following along with the example, change the drop down of the error version. You’ll get an alert that says “What was that?” Let’s look at the request that is getting sent. Right-click the page and select “Inspect Element” to open CDT, then click the “Network” tab. You’ll see an entry that says “index.php”, as illustrated in the screenshot of CDT to your left. Click the entry to see more information about the request and the response.

 

You’ll see the following under the Form Data in the request headers:
name:$(this).val()

The string literal of our JavaScript is getting sent rather than the actual value we are trying to send.

You may also have noticed this line at the entry to our callback function:

console.log(“Event Triggered”);

We can use that line to check that our event is actually triggered. It will print the words “Event Triggered” to the JavaScript console.

Click the “Console” tab. You’ll see “Event Triggered” and a command prompt,  >. Let’s see if we can print out the value we are looking for from the prompt.

Type the following into the command prompt and press enter:

$(“#friendList”).val();

You’ll see the value of the currently selected option of your drop down list printed at the console. This means that you’re able to access the value using jQuery, which is useful to test in real time. You can apply this process to any JavaScript on your page, including adding callbacks to events or modifying the web page. For example, you can add our friend Jimmy to the drop down list:

$("#friendList").append("<option value='Jimmy'>Jimmy</option>");

Note: Any changes you make in the console will be lost when you refresh the page.

We’ll need to send the actual name of our friend instead of the JavaScript code. There are many ways to do this so feel free to choose your favorite method. I’m going to use a local variable.

var friend = $(this).val();

Our jQuery callback now will look like this:

$("#friendList").change( function(){
        var friend = $(this).val();
        console.log("Event Triggered");
        jQuery.ajax({
       url: "index.php",
       type: "POST",
       data: { name: friend},
       success: function (rtndata) {
         alert(rtndata);
       }
});

When you use the working version of the drop down that has the change, you’ll start getting alerts with your friend’s favorite foods.

In summary:

  • Ajax is difficult to debug simply by trying out your code in a browser.

  • CDT’s “Network” Tab will show all of the requests sent and received.

  • The “Console” Tab can be used to interact with our web pages in real time using JavaScript.

  • You can also debug your client-side code in Internet Explorer (hit F12) or Firefox Web Console (Ctrl+Shift+K).

To learn more about Ajax, you can read part 2 of Duncan Kenzie’s article on how to use Ajax with jQuery.

Now we’d like to hear from you in the comments below: What aspect of client-side code do you find the most difficult to debug? Do you have any debugging tips that you would like to share?

If you have any questions, please contact our Technical Support team.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>