 So this video is an overview of the most popular features in Chrome DevTools related to inspecting network activity. Before we begin, let me mention that if you're trying to improve page load performance, the best place to start is our optimized site speed tutorial, which we've linked to in the description. The network panel is more useful as a diagnostic tool for viewing the timing of network resources and inspecting the network properties of individual resources, such as whether they were downloaded over HTTP1 or HTTP2. To get the most out of this tutorial, I recommend that you open up the demo, which we've linked to in the description, and try out the features yourself. Open DevTools by pressing Control-Shift-J or Command-Shift-J on Mac. I'm going to dock DevTools to the bottom of my window so that I have a little more space. Next, click the Network tab, which opens the network panel. Right now, the network panel is empty because DevTools only logs network activity while it's open. To view page load network activity, reload the page while DevTools is open. Down at the bottom, you can see the total number of requests and the total amount of data transferred. This chart up here gives an overview of network activity, but we're not going to use it in this tutorial, so let's hide it by clicking Hide Overview. This table right here is called the Network Log. By default, it shows you a chronological log of network activity. The status column is the HTTP response code that the server returned. The type column is the resource type. The initiator column tells you what caused the resource to be requested. The size column is the size of the resource. The time column tells you how long it took the browser to upload or download the resource, and the waterfall provides a visual summary of the network activity for each resource. Hovering over the waterfall shows a breakdown of the different phases. Click Use Large Request Rows to view more information about each resource. The size column is particularly helpful when making sure that resources are compressed. The top value is the uncompressed size and the bottom value is the compressed size. If the two values are the same, then compression isn't working. Click a header to organize the log along that dimension and click the waterfall to go back to chronological sorting. In general, I find the network log helpful for verifying that network requests are going through as expected. For example, when I add some code to fetch a resource, I'll often open up the network panel and make sure that the new request is going through. Or if I get a reference error about some function from another file being undefined, I'll watch the network log to see if the scripts are loading in the wrong order. One important thing to be aware of is that the log will continue to record network activity so long as you've got DevTools open. Looking at the bottom of the log, I can see that the last active resource was this 48.png file. After I click the Get Data button, there's a new resource called getstarted.json at the bottom of the log. If you've got a page that's logging a huge amount of network activity and you've already got all the information you need, click Stop Recording. If you don't find the default columns of the network log helpful, you can hide them. Conversely, there's a lot of columns that are hidden by default that you might find useful. To show or hide a column, right-click the table header. Each of these options is a column that you can show or hide. For example, let's show the domain column. Most users browse the web on smartphones. The computer that you build websites on probably has a better internet connection than your typical smartphone user. Network throttling lets you slow down your connection to experience your site like a mobile user. First, let's notice how long each resource took to download, which we can see in the time column and the waterfall. To throttle the network, click the throttling dropdown, which is usually set to Online, then select Slow 3G. This tab now has a network connection similar to Slow 3G and will continue to be throttled so long as you have DevTools open. Suppose now that you want to experience the page load like a first-time visitor. Long press the Reload icon and select Empty Cache and Hard Reload. Basically, this forces the browser to go to the network for all resources instead of going to the cache. Looking again at the timings, we see that each resource took longer to download. Next, let's dive into how to inspect individual network resources. To learn more about a resource, click its name. The Header's tab shows you HTTP request and response headers. The Preview tab shows you a basic rendering of the resource. For HTML, this is sometimes useful when working with an API that returns error codes in HTML. The Response tab shows the source code of the resource when relevant. And the Timing tab shows you the same timing breakdown that you saw when hovering over the waterfall earlier. Click Close to return to the network log. The network panel also supports searching across headers and message bodies for certain strings or patterns. For example, suppose that you want to check if resources are using reasonable cache policies. If a resource doesn't change often, the browser should cache it for a long time so that the same resource doesn't get downloaded repeatedly. Because the cache policy is defined in the header, the network panel is a good place to search for this information. Click Search to open the search pane. Type cache control in the text box, then press Enter. Clicking a result opens it up in the Header tab if the text was found in a HTTP header or the Response tab if it was found in a message body. When inspecting resources in the real world, you'll probably encounter pages with hundreds of network resources. DevTools provides many ways to filter out the noise and focus on a subset of the resources. The filters toolbar should be shown by default, but if not, you can show it by clicking the filter icon. The filters text box supports a bunch of different filtering methods. If you're interested in a certain type of file, such as PNG images, type PNG in the filter text box and DevTools filters out any resource that doesn't include the string PNG in its URL. If you want to match a pattern of files, you can use a regular expression. For example, this pattern filters out any resource that doesn't end with a C or a J followed by one or more S's. If you want to exclude a file or pattern, putting a dash in front of it makes it a negative filter. For example, dash main.css filters out any resource that matches the string. There's also 10 or so special keywords that let you filter by properties of each resource. For example, typing domain, column, raw.githubusercontent.com filters out any URL that doesn't match that domain. Check out the link in the description to see the full list of keywords. Moving on, sometimes you want to focus on certain file types such as CSS. Clicking CSS filters out all other file types. If you want to include another file type, such as JS, hold control or command on Mac, then click again. Click all when you want to see all file types again. Suppose that you recently added some third-party scripts to your site and you notice that the page loads much slower now. Request blocking lets you block individual resources and see how a page behaves when those resources aren't available. For this example, let's just see how the page behaves when its style sheet is blocked. Press control shift P or command shift P on Mac to open the command menu. Start typing blocking, then select show request blocking. Click add pattern, type main.css, then click add. Reload the page and we see that the page styling is messed up, which is to be expected because we blocked its style sheet. Notice also that the request for main.css is read to indicate that it was blocked. To discover even more network-related features, check out our network analysis reference, which we've linked to in the description, and leave me a comment if you've got any questions or feedback.