Mastering Chrome Developer Tools v2 Introduction
This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Introduction" Lesson
>> Jon Kuperman: Hey, everybody. This is Mastering Chrome DevTools. My name is Jon Kuperman. I am a software engineer at Adobe. I work on the Creative Cloud products, which is a lot of the products, but It is pretty awesome there. We have LaCrosse. I am @jkup on Twitter [INAUDIBLE] all the the things.
[00:00:20] I am usually really, really responsive on that. If anybody, especially anybody that takes the course has any questions or recommendations or anything like that, I love feedback. I love questions. I love talking to people online. Feel free to hit me up there I also have this github ama thing, which are kind of cool.
[00:00:38] I think probably other people who have done courses have them too. It's just a public way if anybody, just answering questions like, how do you, how'd you learn about this? Or what is your color scheme? Or what is your, just anything like that. I really like using the ama format for that.
[00:00:54] Cool, so kind of like expectations or what we'll learn today. And I guess before getting into what we'll learn, kinda the format of this course is gonna be doing a little bit of learning from some slides. And then I'll jump into the DevTools and we'll do a little bit of exploration together, and then we'll jump into an exercise where you'll do some exploration by yourself.
[00:01:14] And then we'll go over the exercise together. If the exercise is, if you find them difficult don't worry, because we'll go over every single bit of it. If I'm them easy and you get done early, it'd be a cool idea to start trying to apply those things to websites that you work on, or you own, things like that.
[00:01:29] I think the number one goal of this course is it about a specific tip or trick, but is to get comfortable poking around in the Devtools. You really can't do any harm in there. So get comfortable learning what each panel is for. How to use it, run it through your site, all that stuff.
[00:02:03] Analyzing network traffic we'll go pretty deep on how things come across the network, how you can use dev tools to find bottlenecks in your code. Auditing websites so this is a little bit more of a high level overview. So we'll be able to take a website, run it through some tooling, and get all sorts of feedback on a lot more human readable like too many images or they're too big or unused CSS a lot of stuff like that.
[00:02:29] Monitor real user performance, so we'll both learn how to check the website on our computers and see how our websites are doing. But we'll also learn how to ship some code to your real users that will feed back information about how the website loads and runs for them.
[00:03:07] So the different causes of memory leaks. How to see if you have a memory leak on a page that you're working on. And then how to dive in and figure out what might be causing it. And then the last thing is I try to intersperse a lot of tips and tricks.
[00:03:18] One thing that I love about the DevTools is there's little gems everywhere. Which I think can be kind of intimidating at first. There's all these options and settings and experiments and stuff like that. But hopefully as we go through, anything that comes to mind that I remember, I'll shout out little keyboard shortcuts or little cool things that you might not know that you can do.