Browser Developer Tools

[00:00:00]
>> WebDevSimplified: Now speaking of those browser dev tools, there's a lot of different stuff you can do inside of your developer tools. To open up your developer tools is relatively straightforward. You can come in here to your page, and you can click Control Shift I. So if I close out of this Control Shift I, that's going to open those up, or you can just right click on the page and click on Inspect. That'll also open up your developer tools for you.

[00:00:20]
Now inside of the developer tools, there's a lot of different panels. To make this easier to see, I'm going to make this section much larger on my screen and just zoom it out a little bit. So at the top here you can see we have Elements, Console, Sources, and if I click this button, you can see there's a bunch of other tabs of information that I can use as well. Now we're going to be going through each of these tabs in some detail, some of them more, some of them less, but the main tabs that you want to focus on are the Elements tab that allows you to view the entire HTML structure of your page and all the CSS.

[00:00:47]
You can see in this tab I have all of my HTML, and at the bottom section here, I also have access to all of my different CSS styles for everything going on inside of my page. So that's great for debugging different style-related issues. The Console tab, we've been looking at that one a lot. That's where all your JavaScript console logs and errors are going to show up. The Network tab is great for monitoring different network requests.

[00:01:09]
So if I come over here and I just do a quick refresh on my page, and I zoom this out so it's a little bit easier to see for you, you'll see at this top section I kind of have this graph of all the different things that I downloaded, and if I expand this, you can see here's all the different files that are being downloaded on my page. So for example, I have my CSS that's being downloaded, my JavaScript that's being downloaded, and my HTML.

[00:01:30]
I can see all the different stuff that's being downloaded for my page and get extra information about each one of them. The Application tab, this is for storing information related to what's stored locally on your site. So if we go to the Application tab, you can see over here we have a Local Storage, we have Session Storage, and we finally have Cookies, and this is a great place for storing information about the user and different things related to their tab.

[00:01:53]
So if you're using these particular applications, you can look at them in the Application tab. Sources is a great place to view literally all of the code line by line inside your application. So if we go to the Sources tab, you can see on the left here it references all of our files, our CSS files, our JavaScript files, as well as our HTML files, and it tells me the exact code that's in those files.

[00:02:13]
So if I were to change what my code looks like, change this to undefined, you can see again now I get undefined being printed right there. So this tells me exactly what code is on my page so I can read it and look at it. Finally, we have the Performance tab which is for analyzing the performance of your page, and if we go ahead and just tab open that tab, for the most part you're not going to mess with this too much, but there's a section called Local Metrics which I find useful to look at, which tells you essentially how fast your page loads and how different things feel responsiveness-wise inside your application.

[00:02:42]
Now to go a little bit more in depth into how you can use each one of these tabs, I want to first focus on the Elements tab. I already talked about how it tells you the HTML structure of your entire page, and the nice thing about this tab is you can expand and collapse things so I can expand my body to make it larger, for example, and I can make it smaller, and I can even directly modify things. So for example, I can click into here and modify the text of this particular link, just like that, and you can see now that link text is modified.

[00:03:07]
I didn't actually mean to say that, but you can see again an example of that, it changes the text inside of here and you can modify other things if you want to. It's entirely up to your preference. So you can live edit these things, but as soon as you refresh your page, it'll go back to the original version you had. You can also delete elements, copy elements, and so on. The Styles panel is really useful for diving more into CSS-related content, so if I bring this up a little ways, you can see whatever element I have currently selected, for example, let's select my body element, this will show me all the CSS styles being applied to it.

[00:03:37]
I can also see the computed styles. I can see various different layout things. This really breaks down a bunch of different stuff related to CSS. Now since CSS isn't really the point of this, I'm just going to kind of gloss over this, but if you want to analyze why something looks the way it does, the CSS tab is going to be perfect for you. Finally, we have an Event Listeners tab. This allows you to see all the event listeners hooked up to a particular element.

[00:03:58]
Now in our case we don't have any event listeners, so you can see this list is completely empty. But if we had event listeners hooked up to our page, this would show each one of those event listeners. Often this page gets really convoluted and complicated though, so I don't find myself using it all that often. Lastly, we can force certain elements into specific states again for testing CSS-related content.

[00:04:18]
So if I wanted to see what this looks like in, for example, the focus state, I could right click it, scroll down to Force State, and I can force it into the focus state, and now it's going to show me that based on those CSS styles. So if I was trying to debug CSS-related styling, that's a great way to do that, and again, once you refresh, all those things go away. Now scrolling down a little ways, I want to talk about the Console tab.

[00:04:39]
This is pretty much where all of your JavaScript outputs and consoles are going to go, and the nice thing is you can actually execute code directly in your console if you want. For example, I can just copy all this code. I can go to my Console tab. I can just paste this code in, and it's going to run all of that code. For example, this code is changing certain things like changing my background style, changing the title of my page.

[00:04:58]
It doesn't really matter what it's all doing, but it's just doing a bunch of stuff to my page. I can copy that in, and again, once I refresh, all that stuff goes away. The Network tab, like I mentioned, is all about finding all the different network requests that happen on your page. Now the nice thing is you can do a lot of filtering because usually this list on this Network tab is going to be very long.

[00:05:19]
We have about the simplest web page you could, so it only has three things. Most web pages are rendering hundreds of different images and downloading 20+ different JavaScript files. So you may want to filter this down. For example, what if I want just the JavaScript files? I can do that, or just the CSS files. Maybe I want just the images loading on my page. You can even use this filter to type for exact names of files you want to see.

[00:05:39]
Now when you click on an individual file, it'll give you a lot of information. This Headers section is great for debugging different information sent to and from wherever you request this from. Preview is great for seeing, hey, what is the content of this file? Preview and Response pretty much give you the exact same result, and if you really want to debug something that's going slow, you can kind of dive into this Timing section to see how long things take to download.

[00:06:00]
But usually the Preview and the Headers tab are really where you're going to spend most of your time when you're debugging different network requests. Another important thing about this tab is when you're developing locally, you probably have pretty good internet and you're able to make things load really quickly. But if you're trying to deploy your site for someone to use on their phone and 3G in the middle of a field somewhere, they're probably going to have really slow internet.

[00:06:21]
It's hard to test for that, but in these tools you can actually throttle your speeds specifically to make it much slower. So for example, if I wanted to test 3G speeds, I could change my speed to 3G. I could click refresh on my page, and now it's going to take a really long time to download because it's downloading at that much slower speed, and at any point, if I don't want to have that, I can just toggle this throttle off and now it's going to go back to whatever my full speed is that I have locally.

[00:06:45]
This is great for testing specific network connections. You'll also notice that there's these two checkmarks. Preserve Log means all the stuff in this log down here will stay every time I refresh my page. So you can see when I refresh my page, it kept the old script tag and the new one, and if I keep refreshing, it keeps all those old logs. Generally that's not something you want, so this is usually left unchecked.

[00:07:05]
So every time I refresh, it gives me a fresh slate of only the stuff that was just recently downloaded. Also, you'll see this checkmark for Disable Cache. I recommend keeping this on. Essentially, as long as your developer tools are open, your browser will no longer access any information from its cache, which means you can test and debug different problems with making sure everything downloads on your page as if it wasn't cached, because the browser caches things like images and stuff very heavily.

[00:07:29]
So if you're downloading those cached versions, it'll load much quicker for you, while your user, which has never accessed your page before, it'll load slower. So by disabling that, it gives you a more real-world experience for what your user is going to look like the first time they access your page. Now the Application tab, like I mentioned, is really all about just finding out that information that's stored in Local Storage, Session Storage, and Cookies, and you can actually directly modify that information if you want.

[00:07:54]
So for example, we just go into this Session section. It looks like there's a key inside of here with a value. I could change this to like falsified or whatever, and if I click save, that'll update that value. I could delete that by clearing out everything inside of here, and I can modify different values that are stored by different websites. So I can check, you know, for example, if in my code I store something in Local Storage, I can come into here and directly see what is being stored, change it and interact with it in various different ways.

[00:08:19]
Finally, the Sources tab I'm not going to talk about on this slide because I have a whole entire page dedicated directly to it because it's one of the most important type pages you can look at. And lastly, the Performance tab right here. If we go into the Performance tab real quick, like I mentioned, really the most important thing that you're going to be messing with on the Performance tab are going to be these metrics that are provided for you.

[00:08:37]
I believe these may only show up in Chrome, so if you're using another browser, you may not see them, but these are just metrics for page load speed and stuff. Another nice thing about this section is you can throttle your CPU. So if you have a really fast computer, you can come in here and slow down the speed of your computer to try to emulate lower-end devices that maybe don't have the same power that your development machine has.

[00:08:59]
So it's a great way to again test those lower-end machines. Now some final really quick tips I want to talk about inside of the browser, this button up here, which is in the very top left corner, allows you to select an element on your page. So if I click on this, you can see as I hover around my page, it allows me to select different elements. If I click on an element, it'll bring me directly in the Elements tab where that element is that I clicked on.

[00:09:19]
So I clicked on this anchor tag, it brings me directly to that anchor tag inside of here. It's great for finding specific sections in your page. This button right here allows you to toggle between a mobile and non-mobile view. So if we make this a little bit easier to see, you can now see I have a mobile view of my screen. I can kind of resize. Instead of getting a mouse, I get this weird cursor that allows me to do like dragging and touching and so on.

[00:09:38]
So if you want to test a little bit more of a mobile view, you can use that toggle for it. And finally, the last kind of important tip I want to talk about is going to be how you can change where these views are docked. If you click this triple dots right here, you'll see this Dock section. This allows you to move where your dev tools are. For example, I can dock it on the left side of my screen if I wanted to.

[00:00:00]
I could dock it on the right-hand side of my screen, or I can actually completely undock it by doing this, and now I have a brand new window that I can drag around and use however I want to.