This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Things Dev Tools Can Do" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Jon Kuperman: And then, to kind of get into the meat of what we're gonna talk about today, just an overview of things dev tools can do. So we're gonna talk about using dev tools to create and edit files. We're gonna be talking about using dev tools to actually author code, so not just tweak existing code.
[00:00:21] Able to persist changes to disk, so you use dev tools as your primary editor essentially. Step through debugging, so no more console logging in every single function. A really handy way to just actually step through applications. Do a full page audit for performance. Emulate different devices, both network conditions, device sizes, headers, all those things.
[00:00:44] Find and fix memory leaks in your code, do a general profile of your code which includes analyzing JavaScript performance, finding slow functions. Profiling also includes things like page jenks, so we'll talk about screen paints and stuff like that. So basically, kind of a full audit of your website, which will be network resources, memory, CPU, all that kind of stuff, and we're gonna do all that today.
[00:01:10] The official docs live here, developers.google.com/web/tools/chrome-devtools. They're really good, the only thing is like I said at the beginning, these things move really quickly. And so again, if you go to the official docs, you'll likely see things that are slightly different visually than they actually are in your browser.
[00:01:29] And I think that's just kind of always gonna be true. They really do add stuff, they move things around a lot. [COUGH] The two things for those that didn't get the email that I sent out, we're gonna be using Chrome Canary today. For those that haven't used it before, it's Chrome's kind of like bleeding edge browser, so it's a separate browser.
[00:01:50] Basically, it's the stuff that they're soon to release, so it's kinda their beta stuff. But what's really cool about it is they're at a lot more liberty to ship cool things in their developer tools. So stuff hits Canary long before it hits Chrome stable. So I always do my dev tool stuff in Canary, cuz it's got all the fun tools.
[00:02:07] That being said, it's not as stable as Chrome, so it might just crash. So we'll see, we'll cross that bridge if we come to it. And then the other thing is, I built this little Node app. It's really simple. That would make it fun to kind of interact.
[00:02:23] So all the demos I'm gonna be doing today are on this Node app. It's at mygithub/.jkup/mastering-chrome-devtools. For anybody that's for whatever reason not able to get it set up, I also have it at nodecast.io, which is a site that I own, colon, I think I put it at 4000.
[00:02:43] Yep, so if you wanna go ahead and go to nodecast.io:4000, you can get kind of a version here. And this will be good enough to do most of the stuff we're gonna do. There's a few things that we're gonna get into later that do require a local copy, but this should be helpful for that.