[MUSIC PLAYING] KAYCE BASQUES: Hello. 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 in. 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 Headers 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 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, -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: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 lower 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. [MUSIC PLAYING]
