A Quick Overview of the Network Tab in Chrome Dev Tools

The Network Tab is Powerful and Underused

I’m sure everyone knows most of the standard Dev Tools tricks like editing HTML or JavaScript in the source, or imitating a :hover in the Element tab’s CSS Styles browser. So instead let’s focus on one specific tab – the Network tab in Chrome Dev Tools – which I think maybe should be used by more people that might overlook it.

Filters

Let’s start with the Filter option since I think this is a very useful feature, especially when you need to check params being sent via an ajax request. I recently worked on a project installing Omniture analytics that sometimes required us to check for an ajax call to verify the proper Omniture variables were being sent. The only way to do this was to find the call in the Network tab, and check Omniture’s query string params in the Headers.

But tracking the ajax call in the Network tab can be a pain. If you’re preserving the log, you might have a ton of lines to scroll through, and in this case, the request itself isn’t apparent at all even with only a few lines to look through. Can you spot the request that’s being sent to the Omniture server when we click on this modal that loads a product page via ajax?

For development, we know our custom Omniture server’s URL starts with the “dc.” subdomain, and we can add that into the filter. Even if we preserve the log, we know that every single line that shows up is only going to be an Omniture request. In the image below, we can see that adding the filter makes it easy to find what we need to look for. And removing the filter adds back in all the useless noise.

You can also filter by type: XHR, IMG, Document, etc.

And you can even filter on things like domain, response header, status code, etc.

Throttling and Page Load Screenshots

Another neat tool is capturing screenshots during page load (the video camera icon). This can be good to get a sense of how your site looks during the load process. Are your custom fonts or stylesheets being applied later in the load which leaves your page looking weird initially? If a particular image isn’t loading until the end, does it really look that bad before it does?

Sometimes your own personal internet connection can be too fast to really see what the page load might look like for other people. So you can mimic a slower connection using the throttling drop down, and then in conjunction with the page screenshots, see how the page might load, for example, for someone viewing it from a phone with a 4G connection.

The more basic stuff

These next features you probably have used in the Network Tab in Chrome Dev Tools, potentially quite often, but I can’t do an overview of the Network tab and not mention them.

Headers & Responses

As I mentioned above, the best way to check which params are being sent on an ajax request, or by a form submission, is to check the Headers of the request that was sent. The Headers tab is also, obviously, a great place to check all of the other associated HTTP Request headers that get sent with a request.

With increasingly heavy JavaScript-based web applications JSON responses are more popular than ever, and you can use the Response tab to check what any xhr request sends back.

Timeline & Finding Lag

Is your site loading slowly? Is it a large image or just server lag? Maybe some off-site JavaScript file you’re loading is coming from a site having server issues, which would then block all of your other JavaScript. This is a job for the timeline. Let’s look at the timeline as cnn.com loads (I’ve also turned on the timeline overview bar at the top):

A few different things are going on here. The purple vertical line that shows up at about 4 seconds denotes when the DOMContentLoaded event is fired, and the red vertical line that shows up to the right of it is when the load event is fired. This is good to know if you have any JS that depends on these events, so you can check if they were loaded afterwards.

It shows the order files were loaded, when they were loaded, and how long they took to load. The two things you’re probably most interested in when looking at a file with a long load time are the green and blue parts of the line. The green line shows how long the file waited for the first byte to be sent (TTFB) and can be indicative of server lag. The blue line shows how long it took the file to actually download, and can be indicative of a file that’s too big, or a slow server.

More resources

Google itself has some resources for finding information about each tab like this overview of the Network tab, or this page of Dev Tools tips. Don’t feel like you need to just use Dev Tools to inspect HTML and CSS, or debug JavaScript in the console. It can do so much more. And we haven’t even touched on the Dev Tools great Mobile Browser testing suite. If you haven’t used that before, click the little iPhone looking icon next to the element search magnifying glass, and go to town. Hope you enjoyed this overview of Network Tab in Chrome Dev Tools, more to come!

---