A Quick Overview of the Network Tab in Chrome Dev Tools
The Network Tab is Powerful and Underused
: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.
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, 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.
Timeline & Finding Lag
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.