This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

    mykola bilokonskymykola bilokonsky

    Use the Overview tool in the Network devtool to see requests over time, and to constrain the tool to a given window of time so that you can focus on a subset of traffic.

    chrome-devtoolsChrome DevTools
    chromeChrome
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 As we've seen looking at the network history of your application as it runs, is really something that takes place over time. If we go over here to the network panel -- let's go ahead and restart an empty cache and hard reload so we can see this -- we've got this overview tool up here at the top.

    00:20 Now you can toggle it by clicking this button here. What this is showing, is the amount of time that's elapsed since the application was opened. Over here is, zero, and the longer it runs the longer this grows out. This overview tool allows you to do a snapshot.

    00:42 Let's say we're going to go ahead and click on it a bunch of times, and we're going to get the name from the server. We're sending out a bunch of different requests. All of that you can see visually here over time when those requests took place, and you can see about how long they took.

    01:00 I can click, and I can select this window here. What that's going to do is filter this view, to show me only those requests that took place within that window. I can zoom -- I'm using two fingers on my trackpad to zoom out and to zoom in to make this window larger or smaller -- and I can use two fingers on my trackpad left or right to drag this window around.

    01:28 If you're interested in the network performance of your application over time, this is a really good way to hone in on specific things, and examine only those events that took place within a given window.

    Discuss

    Discuss