What do you want to learn?
Skip to main content
Using The Chrome Developer Tools
by John Sonmez
An exploration of every one of the 8 panels that exist in the Chrome Developer Tools toolbar.
Start CourseBookmarkAdd to Channel
Table of contents
Overview and Console
Hi, this is John Sonmez from Pluralsight, and welcome to this course on Chrome dev tools. Most web developers and Chrome users are at least somewhat familiar with Chrome's developer tools. But not many developers take the time to really learn how to use the tools. This course is aimed at giving you a comprehensive look at all of the major features of the Chrome dev tools and showing you step by step how to use each tool. By the end of this course, you should feel pretty comfortable using the Chrome dev tools and have a good idea of what exactly each of those tabs on the Chrome dev tools toolbar does and how to use them.
Who This Course Is For
What Are The Chrome Dev Tools?
Opening The Dev Tools
Opening The Console
Getting to the console is pretty easy. You can hit Ctrl + Shift + I to open up the developer tools, and then click the console tab, or you can just hit Ctrl + Shift + J to jump directly to the console where you can type your commands. You'll also find that, when you're in other tabs, for example, the element tab, that you can show the console and it'll come up about halfway up the screen so you can still interact with these other tabs and use the console at the same time. This comes in very handy when you're trying to debug something and you need to look at the source code in order to determine what commands you need to type in the console. We can hide the console again just by clicking this hide console.
And once you have some logs in your console window, you may find that it's useful to use these filters at the bottom. It's set to all by default, but if I click on errors, you can see it's only going to show me the ones that are error level. If I click on warnings, it'll only show me warnings. If I click on logs, it'll only show me the log. Then we have this debug, which it's not showing me anything, and that's because I haven't put out anything with console.debug. We can use console.debug just like we use log and say debug message. And then that will actually show up as a debug, doesn't show up as a log. We can also do an info as well, we can do console.info, also works just like the log. And we can say info, and you'll see that that one does show up with logs, it doesn't show up with debug or errors or warnings, but does show up on all, just like everything else shows up with the all. And you'll probably notice when I have got the All clicked that you don't see those old messages. If I reload this page, you'll see them all show up again. The reason why you didn't see those old ones was because in between showing you the debug, I'd actually executed this clear command, and this is another useful command that you'll find in the console to clear that window to get rid of that stuff so you don't see all those old log messages and get confused if that was happening on this current load of the page or the previous load.
Grouping And Formatting
The Chrome dev tools console can do more than just log simple messages. It can also format them and group them together to make them easier to understand. Using the group command, we can group together messages into a collapsible titled group that can even be nested. And using formatters we can format messages just like you can do in most programming languages. You can even apply CSS styles to your formatted messages, if you really want to.
Command Line API
One of the most useful features in the Chrome dev tools that is often overlooked is the ability to use jQuery-like selectors directly from the command console. There are three main selectors you can use to select DOM elements in the console window. First, you have the single dollar sign selector that will select an element based on the CSS selector. Just add the CSS selection in quote in the parentheses after the dollar sign, and it will select that particular element if one matches. The double dollar sign selector will select the collection of elements that matches the selection criteria, and the dollar x selector lets you select an element using xpath, which is really useful for troubleshooting automated test tools like Selenium where you often have to use xpath to select an element.
Using The $ Selector
We can also utilize a command called inspect, and if we combine this with our selector, then what it will allow us to do is to be able to find the HTML in our page for that particular DOM element. For example, if I say inspect and then I do our selector, let's do our selector dollar chromeImage. What will happen is you can see that it selected this chromeImage, it's brought us to the elements panel which we'll discuss more in the next module, but the key thing is that it selected this image, so we can find this in the source of our page and it's highlighted for us, we could then work from here. And you'll find that the console works along with some of the other panels to allow you to do things, you can put your command in the console like we did here, it'll take you to that element where we have this image, and then we could do some work with this, manipulate this. I find that many times when I'm using the Chrome dev tools, I'll do a lot of work in the console and select elements and do things like that from here, and then go to the other panels as needed or when something in the console takes me there.
Hopefully you now have a good understanding of the basics of the Chrome developer tools and are familiar with using one of the most powerful features of the dev tools, the console panel. I've covered the console first because even if you just learn how to use the console, you are likely to save a large amount of time debugging web pages using its interactive parser. But there are still a lot more goodies to come. Up next, we'll be looking at the elements panel and seeing how it can be used to greatly reduce the roundtrip time from making changes to a page and seeing the results. Thanks for joining me and take care.
Hi, this is John Sonmez, from Pluralsight, and in this module, we'll be going over the elements panel. Most developers that use the Chrome Developer Tools have at least seen the elements panel, but you won't want to skip this module, because we'll be going in-depth, and learning about some tips and tricks that you might not be aware of. Learning the tricks of the elements panel can save you time in getting your design just right, and troubleshooting tricky layout issues. In this module, you'll learn everything you need to know to start using the elements panel like a pro.
View, Edit, Reload
How do you edit web pages now? If you're like many developers, you might go through this all-too-common cycle of seeing a problem in your web page, in the browser, then opening up the page in your editor, making the changes, and saving them, and finally, reloading the page in the browser to see your changes. It might not seem like a large amount of wasted time or extra work, but it can be expensive to keep doing this cycle over and over again, especially when you're trying to get an element positioned just right, and have to keep on going back and forth between browser and editor.
The element panel provides a solution to the view, edit, reload problem. Using the elements panel, you can avoid having to flip back and forth from editor to browser, and can instead make HTML and CSS changes in the elements panel itself, and those changes will be instantly reflected in the browser. Want to change the text of an element? Add a class, remove a style? The elements panel can do all that and more. I've personally found that once I started using the elements panel instead of switching back and forth between editors, it became a much more pleasant experience to get my page layout just right.
Elements Panel Overview
Using Inspect Element
Probably, the most prominent feature of the elements panel is the inspect element. Using Chrome, we can right-click on any element, for example, this H1 header, and choose inspect element. It'll bring up the elements panel automatically, and the elements panel has quite a bit of information here. You can see that it's selected this H1, it's shown me, in the source, basically, where this H1 is defined, or rather what it looks like in the DOM, currently, and if I hover over this, you can see that it highlights the H1. In fact, if I hover over this image, it highlights that. It also shows me some information; you can see that it's giving me the ID of the image, up on the screen, and it's showing me that it's a 500px by 500px. Same thing with H1; it tells me the height and width of it. Also, we have this navigator at the bottom, which shows me where I am. I'm under HTML, body H1. I can also click on any of these to go back up the tree, or down the tree, and find out information about each one of these elements. They're all collapsible, inside of here, and images even give us a preview; if I hover over this Chrome.png, I can see what the actual preview image looks like.
Adding And Editing
Suppose you were looking at your web page, and you decide, below this Chrome image, we want to put some text that says: this is the Chrome logo. Normally, you might go to your editor and change the HTML there, to add that new element, then refresh this, in Chrome, to see the result. But, using the elements panel, we can easily just add an element, to see what it would look like, and get everything right before we go back to our editor and make the final changes. I can just inspect element, on this image, which is going to take me right to the image location. If I right-click here, you can see that I can choose edit as HTML, and from here, I can just add a new element. I can just say, P, and then we'll say this the Chrome logo, and we'll end our paragraph. Then, if we click out of here, you can see it's added this right to the DOM, and we can see, it's showing up directly inside of the browser. We can also edit elements directly, inside of here. If you double-click, you'll notice that it brings up the editor, for the text inside this H1. We could change this from unofficial to the Chrome Dev Tools Rocks Home Page. You can see that change is reflected immediately, and if we double-click in something like an image, you'll notice that this ID becomes editable. If I hit tab, it'll let me edit the next attribute. This way, I can change any attributes, I can also add attributes, I can say add attribute, for example, add a class, we could say class equals Chrome image, or whatever class we wanted, and now you can see that that's been added to the DOM. Now obviously, changes that you make here aren't going to automatically be saved back to your source; we don't know where your source is coming from, it could be an ASPX page, it could just be some HTML, like it is in our case, that's sitting on my file system. But regardless of what the source is, you can make your changes in here, to see what it's going to look like. And then, towards the end of this module, I'll show you a way that you can export these changes back out so that you can change the original source, once you're done making all the modifications. Doing things this way makes things a lot faster, because you can just do the modifications right here in the browser; you don't have to go through that cycle of editing, saving, viewing it again. Instead, you just make all your changes here, until you get the page how you want it, and then you can go back and change it one time, in your original source.
Moving And Deleting
Another useful thing that we can do very easily is to move elements around. Let's say we didn't like where this text was, and we wanted to move this. Well normally, we'd have to edit the HTML, or delete our element and add a new one, and that can be a little bit time consuming when we just want to move something around. Instead, in the elements panel, we can drag, and we can take this paragraph, for example, we could put it above the image. You can see that the node automatically moves. Now we can see that the text is up here. In addition to doing that, if we highlight this line, we can, of course, hit the delete key, and it will delete that node. Pretty simple and basic features, but many developers don't know about these, and these are real time savers, especially when you want to move elements around instead of having to manually edit that HTML. This can come in pretty handy.
I find sometimes, that it's a little bit difficult to find the exact element that I want to click on, inside of Chrome, because there might be some other elements that make it up, there might be a span, this might be inside a DIV, and perhaps if I want the DIV that this H1 is in, inspect element is not going to be exactly the tool that I want to use in order to get there. But, fortunately, the elements panel has another handy tool, which is this little magnifying glass here. If you click on this, it'll put you in inspect mode, and you can see that as I'm moving my mouse around on the page now, it's showing me, and automatically selecting whatever element I happen to be hovering over. You can use this to really figure out exactly what elements are on the page, and get an idea of what their sizes are, but you can also select an element, for example, if we select this, we have cookies, you notice that it shows up directly in the elements panel, and it's highlighted for us.
Another handy little trick that I didn't show you in the console module, even though it relates to consoles, is the ability to select a previously selected element, with a console command. If we use dollar zero, what this will do, is it will give us whatever element we had previously inspected. So, in the elements panel, when we had right-clicked and chosen an element, it ended up storing that in the history, in this buffer of elements that we've previously selected. This makes it a little bit easier than having to try and come up with a CSS selector, or the jQuery style selector, if you aren't sure of it, or you just want to do something a little bit quicker than having to type that out. It has a buffer of up to five elements, so we can do from zero, one, two, three, and four, and it's going to give us all those. You can't go past this dollar four, but usually, this is going to be enough of a buffer to be able to do what you want to do. So this is just a quick way to get a previously selected element, for example, let's say that you didn't want to type out the jQuery, but you wanted to get this image, we could just do inspect element, quickly come over to the console, and do dollar zero, and there we have that image.
It can be very hard to figure out exactly what CSS is causing an element to be displayed the way it's being displayed on the page, or to behave the way it behaves. Using the styles section of the elements panel, you can not only see exactly what CSS rules are being applied, and where the rules are coming from, but you can also modify those rules, and even add new rules, live, in the browser.
You may have noticed already, that on the right side of the elements panel, we have the styles section that shows us the styles that are being applied for the currently selected element. For example, when I have this H1 selected, we have this element style, which is the style that is directly inside this element; we don't have anything specified, so there's nothing showing up here, and then it shows us where each style matches. So for example, we have a style that is the user agent style, or the basic browser default style; you can see that it styles H1 with display block, font size 2EM, a couple of these web kit specific ones, this font weight of bold. Then we have some style that's coming from body, which is coming from this mystyle.css, on line two, you can see that we have this text align center, and if we were to click on this, it would take us to the sources tab, and show us this mystyle.css, so we can see exactly where that CSS is coming from. We'll get more to that later, when we talk about the sources tab. And if I click on the image, you can see the same type of thing; we have the images styles, that you can see that it's getting that text align center, because it's inheriting it from body, on this mystyle.css line two. Let's look at a more complicated example; if we go to the Pluralsight homepage, if I right-click on this element, for example, and say, inspect element, the styles here are a little bit more complicated. We have some styles that are coming from this #panels.column.mobile. You can see exactly where it's coming from, and what styles are being applied, and then you can see that there's this psminified.min, that is applying some styles to a large number of elements. You can see what those styles are. You can see another one, and these lines through mean that whatever the style that was being applied here, is being overridden by some other style above it, that's being applied later. So this is pretty useful for figuring out when a style is being overridden, because many times, you'll apply a style and then wonder, why doesn't this style show up? Well, if you see a line through the style, you know that something else is overriding whatever value you specified.
Another useful part of the styles section is this computed style. If you expand this computed style, and you have an element selected, you'll notice that it'll show you exactly all the styles that are applied. It'll basically take everything that's below, in this styles section, and put it all together to show you exactly what styles are being set on an element. This is very useful, because it can tell you exactly what styles are being applied, and you can even see where they're coming from, just by expanding any of these nodes. You can see that these are coming from this user agent style sheet, but if we go to the text align, it's coming from this mystyle.css two. You can really see the use of this when we go to something more complex; if we go to that Pluralsight example again, and we're looking at the computed style on that element, you can see there's quite a bit of information here, which can be really useful to know about when you're trying to troubleshoot why an element is not showing up correctly. In addition, if you notice, anything that has a color, we can click on this color picker, and we can actually change colors, by selecting a color, inside here. We'll talk about this more when we look at editing the styles, but this is a very useful feature as well. If we go back to our page, you can see that there's this show inherited box; if we click this, what's going to happen is it's going to show us all of the styles, even the ones that weren't explicitly set. This would be all the defaults that just exist for that element. This is useful for troubleshooting if you're trying to figure out, well, does this have a padding box for the background origin? Or, what is the box flex? Any of these weird values that you may not have set explicitly, but somehow they're being set on your element, you can see exactly what they are here. Most of the time though, you do want to have this turned off, because that's quite a bit of information.
Enabling And Disabling
In addition to being able to just look at the styles and see where the styles originate from, we can also enable and disable the styles, right here in the elements panel. If we go over to our styles, and if you look at, for example, this image, you can see that we have, on our body, this text align center. If I uncheck this box, it's disabling the style. Now this is really useful for figuring out what styles are causing what changes to occur on your page. You can just re-enable that style again by checking the box. You'll notice some of the styles, for example, if I click on this H1, we can't disable; these are the ones that are the user agent style sheet, because we're not actually setting these styles, these are just the defaults. And another important thing to note: when we disable the style, for example, this text align center, notice all the elements are shifting. That's because we're not disabling the style specifically for this element. We're disabling this style in general, that's defined in this mystyle.css. You can see, since this is defined for body, it's going to apply to all the elements on the page. Therefore, when we disable it, it's going to disable it for all of those elements as well.
Editing And Adding
We can also directly edit a style. For example, if we wanted to change our body style, instead of text align center, we could change this to text align right, and now you can see, everything is aligned to the right side, and this affects all the elements that are in body CSS rule. If we look at the CSS now, it's changed the CSS on the sources tab, and a little bit later, I'll show you how you can utilize this change in order to see all the changes that you've made, and make those changes to your original CSS files. But for now, let's take a look at another thing you can do, which is to add a style. For example, let's say that on our H1, we want to change it so that this text is red. Well, we can just do a color, and then choose red. You can see that we have this auto-complete, if you hold down control and hit space, or you start typing a word, it'll bring up this auto-complete; I can hit the right arrow to auto-complete this, and then if I click out of here, you can see that it's changed the text to red. And if you look at the HTML, on this side of the elements panel, you can see that it's added this in-line style for the color red. I'll go ahead and change back that text align to be center, but we'll go ahead and leave the red.
Now, suppose we wanted to make it so that when this H1 is hovered-over with the mouse, that the text changed to blue. We can do that using the elements panel, under styles, pretty easily. All we have to do is go to this toggle element state, and here, we can toggle hover, visited, focus, or active. By checking this, it's going to add this little orange dot; this orange dot, if you hover over it, will tell you what the element state is. In this case, it's set to hover. If I set it to active, you can see, it'll say that it's set to hover and active, and what we can do, is we can add a style for hover. So for example, I can do a new style rule by hitting this plus, and then I'm going to say H1, colon, hover. Now, I'm going to add a rule that's going to apply to any H1 element, whenever it's hovered over. I'm going to change the color to blue, and you'll notice that this is crossed out. That's because this element style is overriding this. If we uncheck this, then you see that the text changes to blue; the reason why the text changes to blue is because it's acting as if this is hovered-over already, because I have this checked. If I uncheck this, you'll notice that it's back to black. This is a quick way to check any of these states, instead of having to move your mouse over, and you can see when I do move my mouse over, it does change to blue. Instead of having to do that, you can just check one of these, to set that particular state. This allows you to be able to create styles right here, to test out how they're going to work on active, visited, focus, and hover, and change them around. And this part's a little bit tricky; you'll notice that you have to keep that hover checked, otherwise you're not going to see matched CSS rules, because it doesn't actually match a rule, so you might not be able to find, where is that hover coming from. But when it is checked, and it does match, this does show up, and it shows that it comes from this inspector style sheet. This is a special style sheet that gets created, that's part of the Chrome Dev Tools, that, whenever you make changes like that, or add a style, it doesn't really have a place to go, so it goes to this inspector style sheet, and we'll talk about this a little bit more when we look at the sources tab.
One of the things I hate the most about working with HTML and CSS is getting the paddings and margins just right. I can never remember which is which; I frequently have to stop and draw myself a diagram to figure out what's going on. Fortunately, the elements panel includes a section called metrics, which lets you visually see the margin, border, padding, and size of an element, and then modify them directly. This is another hidden gem of the elements panel that I find immensely useful.
Editing The Box Model
Before we look at the metrics panel, let's create a border around our image so that we'll be able to check out all of the properties that we can change, in that box layout. If I go to my image, under element style, I'm going to say border style, we're going to set this equal to solid. Now, you can see that we have a border showing up, with the default width. And if I go into this metrics panel now, we have this margin, that's not set, we have a border that is showing up as three, we have our padding, and then we have the size of our image, 500 by 500. Each one of these, you can see, visibly, on the screen, when they're set to a value. For example, let's say I changed the top margin to be 10px. When I hover over this, you can see that orange on the screen that indicates that 10px margin, that's showing up on the top. If you look over on the left-hand side, over here, we have this style applied; it basically just added this in-line style to make the margin top 10px. This is really useful for figuring out exactly where you want your elements to show up, and messing with the margin and the border, and the padding. We could also change the padding; so make the padding be five, and now when we hover over the padding, you can see there's a top padding of five. This makes it really easy to see what each one of these does; if you've been confused before, about the difference between margin and padding, you can clearly see it right there, and you can see where border fits in as well. I could change this border, for example, to five, now you can see that that top border is set to five, and when I hover over it, the border turns to that brown color. I can also even change the image size within here. Let's say I wanted to make this 250 by 250, I'll just change this to 250, and then, the other one is changing to 250 as well. And you'll see that all the changes are reflected on this left-hand side; they're being reflected as in-line styles. So you can make any modifications here, as well, but remember, with these in-line styles, it's going to behave just like an in-line style. Setting something in here doesn't necessarily override something that wouldn't be overridden in an in-line style. If we went and added to our element style, a border property, and we set the border to two px, for example, you'll notice that that border has disappeared, and the reason for that is because we have some conflicting styles. If I uncheck this, that border comes back, it's using the settings that are showing up in this in-line style. But you just have to be careful of things like that, that could cause some confusion. This is not doing any magic, all this is doing is giving you a visual way to see these properties that affect the margin, border, padding, and the size of the element, and then putting them in-line, here, in the DOM.
It can also be a little bit difficult to figure out what event handlers are hooked up to what elements, especially when you use a library like jQuery, and you're adding event handlers dynamically, you're not embedding them in your HTML. But, Chrome Dev Tools allows us to check this. You can see this event listener section; we don't have any event listeners, but I can add one, if I go to our H1, I can right-click and choose add attribute. Here, I can say, on click, and we're just going to say, console.log hi. What's going to happen now is, when we click on this, and I've clicked a few times, go to the console, you can see it's put out hi five times. In fact, it collapses when you put out the same exact text, so that you just have a count, which is a nice feature of the console, by the way. Now, if we go to our elements, and we look at event listeners, if I click back on this H1, you'll see that we have this click, and I can expand this; it shows me what element it's on, where that element's declared. I can expand that further, and I can see some attributes. For example, for the listener body, I can see the function on click, I can see that it has console log hi, in there, I can find out some useful information about that particular event, that's listening to that click, including the type, this happens to be a click event.
We happen to have a pretty small web page for our example, but if you have a large, complicated web page, it can be difficult to search that and find what you're looking for. You can use the search functionality, by hitting control-F. That'll bring up this find window, in the bottom. Inside here, you might think this is just a normal find window, and it will operate as one, for example, if I search for unofficial, it highlights it, and shows it on our page, but, in addition, it can understand CSS selectors, and XPath. For example, I could use the CSS selector for our image element, by doing pound Chrome image, and you can see that it's matching the ID of Chrome image, and it highlights this entire element. I can also use XPath, for example, I could do slash slash HTML, if I add another slash for head, it'll take me to the head. From inside there, I could've went body instead, and then H1, and you can navigate directly to that. So this is a very useful search feature that can help you to navigate the elements on the page, and also just to test XPath. I frequently use this to test an XPath expression, on my page, because if I can get it to show up highlighted here, I know that that XPath is correct.
The last thing that we're going to talk about in this module is local modifications. Let's suppose that you've been playing around with your page and you've made some modifications to that page; well, you might want to get those modifications back out, and put them into your original application. After all, the whole point of making the modifications in the Chrome Dev Tools was to save you the round trip of having to go back to your editor, and back and forth, but when you're all done making those changes, and you've got everything working how you want, you might want to get those changes back to your original source. There's two main scenarios for doing this: the first is if you've modified your HTML. For example, let's suppose that we went into here, and instead of unofficial, we change this to say the Chrome Dev Tools Rocks Home Page, and perhaps we made some more modifications in here, like we had done earlier. Well, there's not an easy way to just get the changes. The best thing to do, that I've found, is to just collapse this entire HTML node, right-click, and say copy as HTML. Then, you'll notice that you can just paste that anywhere. So for example, I have a text editor open, and I'm just going to paste this, and it gives me nice, formatted HTML, that I can then use to make any modifications to my original version. Now obviously, if you've generated your HTML from an ASPX page, or some other server-side generation tool, this is not going to be exactly what you need, but it should help you to figure out what changes you might need to make, in your original source that generated this HTML in the first place. The other scenario is when you have modified a style, as long as you haven't modified the element style. What I mean by this is, for example, let's go to our H1, and for our element style, let's say color equals red. You can see that this puts this in-line in the HTML. For this, you would want to just copy this HTML, like I had shown you before. But, if you even add, for example, if we add a new style rule, for H1, and we say color is red, then you'll notice that it creates this inspector style sheet. And then also, if we modify any style sheets, let's change this mystyle to text align right, then what's going to happen is, we can get these changes. For example, this inspector style sheet, if I click on this, it takes me to this page that is created, which is just a style sheet; all my changes that were added, as styles, that weren't specific to a style sheet, will be reflected here. I can just right-click, choose save as, and I can save this as a style sheet. Also, I can go back to my elements tab, and let's take a look at this mystyle. Here, if I click this one, I can save these changes as well. You can see the text align right, has been set. I can just do a save as, and save that to save and update my style sheet. We can also revert changes, but we're going to look at more about that when we look at this on the module, on the sources panel. But just as a real quick overview, if you right-click, and then you choose local modifications, it'll show you what modifications you've made, and you can even revert those modifications, or go back to the original version of the page.
Okay, so now you have no excuse for doing that miserable cycle of viewing your page in the browser, then making changes in the editor, and reloading it again. The elements panel gives you the ability to edit your web pages directly in the browser, so you can get everything right, and then export those changes back to your original page one time instead of 100 times. There's still more goodness to come though, as we'll be looking at the resources and networking panels next, and learning how to figure out exactly what resources our web page is using, and where they're coming from. Thanks for joining me, and take care.
Resources And Network Panels
Hi, this is John Sonmez from Pluralsight, and this module we'll will be digging into HTML5 features as we explore the Resources panel and checking out exactly how resources are being loaded in the Network panel. We'll be learning some good techniques for determining exactly what data is being used in your web pages as we check out the Resources panel. And even though we won't be digging into the specifics of HTML5 features like IndexedDB and local storage, we'll see how the Chrome DevTools allows us to see exactly what data is being stored without having to write debugging code to get that data. We'll also learn how to make sense of all the data in the Network panel in order to figure out exactly what data is coming over the network and how long it's taking to get there.
Resources Panel Overview
The Resources panel is your central location for looking at the data your application is using and storing. From the Resources panel, you can see basic information like what HTML pages, images, scripts and stylesheets are being used by your page, but you can also see information that is not as easily accessible like local databases, local storage, cookies and even the application cache. Don't worry if you don't know what all these things are, we won't be going into detail about them in this course but I'll briefly explain them as we cover them in the Resources panel.
Another thing that you might notice is that I'm using the version of Chrome from the dev channel for Windows. And the reason for this is because I found that the IndexedDB and a couple of the resource's features weren't quite working in the stable release of Chrome. By going to the dev channel, I was able to get a later version of Chrome. Now by the time you're watching this course, you might just be able to use the regular version of Chrome that's out there as a stable release. But just in case, you might want to go ahead and download the dev channel version. And the good thing about this is that it installs this side-by-side so that you can have your regular Chrome, you can still have the dev channel, you can choose which one that you want to launch. And you can find these release channels just by going to chromium.org, or you can just search for Chrome release channels and you should be able to find this pretty easily.
Local and Session Storage
The last thing that we're going to look at for the Resources panel is the application cache. And you'll notice that this one I'm not using my own code for, and that's because you can't really get application cache to work with the local file, and I wanted to make sure that the examples for this application could work from a local file. But I went to this Microsoft site, this ie.microsoft.com/testdrive, and from here there's this cookbook demo. Inside here, it has a great example of using application cache. It also has some good IndexedDB data, but let's go ahead and go in here, I'm just going to click start. It has some recipes, you can navigate through here. But what I'm really interested in is seeing this app manifest. And we're not going to go into all the details of how application cache works, but basically it allows you to locally cache some resources for your webpage so that you don't have to have them be requested from the server each time that page loads. You're using this to cache quite a few different files. You can see what is cached, how it's cached, the type, the size of the file, and you can also see some status information like if you're online or not. For example if you went offline, this would turn off and you should still be able to load that pages using the application cache. This is a great tool for troubleshooting because working with this application cache can be a little bit difficult. You have to set up an app manifest that is going to define what things are going to be cached. And if you want to really make sure that it's working, it can be a little bit hard to figure out when you're just reloading a webpage. Instead, you can look in here and you can see oh, all these things are actually being cached, it did get the commands correctly and the size is right.
Network Panel Overview
Reading The Timeline
More Advanced Timeline
Let's look at a more complicated example. I'm going to bring up the Pluralsight page, just that Pluralsight.com. You can see now that there's quite a few more resources that are loading in this Network panel. You can see that they are loading mostly from cache. Let's make sure that we have our disable cache set. We'll reload this page and we'll get some real information about what's going on. Now what you'll find often when using a real big page like this is that you're going to have a little bit too much data for you to comprehend. It's color coded by the different types, but it still becomes a little bit difficult to sort through all this. One thing that you can do is you can go to the bottom and you can filter. You can actually choose multiple filters by holding on Control and clicking. By default, it's showing everything. But if I click on document, for example, there's only one document that's coming back. You can see where in the timeline that this happened. And when you hover over this, you can also see how long it took for even DNS lookup. It was one millisecond, so that's pretty quick. Connecting took 80 milliseconds. So there's some time wasted there. Sending, there wasn't any because we didn't send any data. Waiting, we waited 148 milliseconds before we actually start downloading this page. That seems like there's some time wasted there, and then we have 171 milliseconds for actually downloading the page. So that was relatively quick, but we spent quite a bit of time before we even got the page. This is really good for troubleshooting because you can figure out exactly where is that time being spent? Many times, developers will optimize the page content or the size of the page and not realize that you just have this built in latency, the time to connect and waiting that you might not be able to do as much about. We can also filter by stylesheets. We can see there's three stylesheets. We can see where they loaded up in the timeline. Images, there's quite a few images. And you can see that there's this breakdown here where we have a bunch of images loading about the same time. Then this other set of images starts loading up. And the latency is actually decreasing each time. And then finally we have another set of images and then this final set down at the bottom. In fact these images are loading after this load event fired, which is something to know about as well because when you have certain things that don't need to load up right away, you can try to optimize your page so that this load event is allowed to fire and things can start going before everything is rendered. We can look at scripts, there's quite a few scripts that are showing up. Then we have this XHR. We don't have any XHR requests right now. These are basically Ajax requests that will be made by the page. This page isn't making any. We have some fonts. Web sockets, we're not using web sockets. And then other, there's a few other things that are showing up on this page. Another little handy trick is to hit this button down at the bottom, which will collapse these to use smaller icons. And you can see a lot more data, it's a lot more manageable. We can also sort by these columns. We can see the status, the type. What's really useful is to sort by the size. You can see what's actually taking up the most size, what's your biggest thing that you're downloading. And then the time, what's taking the most time? Well it looks like the main page is taking the most time to load. That's probably because it has to pull in all those other things and it has a lot of content on it.
Sorting The Timeline
The last thing I want to show you in this module on the Network panel is the ability to actually look at the request and response. Let's say that we want to know what's happening when this training page downloads. We can click on this here and you can see that we have this area where it tells us exactly what the request was and the response. In our case, we made a request to Pluralsight.com/training, used the GET method, we got this 200 status code. Okay, here's all the headers that we had sent and this cookie information. And then all of the response information as well. We have the response headers that come back, you can see that it's gzipped, so we're compressing that data that's coming back. If I look at the preview, I can see the actual HTML. They came back, same thing is going to show up on the response. We can look at the cookies explicitly here and then we can also look at the timing. This gives us a nice color-coded view of the timing for that particular resource. If I look at something like an image, this gif, you can see that this one actually had a status code of moved permanently. When we look at the preview in response, we can see that there is nothing because it gave us this 301. But I look at a png and you can see that we were able to get this one. We can look at the preview and it'll show us the actual image. The response is not going to have any response because it shows up in that preview, which is an image. And then we can see the timing as well.
Sources And Network Panels
Sources Panel Overview
Modifying The Scripts
And let's not forget the scope variables. This is also very useful for debugging, most debuggers have some way to view what the scope variables are. Inside of Chrome we can view them and let's create a few variables so that we'll see something, we'll say var a equals a, var b equals cat, var c equals one. Then if we set a breakpoint and we execute this DoStuff, we'll open up our console, we'll say DoStuff, what'll happen is it'll break here, but if we look at our scope variables, you can see that these local variables show up we can very easily see what's in scope and what the values are. This is pretty handy for doing some debugging, so you don't have to put everything manually into the watch expression, it just gives you a very quick view of seeing what's going on. You can also use this global one, but it's not quite as useful, because there's quite a bit of things usually in the global scope, but you can check this out. You can see that we have our step and thing at the global level, therefore they'll show up here, if you can find them, we have step number set to three, we have thing set to ants.
Event Listener Breakpoints
Audit Panel Overview
The audit panel is a very useful tool for getting a quick idea of problems with your page. You can run the audit panel to see issues with network utilization, or webpage performance, and view suggestions for how to fix any of the problems that are found. It's not a comprehensive tool to diagnose all of the possible issues with your page, but it does have some good advice, and it's baked right into Chrome, so it's pretty easy to use. You can even save a history of audits so you can see if the changes that you're making are reducing the suggestions.
Running An Audit
Timeline And Profiles Panels
Hi this is John Sonmez from Pluralsight, and in this module we'll be wrapping up our coverage of the Chrome developer tools as we tackle the two most difficult panels, the timeline and profiles panels. These panels can be used in conjunction to really help us fine tune our web pages, and find out exactly what is happening inside the browser. The only problem is both of these panels can be a bit difficult to use, because they contain so much data, and what all that data is is not always apparent. Don't worry, though. I'll be giving you the best bang for your buck as I show you the things you should know about these panels that will benefit you the greatest, without requiring a degree in memory management.
Timeline Panel Overview
We'll start off by looking at the timeline panel. This panel is a very useful panel for finding out exactly what is happening in the browser when your page loads, or when you perform some actions on your page. The timeline panel has three main views. First, you can view the events that have taken place. It will show color coded events on the timeline so you can see exactly where each event took place, and how long it took. Next, you have a frames view that you can use to see how long it is taking to render each frame, which is basically a display update in the browser. This can help you debug performance issues that could lead to choppy animations on your page. Finally, you have a view where you can see the memory usage of your page over time. This view helps you correlate what events happened with how much memory was being used at that time so you can pinpoint what operations are costing memory, and possibly not ever letting go of it. Don't worry if you don't get everything the first time around. I found that you'll have to use the timeline panel a bit before you really start to get what you're looking at.
Recording a Timeline
When you first open up the timeline panel, you'll notice that it's blank. You actually have to record in order to get some timeline data. In order to do that, you can simply go down to the bottom, and click this record button. When you do this, it's going to record anything that's happening from that time forward. You can see some GC events have occurred while we're just sitting here talking, and even though we haven't loaded the page, it's still able to record that information. If I hit stop to stop recording, it'll stop recording and we can see what has happened during that time frame. Now, it's not very useful to record a page not doing anything. In most cases, when you record information what you want to do is to reload the page. Let's try this again. This time I'm going to click record. Then, I'm going to reload the page. I'm going to be hitting shift while I click this refresh button just to make sure that I'm getting all the resources, and I'm not caching anything so that I can get fresh copies of anything that I'm loading, and this is a habit that you'll probably want to get into when you're working with the Chrome dev tools, especially when you're working in the timeline and profiles panels. Let's go ahead and check this out, and now you can see that I have a recording that has populated this timeline. Now, let's look at what data we've captured.
Events View - Top Bar
Events View - Records
Memory View - Top Frame
Memory View - Counters
We also have this section at the bottom called counters, and I like to turn these off, because it's a little bit hard to read when you have them all on, but you can turn on which one you want. Let's say we want to look at the document count. We can see that there was one document up to the point where really our page loaded. Then we had two documents, and I can also click anywhere on here to get a zoomed in view of that particular section. Then let's look at our node count. We can see that we had only 32 nodes. Then as our page was loading up, you can see that node count increased where it finally ended up topping off at 64 nodes. Then after that, we can look at our event listener, and this is pretty interesting. You can see we had one listener. This was before we reloaded the page. Then when we reloaded the page, there was a little bit of time when the page was loading up where we didn't have anything hooked up, but then when we got our new page, we ended up getting our listener hooked up again, and that's that listener that's attached to this button.
Marking The Timeline
We can also mark the timeline ourselves. This is very useful for debugging to figure out where events are happening in time visually on that timeline. We can of course log things out using the console log, but that's going to show up in the log, and it doesn't give us a visual indication of when things are happening. If we go into our loop, I can uncomment out this line where I'm doing a console.timeStamp, and timeStamp will actually put something into that timeline view. It'll make a line that we'll see in a minute, and you can specify a label for this. I'm putting a setting plus I. Let's make it so that we don't do this every single time, because it'll be a little bit hard to see, but let's say if I mod 100 equals zero. So every hundredth time, then let's go ahead and do this. Now, if we save this, and we go ahead and do a record. Reload our page. Stop recording. You can see when I move our timeline over that there's a bunch of ticks on this timeline. In fact, it's easier to see it from the event view, and I can see here. Let's zoom this in so that we can get a good view of this. We can see where these ticks are happening. You can see the setting zero, setting 100, setting 200, 300, 500, and so on, and you can see that this gives you a real good indication of when events are happening, when things are slowing down. You can see almost a pattern to how this is happening, and you could imagine that you could use this for debugging. You could mark different points in the timeline when different things are happening, and this would show you exactly when those events were occurring, because you could hover over and see where the marks are in relation to other things that are happening to these records here, and to things that are happening up here, and even on the frames view when you zoom it in, you can tell where during a frame are these timeline markers happening, as well.
Profiles Panel Overview
CSS Selector Profiles
In addition to running the CPU profile, we can also go back to profiles, and we can choose to collect the CSS selector profile. This profile is going to show us how long it takes to match on any CSS selectors that we have. It'll also show us what those CSS selectors are, and how many matches there were for them, which is some useful information. Let's go ahead and click start. We'll reload our page. We'll click stop. Now you can see we have a CSS selector profile. If I click on this, you'll notice that most of this isn't relevant. The only ones that are going to be relevant are the ones that have an actual source. The rest of this is default stuff that Chrome is doing. So, we don't really have much control over that, but you can see that we have a selector for H2. In fact, we can click on the source and see yes we do. It sets the font style to italic. If we go back into our profile, you can see that it ends up matching one element, just this one H2. This total is the total amount of time. You can see that nothing is really taking any time, because this is a very quick operation matching with the CSS selector. We also have this body one, which just matches one. Now, let's take a look at this on the Pluralsight page. If we go to our profile, collect our CSS selector profile. We'll reload our page, and we'll stop it. Now, if I take a look at this profile, you can see there's quite a bit more interesting information. It becomes a little bit more useful when you have a lot of selectors. Now still, you can see that this isn't taking much time. We're actually using a star selector, which is going to select everything. It's going to apply the style to every single element. If we click on this, you can see what it's doing. It's applying this default set of styles to everything on the page to make it have a common starting point, and you would think that that might be expensive, but when you look at it in the profile, you see that it's only three milliseconds. Even though it matches 542 items, it doesn't take very long to do that. We have another match here that matches quite a few items. It only takes one millisecond, and it matches 508 items, and everything else is pretty much insignificant, even the ones that match a big number of items, they don't even take a millisecond to execute, and of course we have this percentage toggle, as well, where we can see what the percent of the total was, which isn't really that useful in this case, even though this took up 75% of the time. When you look and see how much time it is, you can see it doesn't really matter.
Before we get into using the memory snapshots in the profiles panel, let's take a moment to briefly go over how memory works in Chrome. Chrome uses garbage collection to manage memory. So, you don't need to explicitly ask for memory or release it. One side effect of this is that Chrome has a garbage collector that needs to determine when it should release memory associated with some object. The basic idea is very simple. All objects have to be referenced from some root that must always exist. From there, every object that needs to stick around should be accessible by following some path of objects and references. If an object can't be reached from a root, then it must not be needed, and can be collected. In our diagram, you can see that object B is referenced by object C and object A. This means for object B to ever be collected, both object A and C must either be collected themselves, or have their references to be removed. There of course is much more than this to garbage collection and memory management in Chrome, but having this basic knowledge will go a long way to understanding the snapshots we'll be looking at next.
Well, we've finally come to the end of this course as we've run out of panels to talk about. You should now have a fairly thorough understanding of the Chrome dev tools. We covered just about every inch of the tools in this course, at least every inch that existed when this course was created. Don't worry if you don't remember everything we've covered. I found that you'll have to start using the dev tools more to really get a feel for the power, and fully understand when to use what panel. I recommend playing with some of the features we've covered in your own web pages, or looking at simple web pages with the tools to get some experience and practice using those tools so that when you have a problem with a webpage that you're working on, you feel comfortable enough to be able to use the Chrome dev tools to help you debug it. Thanks for watching this course, and take care.
John Sonmez is the founder of Simple Programmer (http://simpleprogrammer.com), where he tirelessly pursues his vision of transforming complex issues into simple solutions
Released24 Apr 2013