Check out a free preview of the full Mastering Chrome Developer Tools v2 course:
The "Developer Tool Panels" Lesson is part of the full, Mastering Chrome Developer Tools v2 course featured in this preview video. Here's what you'd learn in this lesson:

Jon demonstrates how to open and navigate through the Chrome Developer Tools. He gives a brief overview of each panel as well as the device emulator. Jon will be taking a deeper dive into each of the areas later in the course. - https://developers.google.com/web/tools/chrome-devtools/

Get Unlimited Access Now

Transcript from the "Developer Tool Panels" Lesson

[00:00:00]
>> Jon Kuperman: So before we kinda dive into any of the panels in specific, I was gonna do just a kind of quick walkthrough all of the panels so we can kind of see what their purpose is and be able to better anticipate the kind of stuff that we're gonna be covering later.

[00:00:14] Cool.
>> Jon Kuperman: So if I open up a new tab here and go to about:blank, and then open up the DevTools. Cool, we get a little something like this. So actually, let me, instead of about:blank, let me go to, this is what the sample app looks like. So before we get started with that, I guess the ways to open the DevTools, you have a couple of different options.

[00:00:40] Probably, the easiest one is to right-click anywhere, and then just click Inspect on your screen. You can also Cmd if you're on a Mac or Ctrl if you're on Windows, and then you can do something like Cmd+Option+i, it would open up the DevTools as like a shortcut there.

[00:00:54] But either way, once we get them open, the basic idea for those not familiar with them is that you got kind of these top level panels over here across the top. And then as you click through each one, it changes the content of what's down below. So another thing that's interesting, a feature I'd been kinda wanting for years is that these are all drag and droppable, and that those persist.

[00:01:15] So you can drag to reorder. So I do apologize if my order is a little bit different than yours, cuz I don't remember what the default order is. But we're gonna go across this way, kind of just do a very high level of what they're for, and then we'll start diving deeper into each one.

[00:01:29] So the first one is the Elements panel. This is back to that Hixie DOM viewer that we saw, basically the same thing. So on the left hand side, you have the DOM tree that Chrome has parsed from your HTML. You have all these nodes here. They're expandable. There's some cool things like if I minimize this a little bit, as you hover over DOM nodes, it does its best to highlight the node itself up there.

[00:01:53] They're expandable by clicking on the arrow. A little cool trick is that you can hold, I believe, it's the Alt key, well, Option on Mac, and if you click on the caret, then it expands all of them. So you can expend your entire tree back and forth. If you just click on it, it just expands that one.

[00:02:12] And then on the right side are all the styles. And so what happens here is that you click on a different DOM element and then the Styles panel updates to show you what styles are being applied to it. So this I find is usually like the most common thing people have done with DevTools so far.

[00:02:26] So you would like find an element then you go over to styles and you'd kinda see what's going on with it. They show a bunch of cool information, like basically, what you're seeing here is every single style that's applied to it. And the ones that have been kind of trumped are crossed out, so you can see which ones are rendering.

[00:02:42] There's a bunch of other really cool tabs over here, which we'll cover when we get into the editing section, but the kind of basics of this are your HTML and your CSS. Then we have the console. So this is interactive consoles, so you can type things like 1+1, and it'll evaluate it.

[00:02:57] We can go a little bigger. You can do any JavaScript expressions. So you can do const foo = "foo". And then if you type foo, it will, as a repo, it'll read and evaluate that for you. You can also do longer things like multi-line functions. So you could do function bar, and then instead of hitting Enter, which would just evaluate it, wow, that's new.

[00:03:17] [LAUGH] So it used to just evaluate it if you did that. I guess, it's smart enough now to know that you have an open-parenthesis. So if you just hit Enter, it drops you down there. You can do a console.log["hi"]; something like that. And then you can close it, hit Enter.

[00:03:30] And then if you type bar and you call it, it will greet hi. So you got this kind of interactive repo here. There's some really cool things that we'll get into where the elements and the Console panel work really well together. And by that, I mean that you can select any element in the Elements panel and you can bring it into the Console through some keyboard shortcuts.

[00:03:47] So just pretty cool if you wanna see like what APIs are available on it. Then we've got our Sources tab, make this a little bit bigger. So basically, I kinda want you to think about the Sources tab as your text editor. So like very similar to any other text editor, you've got all the files that are coming down from the file system over here on your left, and if you click on one, it opens it up over here in this like tab thing.

[00:04:10] So this is pretty similar if you use like Sublime or VS Code or anything like that. The difference being you have this kind of debugger over here on the right. And so this is what we're gonna use for setting breakpoints and then step through debugging. It's got a bunch of really cool stuff that we can do kind of beyond just console log.

[00:04:28] Some more in-depth debugging over here. But the left stuff is just really nice text editor, it's got color highlighting, everything like that. The next one, we have the Network panel. So if I have the Network tab up and I do a Refresh, the Network panel basically shows you what's called the waterfall.

[00:04:45] And so the waterfall is like every single HTTP request that your website makes, right? So if you think about it, you have a website for the first time and you get an HTML file and it has CSS, JavaScript's links to other stuff, whatever. All those get pulled in, and so this is gonna show you every file that came down, its type, its size, how long it took, a bunch of great information.

[00:05:08] Yup, this one is kind of a new one. It's a combination, so it used to have like profiling and timeline. Now, you have this Performance tab. So if I kind of like click the Record button on performance and scroll around the page and then I click Stop, you get a lot of information.

[00:05:28] So we'll be covering this pretty in-depth, but basically, it does like everything that your CPU is doing. So like all the JavaScript that gets parsed, what it's up to, where repaints happen, where JavaScript bottlenecks could be anything like that. This one's the Memory tab, so another kind of like confusing area is that for debugging memory leaks, you actually end up using the Performance and the Memory tab a lot?

[00:05:54] So it's a little bit confusing but the performance is like your kind of best place to start. We'll dive deeper into it but this Memory tab allows you to do these profiles, these snapshots basically where you can grab like a moment in time on the site and it'll show you all the memory that's been allocated to your site, what it's for, why it got there, everything like that.

[00:06:12] So this is really great as we get into the memory leak section. We've got this Application section. This one also used to be called resources, I believe. So it kind of serves two different purposes. One, is that it shows all of the kind browser storage you have. So I'm not sure if any of you have ever used like local storage before, if you set cookies or if you set session stuff or index.

[00:06:34] These are all options that you have when you're developing websites for like sticking something on the user's browser so that you can read it again later. So commonly, like if you log on to a website, the website will set a cookie with your login information, so when you come back, it can read that.

[00:06:49] Similarly, if you have like preferences that you set like, I like this theme or this whatever. Those are pretty common to be stuck in local storage. So you can go to any website and you can start clicking on them and see like what, if any, information that website is storing about you, all right?

[00:07:07] The next one, this one's pretty straightforward. [LAUGH] This page is not secure. And so the idea here is there's been this really big push over the last couple of years for HTTPS, so for using secure socket layers everywhere, basically. So some things you notice out of Google are when you go to a secure site, so if I go to google.com, I'll get this green lock here and the word secure across the top, right?

[00:07:34] You'll also notice that if I open the DevTools on google.com and I go to Security, I get a lot more information, like the security certificate is valid, the connection is strong, all these different things. So the security comes in really important for a couple of reasons. One is all the security problems, right?

[00:07:51] If you have a website and you're taking any kind of sensitive information, login credentials, anything like that and you're not doing it over HTTPS, then it can easily be sniffed and read and stolen. But the other thing from the product side is that Google and a lot of the other browsers and search engines and things like that are really starting to punish sites that aren't secure.

[00:08:11] And so if you have a blog or something like that that you're trying to advertise, and it is not over HTTPS, they're gonna down-vote it in the search results. And that I think we're gonna continue to see a big trend towards that. So this panel doesn't really provide a lot but it's always important to make sure that it's green so you know that Google is happy with your site.

[00:08:29] The reason that it's a little bit complicated is if you think about a website that itself is over HTTPS, it serves itself, and then maybe you have like a MailChimp link or something like that. And that's over HTTP, right? So now we get into a little bit of a tricky area where the site itself has a certificate, but there is a form on it that reaches out to something insecure.

[00:08:48] And so this will show you every single request that your site does and make sure that they're all green.
>> Jon Kuperman: All right, the next one is the Audits panel. So this has been recently replaced with this tool called Lighthouse, which Google's been working on for a really long time.

[00:09:04] It's a great tool. The Audits panel, I always think about as like a very high level view. Something like the performance or the memory or network, those are like really low level. You're actually seeing your HTTP traffic or you're seeing your JavaScript usage. The audits is a lot more like it runs your site through a suite of tests and it gives you back really actionable feedback, but it'll give you back things in plain English.

[00:09:27] So it'll give you back things like these images are too large. You have too much CSS that's not even being used, or this site doesn't look good on mobile. Things like that, right? So it gives you this really actionable feedback. It's always where I like to start, and at the end of the workshop, we'll do some live audits to people's sites.

[00:09:44] And audit the audit step is always where I start before diving into performance or network or anything like that. Cool, and yep, and there we go. So that's all of them. We've got a couple more buttons here that I wanted to cover. So one thing, if we go back to my app, one thing that's difficult sometimes is if you're in the Elements tab and you have a really complicated app with a lot of markup, sometimes it can be difficult to find the item that you're looking for.

[00:10:09] So one trick which I see a lot of people do is when you right-click and click Inspect, the DevTools will actually do its best to open focused on whatever you're right-clicking on. Right, so you can kinda right-click and boom, I have this focused. When you get into really small things, it's a lot more difficult for the DevTools to know what it is that you're trying to focus on, right?

[00:10:28] So if you've got like a little button with a border with a background something like that. So this over here, you can use, you can click it once then you'll go into this selection mode where you can move your mouse around, and as you're moving your mouse around, you'll notice that the DOM actually changes its focus.

[00:10:42] So you can kinda get it as fine grained as you want, and then when you click, it pops you back into the Elements tab with what you clicked on. The other one over here is this Device toolbar. So I can click this, and we go into this device emulation mode.

[00:10:56] So it's pretty cool, so you can do, I guess back to things that I see a lot. I see people testing their mobile layouts by kind of dragging the window around. They try to get it to where they think it is, but you can actually just go to this device simulation and you can set it to responsive.

[00:11:13] And then you can fully control, what's 500 pixels wide, how does that look, things like that. You can zoom in and out. This isn't controlling the websites. It's controlling your perspective of it. You can test what it's like in offline mode or even in different mobile conditions. And you can even select specific phones.

[00:11:32] So what does it look like on a pixel two? What does it look like on a pixel two turned sideways? What does it look like on a pixel two on a low end mobile device turned sideways and then I hit the Refresh so you can see that it takes a tremendous amount of time to load.

[00:11:44] So this is really good for a lot of different things. It's good for testing your screen sizes. It actually does send the mobile headers, so if you have an app, it's pretty common with big companies that when you hit their website, they'll detect what kind of device you're on.

[00:11:57] And if you're on a mobile device, they'll send you to a different experience, whereas if you're on a desktop device, they'll send you to one. So if you want to test those things, you can just set a mobile device, Refresh your site, and it should be redirected to the mobile experience.

[00:12:11] It's also really good, this is like a big thing that as we get into performance what I'll harp on a lot is that a lot of us are very lucky as developers. We have high-end machines, we have access to really good high-speed Internet. So we'll test our site, we'll be like, it's really snappy to me, right?

[00:12:27] It looks really good. And then, we'll get out there and we'll have all these problems, all these people having these problems. So I think the network simulation is so good for developing that empathy. I know a couple of big companies, they'll do things like low-tier Tuesdays or something like that, where the IT department like crank down the network connectivity speeds in the office on a day of the month, or whatever, to kind of force everyone to have that empathy for what it's like browsing the Internet at 2G speed or something like that.

[00:12:54] But I think it's really important because, again, I think there's a discrepancy. Sometimes the site'll load really fast for you. Then we'll run an audit, and the audit says it's really slow. And it's like, well, what's going on here? And it's like, well, the audit is Is really trying to think about the average use case.

[00:13:06] So like somebody on an average device with an average Internet connection is having a very different experience than you. Cool, and then the last thing is over on the right side. We've kinda got all these settings, and we'll get into a lot of these later. The important one for now is just this idea of like you can control where the dock goes.

[00:13:23] So you click on the Settings, you can control, dock it to the left, dock it to the right, dock it to the bottom or pop it out into its own tab. Usually when I'm working on something like a big site, looking at performance and stuff like that, I pop it out into its own tab so I'm not constrained by it only being part of the screen.

[00:13:38] And then I think the last thing I wanted to show you that's kinda cool is what's called the console drawer. So on any tab except for the Console tab, you can hit the Esc key, and the Esc key will bring up a little drawer here with the console and it looks just pretty nice.

[00:13:53] So you can be looking at some kinda element and then you can be like, wait a minute, document.getElementById, that element, you can do things like that. So you can kind of be doing both at the same time. And then you can go ahead and close that by hitting Esc again.