Examine AJAX Requests with Chrome Devtools

Analyze HTTP Requests and Responses with Chrome Devtools

Filter Requests in the Network Panel in Chrome Devtools

Test Slow Network Performance with the Chrome Devtools

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

Understand HTTP Status Codes with the Chrome Devtools 

Debug HTTP with Chrome DevTools Network Panel

A large enough project will frequently flood the network devtool with content. Use the filter tool to restrict which HTTP requests you’re inspecting so that you don’t get overwhelmed.

[00:00] As your application gets more complex, there's going to be more and more traffic that starts showing up in your Network tab.

[00:09] For example, we've made a few changes here. Now, this kitten image automatically cycles every five seconds to a different image. Now every time I click it, instead of just updating this counter here, it actually is going to send an update to the server, and then render, once the server responds, with the total number of clicks.

[00:31] This is, of course, going to allow us to do things like persist the number of clicks across sessions. As long as the server doesn't get restarted, we're going to be able to keep track of how many times the users clicked.

[00:45] Again, this is just a contrived example, but what I'm trying to show you here is that like in any kind of an application that's running long enough, this Network tab is eventually going to get pretty full, and so you need to learn a few techniques for how to keep this manageable.

[01:04] The first one is, look, you can always clear it. This button here is going to erase everything that was there to begin with. If you're sort of filing bankruptcy and you don't want to get distracted by hundreds of requests, you can do that.

[01:18] Another thing that you can do is press this Record button and it's going to stop recording things. This is on by default when you switch over to this tab, but maybe I really just cared about this. I want to dig into this, and I don't want to be distracted by having 30 new requests come through here.

[01:37] I can turn this off for a while, then I can turn it back on, and it's going to restart.

[01:42] Go ahead and do some clicks. Let's set the name back to Egghead on the server. Let's get the name from the server a few times. Click again.

[01:56] What other techniques do we have at our disposal? Well, Chrome's got really good filter tools built in. If you click on this button here, this is going to allow you to restrict the view. It's not going to stop recording things, but it is going to limit what it shows you.

[02:11] For instance, maybe I only want to show images. I can click to only show images, and now, all those HTTP requests that are generated by Ajax, you can see that the clicks are still going out, because it's still incrementing, but it's not showing up here.

[02:28] If I want to see only my Ajax requests, I can click on XHR and suddenly, all of those things are still here. I can also use, like, on a Mac, so I think it's a Command and click to select multiple fields at once.

[02:43] I'm looking now at Ajax and image, but I'm not going to see CSS. When I refresh the page, it's only going to show me the get request to the kitten service and to the click service. But if I remove all these filters and go back to Show All, of course I'm going to see all of these things.

[03:07] Don't be surprised when you're working on even a medium to small application, if you find yourself trying to manage a lot of click traffic through here or a lot of network traffic. Remember that web development is basically distributed systems development.

[03:23] Like you're building an application and part of it lives on a server somewhere and part of it's running in the browser, and so you've got to be able to navigate this space. You've got to be able to recognize that this network panel here is the service boundary between the two different parts of your application.

[03:39] Being comfortable and not getting overwhelmed is an important skill to develop.

Course

Debug HTTP with Chrome DevTools Network Panel

Filter Requests in the Network Panel in Chrome Devtools

Share this video with your friends