This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Developer Tools Panels" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> John Kuperman: Let's do a quick walk-through of all the panels, get to know what they're good for, things like that. And you can feel free to ask any questions, but do know that we are gonna do a deep dive into each one of the panels as we go. So I'm gonna go ahead and open up the developer tools on my project.
[00:00:23]
>> John Kuperman: Which is here and I'm wanna keep them as large as I can. There might be times just because there's a lot of competing information, so there may be times I have to make them a little bit smaller just to show the whole screen. But we'll go ahead and start with the elements panel.
[00:00:38] So this is what we talked about at the beginning. I should actually cover For those that I have never used them before the way to open the dev tools. You have a couple of choices. You can right click anywhere on the document and click inspect and that will open them up.
[00:00:51] There's also a handy keyboard shortcuts. Like I always use a Command+Optioned+J to open them up in the console and there's like Command+Option+I open them up in the elements. And that's I think it's ctrl+shift+J and I for Linux and Windows users. That's how I get it open. The elements panels, the first one we gonna talk about and this is basically what we discussed at the beginning.
[00:01:12] So this is like an interpreted Dom and it's really cool. You can do a ton of stuff that will cover later. You can kind of drill into all the markup on your site. You can see comments classes. You can change stuff by double clicking into it. And so that's all the markup and HTML on the left.
[00:01:30] And then on the right is all the CSS that applies, and again, really interactive. You can change the actual selector, you can change properties, you can add new properties, and we're gonna do a bunch of stuff with that later. There's also a lot of other things here which are really handy.
[00:01:45] We're gonna cover computed styles in depth, but you can see all the event listeners on your current page which can be really nice. So you can see like what's listening on click and you can see that bootstrap.js says I don't know I'm a slow counter but maybe 12 different click listeners and you can look at those.
[00:02:03] We'll cover dom break points later, but you can do some pretty cool debugging stuff from here. And then same with like properties. You can take a look at like all the different, pseudo elements, all the different ,regular elements ,nodes things like that. So that's the elements page. Probably the most or second most common used panel to sketch your HTML and your CSS.
[00:02:25] The next one is the network panel. There's kind of a lot going on here and we will talk a ton about it. But basically, if you do a page refresh with the network panel open, you get this really handy waterfall which is essentially every single HTTP request that is made as the page loads.
[00:02:43] So you can see if we kind of make this a little bit bigger, you can see that the very first thing to load was a document. So this is our HTML. And then it calls out to a stylesheet. So you can kind of get this waterfall visual of like how the page is downloaded and then parsed, right.
[00:02:58] So it hits the CSS first, cuz that's at the top in the head, and then as we kind of scroll down later, it hits the JavaScript. So there's a lot here. Basically, it's just kind of giving you this visual representation of how your page loads and from there, you can sort it in a bunch of different ways like just see the JavaScript, just see the CSS stuff like that.
[00:03:20] Cool, the next one is the sources panel. This is where we gonna get started with learning how to use dev tools as your IDE or your editor. It actually looks a lot like an editor. So you have your file tree over here and then you have your actual file pane and you can do things like command P to open a file.
[00:03:38] So I can open like style.css. And then just we expect in a text editor. You have all the abilities to edit and here. There's also this right panel which we're gonna talk about in the debugging section. This isn't used for authoring code. This is actually used for step through debugging and things like that, so we will get to that but in the next section.
[00:04:01] The next one is the timeline. The timeline, is probably gonna be the one that we spend the most time on because it is the one with more features. Essentially, just to give you a quick view of it right now, you can start a recording, you can do what ever you want, scroll around and click on stuff.
[00:04:16] Then you can hit on stop and it gives you just a tone of information. So, basically it allows you to capture all the network request, do a JAVAscript profile, gets screenshots of how your site loads, capture memory, and screen repaint. So basically as the years have gone on, more and more features have made their way into the timeline panel.
[00:04:37] And it's become in my opinion the most powerful of the panels, because it actually has, network has its own tab, but you can get your network requests right here in timeline. Profiles lets you do memory stuff, but you can get memory stuff right here in timeline. So I think we'll probably spend the most time looking at all this complicated information.
[00:04:56] Profiles are cool. They let you do f one off. You can record the JavaScript CPU, and what we're gonna do with that is we're gonna be able to look at and find like what are most expensive functions are? Where a web app is spending the most time. You can get this bottom-up view of all of your code.
[00:05:12] Same with memory. It allows you to take these heap snapshots which is all of the stuff the browser has in memory for your current page. And it actually lets you compare them, too. So if you're looking at memory leaks, which we'll do later, you can take a heap snapshot and then you can do the action.
[00:05:28] Send a tweet or click on somebody's Facebook profile. Whatever you think is causing your memory leak, then you can take another heap snapshot and you can compare them. We’ll do that. And then yeah, you can do these cool things with like look at all the allocation. And allocation is just like memory allocated and what it's allocated for., So in programming, every time you make a variable or add an event listener in JavaScript, all these different things take some amount of memory.
[00:05:55] So we'll be able to look at specifically what our web app is using and debug from there, whether it should be freeing that memory up or not. Console, probably the second or first most popular tab. It gives you an interactive JavaScript REPL. REPL is read, evaluate, print, loop.
[00:06:12] So you can just type JavaScript code in, console.log, hello. And it will evaluate it and spit it back out for you. So you can see the hello here. You can do a lot of stuff in here. Interacting with elements from the page is pretty cool. You can do, yeah I guess we'll cover it in a bit but you can do a lot more than just execute JavaScript code.
[00:06:36] But this is also where if you put any console log or console error console warn in your code and you run it, this is the tab you'll go to to see what's going on there. Audits are great. This is like a much more high level view. So we took a quick glimpse at some of the really technical tabs like network and timeline where you're seeing all these graphs and statistics.
[00:06:58] Audit is like a much more top level you run an audit on your site and it gives you some intelligent advice like it'll say your images are too big or you have too many CSS files, stuff like that. So I find this is a really nice place to start because you're not really diving into the thick of it.
[00:07:14] You're just kind of looking at some easy low hanging fruit that you can fix. And then the last two are actually both new. For those that have used the dev tools, up until last week, you are probably familiar with the resources panel which is now gone. It's still in Chrome stable, but it's gone in Chrome Canary.
[00:07:31] And it's been replaced with this application panel. Application's pretty cool. What resources did for those that didn't know is it allowed you to view all of the basically allocated storage on your website. Cookies, session data, anybody that's using a cool, I don't know if you've used index db before but it's like an in browser database that you can use.
[00:07:55] So resources used to be like the place to go if you wanted to see like if your session was being set correctly or how much data was being kept in your cookies or something like that. All that's still here in applications. So you can look through and see if you have any data in here.
[00:08:11] But now it also has support for two different things which are we're not really gonna covered in depth about service workers which allow you to build apps that can work offline. And app manifests which is this idea coming from Google which allows you to have this little metadata for your application.
[00:08:30] And if you have one of those on Android devices, you can save web pages as though they're apps to your home screen. So it's kind of this way that things are moving. So all that's f been added to this new application tab, which I'm very happy about because researches was my least favorite panel.
[00:08:47] That wasn't super useful before. And then the last one is also new is a security panel. And so this is just really going to tell you two things. Do you have an SSL certificate, which I don't on this local server, and it's gonna tell you that you should.
[00:09:01] And then also for those familiar with security, just because you have an HTTPS for your site, it doesn't mean every asset on the site is over HTTPS. So think for example, if you have a website on HP's and you're pulling some JavaScript from a CDN, that's just H-T-T-P.
[00:09:19] Or you're including a video and I frame would be really dangerous. So this gonna tell you, does your site have it which you could just look up here and see if you have it. But it's also gonna look at all the assets and make sure that every single one of those assets is a cell enabled.
[00:09:34] So yeah, so that's the really high level overview. We are gonna definitely talk a lot about each one of those tabs. I just wanted to give you a feel for what they do. Another cool thing in Canary, I'm not sure if it's in Stable yet. But you can actually drag these tabs around now and they persist.
[00:09:51] So you can set them in whatever order you would like them to be in. And this is particularly annoying for me because Console was always really far away. And I remember at Twitter, all of our automated tests would run in and I'm gonna show you this real quick.
[00:10:07] This little three buttons up here allows you to pin them differently. So you can pin, the dev tools come pinned to the bottom. You can pin them to the side like this or you can pop them out into your own full screen like this. Use your own discretion and you know whatever you need screen space wise.
[00:10:21] On Twitter, our test would run like this and Console was too far off that I couldn't click on it so I couldn't see any of my Console log errors. So I love that you can drag these around now cuz if you need Console, just drag it to the very beginning and you'll have it there.
[00:10:35] So yeah, there's some other stuff we'll cover. You can take a look at the keyboard shortcuts. There's all sorts of cool settings. We're gonna get into experiments later which allows you to actually try out the stuff that they're actively developing which is where we may see some crashes, but it'll be fun.
[00:10:50] And then I think the last thing I wanted to talk about in this overview is actually over here. Let me close this little settings here which is device simulation. This is one thing that's gonna look dramatically different on Chrome Stable from Chrome Canary. But basically, this allows you to go into this emulation mode.
[00:11:10] Let me go ahead and I'm gonna, one thing I do a lot is I'll pop the dev tools out so they're full screen. And then I use Cmd+~ to toggle just to Chrome. So the DevTools are open but they're hidden right now. So basically, this allows you to simulate different devices.
[00:11:27] It’s really good for testing how your Apple look, on a mobile device. It’s not perfect, so I always wanna put that caveat out there. If you care about mobile users, which you certainly should, you really need to be testing on real devices. That being said, this gets you pretty far away.
[00:11:44] So you can pick a device like an iPhone 6. You can pick how wide you'd like to view it. So 100% of an iPhone 6 would be this. And then it's cool, you can interact with it a lot. One thing that's important to point out is that this is not just changing the view port.
[00:12:00] It’s actually changing the headers that your site throws. So for example, if I were to go to I think like twitter.com throwing this iPhone 6, it's actually gonna, far as I can see redirect to mobile.twitter.com. So it's not the same as dragging your browser really small, which changes the view port.
[00:12:18] This is actually throwing the same headers that iPhone 6 will throw. So you can get apretty close experience. With that being said I mean, this is just emulation. It’s not actually using a device. Cool so yeah, I use that a lot. You can change it from panorama mode back and forth and then you can like also even do things like a responsive design mode.
[00:12:41] This is there on just a web header. But from here, you can drag your site around and see how it performs at different breakpoints. So I'm gonna click this again to stop device emulation and then we go ahead. I'm gonna pin these back to the bottom here.