Introduction

[00:00:00]
>> Hey everybody, welcome to this course, I'm really excited about it. This is my third time doing a DevTools course. But this is a brand new format, which I'm really excited about. The DevTools have added a lot of new cool things over the last year, which I'm excited about.

[00:00:14]
And this one's gonna be a little bit differently paced in that we're going for a nice introduction to DevTools. So we'll kind of cover it later, but I'm hoping this course will be a really good tool for people whether you're absolutely brand new, been using them a little bit for a little while or are pretty comfortable and just looking for cool kind of tips and tricks and ways to be more productive.

[00:00:35]
This whole course is one single repo that repo it's a link here for https://github.com/jkup/mastering-chrome-devtools. Or if you're not able to click on that, you can just go to github.com/jkup. Let me close this. And you'll see it's right on my home page, this mastering devtools link. And it should be, I've tried to make it as easy as possible.

[00:00:59]
So it's got instructions on it. You just clone the repo, CD into it, npm install and npm start. And the only requirement is Node, which comes with npm. So kinda the way that the course works is these pages which you can have locally if you have the repo, I'm just running the repo here so you can kind of see, I have mastering Chrome DevTools.

[00:01:19]
I did my npm install. And now I can just do my npm start, and it'll load up the server. Then I go to localhost :3000, and this should be the exact same course that you all have. Just some important links to kind of refer back to. This is the course repository where this course is hosted.

[00:01:34]
The official docs to Chrome DevTools are always a really good place they've been especially over the last couple years. They've put a lot of good content on there. They've got cool demos themselves. When they do updates, they mark them in there which is really good. And if anybody needs to get ahold of me, this is my Twitter handle, Jkup and my email address.

[00:01:53]
And I love talking about DevTools and the course so please feel free to message me. That'd be kind of an interesting to start because I feel like DevTools are an interesting topic where I'm really passionate about them. I feel like a lot of people find a lot of value in them but they're a little bit of an interesting topic because you won't necessarily find them on the job application, right?

[00:02:16]
It wouldn't be like needs Chrome DevTools experience. So I thought it'd be kind of cool to talk about why I think it's important to learn DevTools. I do think it's just a level up in general, like it's a really cool way to better understand code, better understand performance, all those things.

[00:02:33]
It's a great tool for finding bugs quickly. I think that if you're somebody who's really comfortable with the stuff that we'll go over today, so like using the console, using a step through debugger, using the audit tools, performance, all that, you'll be able to find bugs at work and fix them a lot faster.

[00:02:50]
It's a really cool way to start your journey down web performance. This is not a web performance class, but it really touches on a lot of web performance topics. So it helps you learn network requests, CPU, memory, all these things. And if you are a web performance expert, you will come back to DevTools a lot and use them when you're auditing sites when you're finding bugs or issues.

[00:03:12]
And then one of my favorite things about them is it's like when I got started doing web development, my favorite thing was to browse the web, find a really cool website and then learn how it worked. That was what I did when I was beginning. And I feel like the DevTools are a really incredible way to still do that.

[00:03:30]
I'll visit a website, and it'll have a really cool animation, and I'll really wanna know how it works. And of course back in the day, it was probably just like a single HTML, a single CSS, and a single JavaScript file. So I could download the whole site and play with it.

[00:03:44]
But these days sites are a lot more complicated but DevTools make the complicated site very easy to understand. Like how an animation happens, what CSS they're using for a cool piece that you see, or how they're getting things to load so quickly, all sorts of stuff like that.

[00:03:58]
So I think they can be really fun for just playing, exploring, learning too. I also kind of wanted to make a note if you look around, there's all these great courses that exist all over the web, especially on frontend masters. And a lot of them come down to this idea of creating, right?

[00:04:16]
There are about how to create react applications or how to create angular applications. But there's not a lot of courses out there that teach you what to do, congrats, you have an app and it's launched and you have users. What do you do now? And I find that a lot of people for their day-to-day job are in that situation where they're debugging things that the users find, or they're dealing with user complaints about speed or they're trying to make the site load faster, something like that.

[00:04:42]
And so I think this is cool because it works across all platforms, whether you have an angular site, react site, a node site, a Java site, whatever, you can really learn a lot and get a lot of value out of the DevTools. Cool. So kind of a general high level course outline.

[00:04:59]
So we'll start with a little bit of history on how DevTools came to be and kind of leading from where we started up to now. Then we'll do a walk through the panels. I kind of like it so we'll open the DevTools together. We'll click on each panel and we'll do not necessarily a high level, a medium level view of each panel, what it's good for, what we can use it for all these kind of different things like that.

[00:05:20]
So we'll walk through those. And then I break the course into different sections. So we'll do a section on editing websites, one on debugging websites, one on network performance, one on CPU performance, one on memory performance. And then we'll wrap up with doing full audits. If you were coming into a brand new site, or you're looking at an old site with fresh eyes, how would we do a top down audit.

[00:05:43]
A little bit about me. I'm John Kuperman, an engineer at Adobe and I work on the Creative Cloud. Before that I worked on the brave browser and I worked on twitter.com. I blog over at JohnKuperman.com and I really like teaching workshops on DevTools and accessibility.