This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Network Panel" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Jon: The network tab is pretty straightforward compared to some of the stuff that we've been doing. So there's a lot going on on the screen. The basic thing like I showed before, I'm gonna go ahead and pop these out to full screen just so we can see a little bit better and them a do a page refresh.
[00:00:21] So we've got some different things going on here, we've got a little magnified view of like what they call the network waterfall like an asset loading and then another one loading and like you make this bigger. You'll see these are like really common patterns you'll see so you'll see like one bar and then a bunch of wires and what's going on here is this one buyer is your index out HTML.
[00:00:43] And then, as soon as that gets downloaded it gets parsed. And as it gets parsed it's like index.html is where you keep your scripts and your links and your style sheets, all that stuff. So then it sends out and starts fetching all these different requests. With more robust apps you'll see a way more complicated waterfall but it's basically like each bar is a file coming over the wire.
[00:01:04] And where it starts is the millisecond that that requests started right. So it's like and how wide it is how long it took to get down so that makes sense. So wide bars take long to gum down where they start across the X axis here is the millisecond that they started.
[00:01:21] And then, the spacing is caused by like if you have an mark up document that calls a style sheet and then like that style sheet that imports another style sheet like these things are then dependent on each other. They block on each other and make this one smaller.
[00:01:37] So then a different way of viewing the same information is this list here. So it start at the very top always with the document, type document status. There's a ton of information here like you can see the size, how long it took. So I tend to think, please stop me if I'm getting confusing with this stuff cuz there's like a lot to cover here.
[00:02:00] So you start with a document, and then it, this shows you like a very similar and we're gonna cover this stuff in a minute there's like all this information about like not so the bars with this how long it took but there's more than that we want to know why I things take longer.
[00:02:13] They can take a long time for a ton of different reasons like they're really big the network was slow the server is slow a bunch of different stuff. And so, then you can kind of see in order. You can start scrolling down here and see every file that was called.
[00:02:27] You can also see this initiator tab which will show you what file initiated the call for this file. So we have a bootstrap that CSS and the initiator is debugging that HTML, that makes sense, right? Like they cause a CSS. You can see their size. All these are sortable.
[00:02:45] So you can click on them. The top or bottom sort. Another nifty dimp tools trick that I like, is you can hold a shift over any item, and it will in the green show you what called it, and it will in orange or red to show you what it called seeing it kind of like it's the same as looking at initiators basically but it's kind of like a cool way that you can like hold shift and look through.
[00:03:08] I'm pretty zoomed in so you can't see a ton of them but it's kinda cool play around with cool and then. So that does that make sense. You kinda see in this waterfall everything that loads down. Cool. So some other cool things here. They allow the screenshots which I love.
[00:03:23] This is back to the how important it is. Performance and also into the how complicated performance can be. So I'm gonna refresh one more time now recording screenshots with this camera here. And what you wanna look for is basically with your app. Let me see what's going on.
[00:03:40] I think this one's just really fast. Let's go to Twitter with screenshots enabled. So basically, what you wanna look, got a breakpoint, is what loads first like how stuff is coming in, come on breakpoints, get out of here.
>> Jon: I think I still have this open from one of my last examples.
[00:04:08] Any XHR. So basically what you're looking at with these screenshots here is as stuff comes in and starts loading, what does the user get to see? And this comes back into this like complication of, how your app is meant to be presented. So sometimes you get yourself into a situation like I said where you're Blocked downloading Avatar images that are like a 1,000 pixels scroll down from the viewport.
[00:04:34] And because the way your markup is set up you haven't even loaded the welcome text yet things like that. So you can use the screen shots to get a really good idea as your page this is before the restart, and then we can see the restart happen and then we can see like this is a pretty good example.
[00:04:51] So all the text comes in immediately and then the images start coming in here and they fade in. So basically what this is doing is that snapping a screenshot every time the screen does a paint of any kind. And you can get a really good feel of like how stuff loads.
[00:05:07] So this site looks pretty good, I've seen a lot of sites before where it's just the way the markup is, it's like white with one image and it waits until the whole image loads before it even starts bringing in the menu or anything like that, so this is just like a case by case basis kinda thing.
[00:05:21] You also can with this list, this kind of big list that we saw, [SOUND] hide screenshots. You can sort in a bunch of different ways. So let's go back to my local host file and so what you can do with the sorting is you can say I like only show me JavaScript and it will just say the JavaScript files are like only show me CSS something like that, that's really helpful and you can think it's Cmd click, or I guess Ctrl on Windows Linux to sort by multiple things.
[00:05:52] So you can be like only show me JavaScript and CSS. You can also filter if you got a bunch of different files. So you could look for, I don't know, main, or you can do some actually regular expressions in here, too but I'm not gonna get into that now.
[00:06:06]
>> Speaker 2: Can you touch on what the different colors are in the bars?
>> Jon: Yeah, that's definitely my next subject, cool. So I think that's the stuff I wanted to cover. I wanted to talk real quick too about this disable cash making sure you always have this otherwise you're going to get bad information because you've got cash files so you won't get a very good picture of how your apps loading and then there's like these two different views.
[00:06:28] So you can hide one or hide the other if you want just for viewing it. So let's get into the colors cuz they're really important.