Mastering Chrome Developer Tools v2 Mark and Measure Solution
This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Mark and Measure Solution" Lesson
>> Speaker 1: So let's go through this exercise together. So the first thing I'm gonna do is I'm just gonna close the dev tool so everybody can kind of, or I guess I'll minimize them over on the console here, so everybody can kind of see what's going on. I'll go back into my editor.
[00:00:13] I'm gonna close these two tabs, and I'm gonna open up that mark and measure it out JS. So we got it here, right. So we can kinda do this thing that we've been talking about, right. We can be like Const start = new Date getTime. Is that the right API?
[00:00:26] I feel like I'm blank now. Yeah, I don't know why it didn't autocomplete. And then when we're done here doing all this forEaching we can do we can do const end = new Date.getTime. And then we can do const time = end- start. And then we can do console.log(time).
[00:00:46] Is that kinda making sense or we're just kinda doing this stuff that we said we were gonna do? So we go back here and we hit a Refresh. I knew, I see, I did this, this is why it wasn't auto completing.
>> Speaker 2: Use date now, it's a-
>> Speaker 1: Yeah totally, I just forgot date's a constructor so it needs these here.
[00:01:04] So we'll go new date then call a getTime on it. So here we go. We refresh the page and seven. So it took seven milliseconds, five that time. So it's a little different each time. This is another cool is when you're doing it one time through Lighthouse you see that one run.
[00:01:18] But things can be a little bit nondeterministic, so we start gathering all this data of all the runs you can get a really good average. So there we go, so we got five. So the other way that we could do it, right, is the way that I’ve outlined here.
[00:01:32] So we can do performance mark, right. So we can do instead of this thing we can do performance.mark start. Then here we do performance.mark end. And then here we do performance.measure and we give it any name we want, fetching Images. And then we just pass in which things that we wanna measure between, so start and end.
[00:02:01] And again, those can be named anything, right. It could be between fu and bar, whatever you wanna call it, as long as whatever you define it as are the things that you check it for. And then we could do performance console or const measurements, right. And then the way you do that is performance.getEntriesByType, and then we can pass in measure.
[00:02:23] So this will get all measures, which we only have one, and then we can just console.log measurement. That's not what I meant, console.log,
>> Speaker 1: Cool, so we'll go back here and we'll just refresh it. And we see we've got this thing, and we kind of get the same information, how long it took.
[00:02:43] But like I was saying, we get a bunch of cool information like what was the start time, what was the name, all this different stuff here. The other really cool thing about doing it this way, well one, you don't have all of these variables kind of all over the place, right.
[00:02:55] To do it with the date times need to be declaring all these variables or this way you are just using a built in API. Number two, when you go over you do the performance, and we'll just do a refresh with the performance here. Let me drag this out here, and I'm just gonna pop it out so you can all see.
[00:03:13] So you go here and you see this new thing here, right, this user timing. So we zoom in on user timing and we get this really nice UI where it's 6.2 milliseconds fetching images. And you can start putting these all over your app, right. So eventually you can just start doing these performance profiles and then you'll see like, there's this really big one for send reply, or there's a really small one for this kind of thing.
[00:03:35] And you can kind of click into it that way. So yeah, so you get these kind of great label, it plays really nice with the rest of the dev tools, and you can see how long things are taking for the users. Cool, any other things on user testing, user performance testing?
>> Speaker 2: What do you do to get the entry logged, the performance entry logged in your console?
>> Speaker 1: I just did, so you can do a getEntriesByType, and so I get all the measurements. So if I had other ones anywhere else, you could show all of them. Otherwise you could just save this and console log that too.