Google Chrome Developer Tools Crash Course

[Music] hey what's going on guys this is a crash course on one of if not the most important web development tool available and that's google chrome dev tools now all browsers as far as I know have their own set of developer tools and a lot of the stuff we'll be doing here you can do in other browsers but not all of it and if you're a web developer I'd highly suggest using Google Chrome at least for development what you use to browse web pages and so on doesn't really matter but for development I'd suggest chrome second to that I would say Firefox now chrome tools is very powerful there's a lot of real advanced stuff that you can do especially when it comes to debugging and in JavaScript I'm not going to get into the real advanced tasks in debugging because I don't want to focus too much on pieces of code rather than dev tools themselves also I want this to be a beginner to intermediate friendly tutorial or crash course all right so with that said let's go ahead and get started I want to give a huge shout out to today's sponsor male tag male tag is a Chrome extension that allows you to track your emails in real time for free it also lets you track other cool things like link clicks email reopens and even the device that was used to open your emails be sure to check out male tag by clicking the link in the description below alright guys so the website that we're going to be working with for the first part of this crash course is from the bootstrap for you to me course it's the Mizzou steam it's just a one page theme that uses bootstrap you can see the the menu items just take you to that part of the theme alright so I think it's just a good example to work with so to open our dev tools or chrome tools whatever you want to call them there's a few different ways we can go to the menu here we can go to more tools and then developer tools and that will open them up we can also toggle with f12 and we can also use ctrl shift I all right so those are some ways that we can open up the dev tools now there's a lot of different tabs here we're not going to go over all of them in fact if you click over here and you go to more tools there's even more stuff but what we're gonna really look at is elements console the JavaScript console sources Network and application we're not going to really work with memory management and stuff like that that's beyond this but beyond this tutorial all right so we're basically going to be working with the the most common types of tasks that people use so what we're gonna do before we look at the elements tab is I'm going to show you how we can move this around so by default it's gonna be at the bottom but if you want it on the side you can go ahead and do that if you want it on the left side you can do that and if you want it undocked completely you can do that so it's it's another window I think what I'm gonna do is try it on the side just to kind of you know so you guys can see what's going on a little better usually I have it at the bottom but we're gonna give this a shot so before we look at the elements and inspection let's click on this little icon right here this is the device this will this will allow us to look at our site on different devices in different sizes first I'm just going to choose responsive and basically this is 1024 by 1745 so this is like a like a laptop view but if we want to go mobile we can click right here and this will give us like a mobile view if we want to click right here this will give us a larger mobile this will give us a tablet view and then we can choose actual devices as well so if I want to see what this looks like on an iPhone 6 we can do that okay we can use a little menu here if we wanted to look at on let's say a Galaxy s5 it's a little different but not much and it shouldn't be much different but you can do that you can change it from landscape to to portrait so it's it's a nice little tester to see what your site looks like on mobile devices and tablets all right so let's go ahead and close that out and we'll just click that icon again and now we're going to look at the element inspector ok are the elements tab now that all of this right here is the source code this is the HTML and then down here we have the CSS for whatever is selected here notice that when I hover over an element it kind of highlights in the browser and you'll see that it has some sometimes it'll have a green bar around it sometimes it'll have an orange bar around it what this is is padding and margin so this nav bar right here if I just click and select it you'll see that it has it has green border around it this is the padding if I go over the let's go and showcase and let's hover over container you'll see that there's actually orange on the side as well that's the margin a container has margin auto meaning that it puts the same the same amount of margin on both sides and that's what you're seeing it also has a little bit of padding so it has the orange and green okay now let's say we want to select an item in the browser and then have it highlight over here so basically the opposite what we can do is click on this this little icon here this arrow in the box and then we can go and we can select what we want so if we want to select this h1 right here we can go ahead and click it and it'll bring it to us over here in the elements tab alright and while this is selected down here or it'll show us any CSS that pertains to that element so notice that this h1 has a class of display too as a class of mt5 and PT 5 which are all bootstrap classes by the way a lot of the stuff we're gonna see our bootstrap classes so if we go down here it'll actually give us the styles for PT 5 mt 5 display - h1 itself anything that pertains to this selector right here ok not only that but it shows us the file that it comes from and then the line number where the style is and if I click on this it'll open that up it'll show us bootstrap CSS with that style and then we can just close that up and go back to elements and we have a checkbox next to these Styles here so this padding top if I uncheck that it's gonna go ahead and remove that class from that or it's gonna toggle it that style from that element okay oh no not only from that element but anything that has the PT v class you'll see that underneath the newsletter this actually has it as well so that's changing too so we can toggle our classes now let's say we only wanted to toggle it from the h1 so what I'll do is inspect the h1 so it's selected right here and then we'll go down here and we'll say element classes and then we'll toggle the PT 5 now you can see that it's only removing it from that element it's not just taking away all the PT fives so let's go ahead and let's focus on up here for a little bit for those and we'll focus on the mark up now we can change things so let's say we wanted to change the text of this h1 right here what we could do is double click the text and I'm just going to replace it with hello world and enter and you'll see it'll actually change the text now this isn't going to stick this is temporary if I reload the page that's going to go away obviously otherwise we'd be able to just you know mess with anyone's website and we'd have we have quite a crisis now later on I am going to show you how you can add your local workspace to Chrome so that you can edit things and they will stick and the changes will stick so you can use you can use the dev tools as an actual text editor but of course it has to be added as a local workspace all right now texts the the you know the inner text isn't the only thing we can change if we wanted to let's say change something in here we could double click we could add a class let's just add a class of let's say special doesn't do anything but I'm just showing you we can add it in addition to doing it that way we can right click and we can say add attribute and let's say we wanted to add an ID here so we'll add an ID of heading ok so we can do it that way as well and then we can change this if we want we can change the value we can change the actual attribute so if I wanted to change this to it's a title we could do that as well all right we can remove stuff from the Dom so let's say let's see I'm gonna click inspect and I'll go to the the little mizuki right here that the h3 and the logo and we can go ahead and we can either choose hide now hide is going to make it so we can't see it but it still takes up the space in fact this probably isn't a good element to show you this on let's actually go to the paragraph right here and we're gonna choose hide and notice that the space is still there as if as if the paragraph was still there we just can't see the content and notice that when it's hidden you'll have this little dot right here so we can unhide it and then if we want we can also delete it so if we say delete element it'll completely remove it from the Dom and now that space is gone okay we can also move things around so let's say let's choose this little logo right here this M logo it's an image tag and then what I'm gonna do is I'm gonna say copy and we can say copy element and then we'll go down to let's say the footer and we'll go into the container and we will do copy and then paste element and then let's right-click and say scroll into view it'll bring us down and now you can see we have the little logo down here in the footer alright now we can also click and drag so if we wanted to bring it like up here we can just drag it all around wherever we want there it is right there alright so another thing we can do is we can see different states of elements so see this button here if I hover over it it gets a grey background if we want we can select this let's click inspect and click the button and then we'll go over here and we'll right-click and let's let's check off hover and then it'll display that as the hover State okay and you can see it adds a little dot here to tell you that it's in the hover State and it's not just hover we can also do active and focused and what else visited so you can change the states like that alright and then as far as this menu see we covered pretty much everything and all if we want to expand everything that's in the tree here and we can collapse all all right so now let's move on to messing with styles so I'm going to just pull this up so we can see the CSS now let's go to the navbar so this right here and as I showed you we can we can change things like in the class here bootstrap 4 has a class of navbar light what that does is it makes the text dark I know that sounds a little weird but it's basically saying the navbar has a light background so the text should be dark so what I'm gonna do is change this to navbar dark enter and now you'll see that the text is now gone it's not gone but it's white because it thinks the navbar has a dark background so that's one way we can change and add classes another way is we can go down here make sure you have the element selected and we can go to this dot CLS and we can add a new class here we can also as I showed you before we can toggle so for example we can toggle that navbar dark class but let's go ahead and add a different background color to this so bootstrap has a class called BG info which will give it a blue background so go ahead and type and notice as I start typing it'll pull up all the classes that are in the bootstrap CSS file so any CSS file you have connected it'll automatically kind of search the classes so let's use BG - info it enter and it'll add that as a class ok so notice that the background of the navbar is now blue now another thing if we go down to the CSS here we can change things like let's BG info right here so that we have this color it shows us the color and if we click on it we have a nice little color picker and we can change the color that way as well as well so if we wanted to change it to like I don't know - like a reddish color like that we could go ahead and do that if we wanted to change up here the navbar class has a box shadow we could go ahead and change that color so if we wanted to make that like a red and we also have an eyedropper tool which if we click that we can just pick colors in here okay we'll choose that black color I guess and then to change numeric values we can actually let's see go like that and I can just go ahead and click the up arrow up or down arrow and that'll change that value okay it'll increment or deep or deep decrement it alright so we can do stuff like that which is really cool we could do it with the opacity as well see for the colors I never tried that but does that do anything no I didn't know if it would increment the hexadecimal in some way but I guess not all right so let's see what else we can also add new styles okay with this this plus button right here so let's say we want to choose the body the body has an idea of home so it'll create a style for exactly what this is okay so if I click this new style rule it'll create a style for body home and we could say like background let's say background black and that'll automatically change to black alright I know this looks horrendous but I'm just trying to give you some examples of how this stuff works all right now let's choose the showcase let's see so showcase right here section showcase and then I'm gonna click on computed and this shows us the box model so it gives us the width and the height of the element gives us the padding the border the margin and any positioning that it has all right in addition to that if we go down here it gives us all the specific styles for this element okay so for instance background image if I go ahead and I expand that it'll show us the actual image and we can open this if we want if we want to open in a new tab users Brad sandbox image alright so I guess that's not working it's it's not getting the right path because it's not we're loading this from our file system not an actual web server so it's not showing the actual image but it would if we were on a real web server alright so let's see what else I think that's pretty much it oh this right here this hover so let's let's select this button right here and notice that down here it's gonna give us the default for just the regular button style but if we want to look at the hover style we can go ahead and click on that and then click hover or active or whatever and it'll show us that style okay because if we don't do that we're not gonna be able to see that hover style okay so we can choose active that'll show us active and so on alright let's see we can also filter so if we want to look at color it'll show us anything to do with color we can also search classes like BG dot PG or maybe it doesn't search classes I don't know I don't really use this but I guess you can search for just yeah padding's any styles for that particular element all right so that's gonna do it for the elements tab now we're gonna move on to the console alright guys so for this part of the course what I've done is I've created a single index.html file inside a folder called DT sandbox dev tool sandbox and I've just added just some basic HTML we just have you know our head tag and then we have an h1 in the body so over here on the console make sure you have the console tab highlighted you can actually run JavaScript here so if we were to say alerts one and enter you'll see that it'll execute that JavaScript JavaScript now when it gives us undefined back that just means that there's no return value now we can type expressions in here for instance even if I just put like a 1 and enter it'll give us a 1 back if we do let's say one plus three it'll give us four back now there's also little symbols that I'm going to show you throughout the course as well throughout this section one is going to be money sign underscore what that'll do if I click enter it'll give us the last returned value from the last expression all right now this button here will clear the console and now if I do the money sign underscore it's gonna give us undefined because it cleared everything out okay another symbol we have is money sign 0 1 2 and so on and what that does is it'll show us the last element selected with the inspector all right so right now if I save money sign 0 gives us undefined let's go ahead and click inspect and let's inspect this h1 right here all right I'm just gonna click and just click on it and then we'll go back to the console and let's say money sign 0 and you'll see that it'll give us the h1 all right if we select something else like the HTML you can see right here it's telling us we're just selecting the HTML element we'll go back to console what's to money sign 0 we get HTML all right now if we do money sign 1 we get the dev tools because that was the one we selected before that if we do when he signed to will get undefined because we did not select anything before that the h1 was the first thing that we selected all right now you can also use the money sign as an alias for document dot query selector so it works just like jQuery although it's not jQuery so what I'm gonna do is just cancel this out or clear this and let's say document dot not get we want document dot query selector whoops didn't mean to do that query selector and we want to grab the h1 and let's say dot style dot color equals red and then enter and that'll actually change it to red now document dot query selector is just vanilla JavaScript now we can use the money sign as an alias for a query selector so we can essentially use jQuery it's not jQuery but it's the same format so we can say h1 we can say dot style dot color equals blue and that'll change it to blue okay now if I reload this it's gonna of course go back to normal another thing I want to show you is that you can open the console from any tab if we're in elements and you want the console open you can do a control what is a control shift J no I'm sorry control shift J we'll just open the console up from from nothing to open up the console drawer then you want to do what the hell is it it's so just escape if I click escape you'll see that this opens we get this what's new I'm gonna close that out and then we have the console down here okay in addition to the elements tab but I'm just gonna go right back to the console alright and we'll get this rid of that all right so now let's move over to the file and let's see some things we can do over here so what I'm gonna do is add some script tags and if you guys have watched any of my videos at all I do a lot of JavaScript and you'll see me lots of times use console.log that's how we can do testing that's how we just if we want any output from our application we use console.log now in my case this is gonna be cuz I'm using a plug-in here called live server for visual studio code so if you're not using that you will have ten you're following along you will have to reload so that's just logging something to the console all right now the console also gives us errors okay any errors so if we for instance a console dot log and we try to pass in a variable called my var that is not declared and we go ahead and run it we're gonna get this uncaught reference error my var is not defined okay in addition to that it's going to give us the file name it's going to give us the line number that through the errors so if I go ahead and click that it'll open up you know that part of file and it'll show us what caused that error alright so let's go back to console and I'm just gonna comment this out now we can also throw our own errors in our scripts so if we say console dot error and we can say this is an error and save and you'll see it'll run and it looks just like an error it'll also show us the line that caused it all right in addition to errors we can do warnings so console dot warned will say this is a warning and save and it basically does the same thing except it's yellow has a little exclamation mark instead of an X all right so let's take a look at some other console commands we have the console dot dir command and that's basically gonna show us a Java Script representation of any Dom element so let's put in the actual document here and save and then we'll get this this hash document but if we click on this arrow it'll show us everything about the document okay and we can access any of this for instance if we wanted the URL we could say console.log and we could say document dot URL let's actually comment this out and save and reload we don't have to reload but it'll show us the URL so we can get any any value from that from that document object and if you're interested in more if you're interested in more of this kind of stuff looking at the document looking at the Dom check out my Dom crash course it's a 4 4 video course on YouTube absolutely free and you might want to check that out alright so another thing we can do is we can create tables in the console of with arrays so for instance let's say console table and we're gonna put in some brackets and let's add an object we'll put a name of John email let's say test test comm and we'll put an age of 33 all right so let's save that and you can see it actually creates a table okay so we can add more objects to this array and it would add it to the table all right another thing I wanted to show you is that we can filter some of the stuff out if we want so you'll see we have info warnings and errors checked off now the table is considered info so if I go ahead and I click that it'll hide it if we want to not show warnings it'll hide the warning if and you'll see now it says errors only if I uncheck errors it won't show that at all it says hide all so we can filter the type of logs that are gonna show down here and the types of errors and warnings and stuff all right so another command we have is console dot clear and I'm sure you can guess what that does it just clears the console for us all right so let's go ahead and comment this stuff out by the way to do that and I do control forward slash and then I want to show you that we can actually log stuff in groups so if we stay console dot group and we give this a name let's just call this say hello and then down at the bottom here we want to say console dot group end and here we'll say say hello same thing it's kind of an identifier and then here let's just do console log I will say hello John copy that paste in two more will say hello Sally and hello I don't know Chris let's save it and run it and you'll see that now all of these logs are put into a group this say hello group which we can actually collapse and uncollapse alright so we can do that another thing we can do is we can do a console time so let's go ahead and say console dot I'm give this identifier we'll just we'll call it for loop and then down here we'll say console dot time end and also pass in for loop and this can be anything the for loop that's just what I'm calling it because that's what I'm gonna do and then I'm just gonna do a simple for loop here so we'll save our I equals 0 as long as I is less than let's say 2000 and then we'll do I plus plus and then let's just go ahead and console dot log I and let's save and now it'll actually run the loop it'll count through 0 to 2000 or 1999 and then it'll tell us the the identifier and then how long it took to do that so it took it a hundred and eight point this milliseconds alright so that is console dot time we can also run assertions which are basically kind of like tests so let's create a function here we'll call it greater than and it's gonna take in two values let's say x and y and we're gonna say in here console dot assert so console assert and then the condition which is going to be is X greater than Y and then it'll take a second parameter of an object and we're gonna put a message in here actually this needs to be Jason so we're gonna wrap this in double quotes and say message and we'll say C X is not greater than Y alright and then we can pass in the third parameter here and we're gonna say that X is whatever is in the X variable whatever's passed in and we'll put a comma and we'll say Y is whatever's in the Y and that will display in the actual message alright so then we just want to this will say greater than and let's let's make sure that the first one is not greater than the second one so we'll do four or five oops and that'll make it fail and we'll save and you'll say we get assertion failed message X is not greater than Y and then it shows us the actual values of x and y so we can run little assertions and tests with our console all right and if I were to put something that was greater than like put six then nothing's gonna happen okay it's not gonna say passed or anything like that it's just nothing will happen all right so I think that that's good enough I don't want to go too deep into this console stuff here now you do have some settings here you can choose to show timestamps with your logs you can choose to log any any Ajax requests preserve the log select collected context only you can hide Network's messages user messages only which will only show messages from console API methods so you do have some settings there but I think that's going to be it for the console so let's move on to the sources tab so in sources first thing I'll show you is that you can actually create snippets so if I go to snippets here let me just remove this one but we can go ahead and click new snippet and you can name it let's call it log text and what I'm gonna do is just have this console log and we'll just say hello world alright and then we can do ctrl s to save we can also right-click and save okay and then to run it we can just go ahead and click run and now down here you'll see the console draw pop-up and it'll run hello world alright so you can put whatever you want in these in these little snippets it's just like a little snippet manager the cool thing about this sources tab is that we can actually make it so that we can edit our code and we can we can use it kind of as a text editor so what I'm gonna do is make this a little bigger and we need to go to sources and we're gonna just right click here now I mean if we go over here and we click index.html we can see the source code here but we can't change it and save it and stuff like that so what we'll do is we're gonna add a workspace so we see add folder to workspace and then what I'm gonna do is I'm gonna select the folder that this this HTML file is in which is going to be in my sandbox I believe sandbox and then DT sandbox alright and then it's gonna come up with a pop-up that says dev tools requests full access to DT sandbox we're going to go ahead and allow it and now we have it in here and we can actually edit stuff so if we go ahead and change let's change the h1 we'll say dev tools playground and we'll do a control s and you'll see that it'll say it'll change here and then if I reload it stays changed and if we go over to our file and V s code and that's actually just I guess having it open let me see can I reload this let's just close it and say don't save and then we'll reopen it and it's dev tools playground alright so we can now use this as our text editor now we can add files so let's say a new file and let's call this let's see I haven't done this too much but let's see how I named this rename we'll call it style dot CSS and we'll just put in here body let's say background we'll do a light-gray and save will close that up we'll go over here and we'll add it okay save it and there we go now we get a dark background and you can see it actually updated over here we now have our link to our stylesheet it also created it over here alright so now let's move on to the network tab all right now the network tab if I go ahead and reload this is going to basically show us all the files that are loading in this URL so we have our index.html file we have our style dot CSS and it's basically telling us that the index.html gives us the size it gives us the time that it takes to load and then it gives us this little graph here as well and then we can filter the types the types of resources so let's say we only want to look at CSS it'll show us the style dot CSS if we want to look at Doc's which is you know HTML files it'll show us that we can also see any xhr requests or Ajax requests which I'm going to show you in a second now this ws right here this is the WebSocket and what this pertains to is the live server that I'm using okay so that's why we see this ws here the live server is what enables us to have this auto load and stuff all right and if we click call of course we can see everything and if we select each one we can see the headers gives us the request method so get requests the status the address all that stuff the headers if we click on preview we can see the actual content same with response cookies I do actually have a cookie in there but that's from something else and timing so shows us the timing that's the time it took to load and stuff like that all right now what I want to do is I want to an ajax request to our script over here so i'm gonna put in a button right here and we're gonna say get users and i'm gonna just grab well first of all i'm gonna add an event listener so i'm gonna go down here and i'm just gonna say document dot get it will just say query selector we want to select the button and let's say we want some query selector button and we want to add an event listener we want to listen for a click and then we want to call a function called get users make sure we don't need that alright so then we'll create a function call to get users and then what this is gonna do is it's gonna fetch data it's gonna fetch the github users and this is from my ajax crash course so i'm gonna paste this in and it's basically just a regular vanilla JavaScript xhr request to api dot github.com slash users and we're just checking to see if the status is equal to 200 everything's okay now i don't care about the output so i'm actually going to get rid of i'm gonna get rid of all this actually i didn't even need to paste that and but we'll just say console dot log users returned all right so let's go over here and let's first of all go on the console and click and we get users returned now if we go back to network and reload you'll see we still would just have our index and style and our WebSocket and then if I click the button all of a sudden we see users this is the the Ajax request if we look at type it says xhr and if we filter by xhr we'll see the users file here or the users request and it gave back a status of 200 and if we click on this and bring this up you can see that it was a get request and we can look down here gives us the request headers and now if we look at the response it'll actually show us what it gives us so making a request to that URL right there gives us the first 100 users of github and you can see it gives us the username the ID the avatar URL gives us a bunch of other URLs like the followers the gist's the repos that the user has so that shows us the response alright same thing with preview just shows us in a different way ok and we can do whatever we want with this data that's brought in but the point of me doing this is to just show you that any Ajax requests that are made are going to get added to this network tab and we can we can view those requests ok this xhr here this stands for XML HTTP request which is part of the browser that allows us to make asynchronous Ajax calls or I should say asynchronous JavaScript calls or Ajax calls same thing now notice the load time here 16 milliseconds if I reload it it'll change you know a little bit from time to time but let's go ahead and let's um let's uncomment our little loop here this console time loop thing just because I want to run that loop and let's save and now when we reload you'll see that it's 123 milliseconds because this loop took up some time because we're taking our log to the console let's change this to let's say 20,000 and save and now let's look at the network time and now we get one point oh eight seconds all right and you can see up here that the graph is much different it's now up you know in between 1000 and 1200 if I bring this back down to 2000 and save now we're down to you know just above 150 milliseconds okay and the more code you have the more files you have the longer it's gonna add to your load time so let's take a look at the bootstrap theme that we used in the first part all right so if we go ahead and we open up close that up and we reload the the network you'll see that this took not bad it took 189 milliseconds to load on content loaded took 51 milliseconds so a lot of this stuff was added from like images so when you have large images that that really slows your site down it loaded all the CSS files all the JavaScript so we have the bootstrap JavaScript popper and jQuery which are dependencies of JavaScript so it has to load a test to take all this stuff into account when loading your site alright so when your you if you have an image heavy site it's good to compress your images or resize them and optimize them before you know before uploading them to your website but I think that's it that's all I want to do for the network tab now we're going to move on to the application tab alright so the application tab is what's gonna show us we can we can look at what's in our browser storage and there's multiple ways to store data inside of a browser okay so we have local storage now I've cleared everything out you can actually completely clear everything from this tab here you can clear your site data but we can look at local storage session storage index TV and web SQL are basically like client-side in browser databases and then we have our cookies we also have cash storage application cash so what I'm gonna do is we're gonna go over to our file here into our script tags and gonna add a local storage value okay through JavaScript and html5 so to do that we can say local storage and to set an item we can say set item and let's go ahead and set let's say name and we're gonna set that to John and save and now if we reload our application and we look under local storage and we click on our local host you'll see that now we have a key of name and a value of John alright and we can get this from our JavaScript really easily too by just saying local storage dot get item and we want to get name so what we'll do is we'll just console.log that and save and if we open up our console over here down at the bottom you'll see we get John alright now the difference between local storage and session storage is that local storage will stay on in your browser it'll stay on your machine until it's cleared okay and I can clear it from the JavaScript or you can clear it from here so to clear it from JavaScript we can say whoops we could say local storage dot and then we can say clear and we'll pass in here name alright so now if I save that reload you'll see that it disappeared it was set but then it was cleared so we can do it that way if I go ahead and I comment this out and run it then it gets set again but we can go over here and we can refresh if we want and we can also get rid of it all right so local storage will stay until that happens now session Storage has the same API the same syntax really except that it goes away when your browsers closed or when your session ends so what I'll do here is I'll say session storage and it has the same method so set item and let's set I don't know we'll set car and we'll set that to let's say BMW and we'll save and John got added again because we still have this line here but if we look at session corage session storage we now have this car BMW alright and you can clear it out and you can you know fetch the session storage the same way it's basically the exact same API it's just that it'll go away when the browser is closed and when the session ends alright now we can also track cookies so if we go down here well let's go ahead and create a cookie to do that we can say document dot cookie and we'll set that equal to let's say username username equals John Doe and save and now you can see that a cookies been added if I just make this a little bigger so cookies been added for this domain that's the value of it this is the name it doesn't have a max it doesn't expire so it expires when the session ends you can expand ago through that I don't want this to be a tutorial on cookies I'm just trying to show you that you can track and you can see your cookies from this from this domain here alright and of course you can go ahead and you can clear these out what you can go one by one like that or you can just go to clear storage and select what you want cleared and then just go ahead and clear everything and you'll see that everything is gone alright so that's how you can manage your your browser storage I'm not gonna go over like indexeddb and web SQL those are different technologies that I don't want to get into but just know that you can see that stuff from here as well alright now I want to take a look at the audits tab so this will allow us to perform an audit that will basically give us some readings on our website about the performance it'll give us some suggestions to make it perform better things like that now you also need to take into account the server that you're on so what I've done is I've uploaded this mizuki template to a domain called code skelet comm which is being hosted at I think it's Hostgator I thinks it's a it's a shared hosting account so that may have an effect on it but let's go ahead and just perform an audit so we're gonna open up two chrome tools and go to audits and click perform audit and I'm gonna choose all of these except for the progressive web app and click run on it all right and this may take a few minutes so I'm gonna go ahead and pause the video until this is done alright so we get the results back for this this website uploaded at code skillet com so we got 88 per performance performance which isn't bad accessibility was 86 best practices 77 and I can tell you that a lot of this performance and best practices is going to come from the images because the images were not optimized or compressed or anything like that so let's go down here this will tell us about PageSpeed the first meaningful paint was 2.2 seconds or 2000 to 40 milliseconds and what this means is first meaningful paint measures when the primary content of a page is visible alright the first interactive was 4.1 seconds this is the first point at which necessary scripts of the page have loaded and the CPU is idle enough to handle most user input so this is like when the site is completely ready this is when it's basically loaded enough for the the you know the user to view the whole page which isn't too bad now opportunities you'll see serve images as web P so basically this is telling us to compress our images with lossy or lossless prop properly sized images you have optimized images so you can see that this all has to do with these images because these are really high quality images and we have a potential savings over here of 68 percent 73 % so that's what most of this this lacking performance is and it's still not bad 3 past audits which reduce rendering block scripts we avoid excessive Dom sighs okay so our Dom size isn't too big user timing marks and measures zero its accessibility now I didn't use a lot of area attributes in the course that we built this theme because I didn't want to add more time een it was a nine-hour course and I wanted to focus on classes and stuff so we didn't really focus on adding accessibility options let's color set color contrast is satisfactory six past audits elements used attributes correctly the area attributes that we did use do follow best practices elements describe contents well elements are well-structured page specifies valid language meta tags are used properly ok so best practices we had three failed audits does not use HTTPS obviously that's that's fine does not use HTTP two for all of its resources manifest short name will be truncated when displayed on home screen let's see past audits so we avoid application cache avoids web SQL DB web SQL is is deprecated so that's not a good thing you don't want to be using that passive listeners avoids mutation events in its own scripts avoids document dot right you should never use document dot write opens external anchors using the rel no opener avoids requesting geolocation permission avoids deprecated API s allows users to paste into password fields all right so all of those are checked off so all in all I think this is a pretty good audit except for the images the images should be compressed and optimized all right so that's what I get from this but again this is a pretty cool tool if you want to go you know your websites or your applications and run audits and stuff I would encourage you to do that all right but I think that's going to be about it if we go to security it's going to tell us this page is not secure just because we don't use it I don't have an SSL certificate on this domain if we did then it would say it's secure all right so I think that's it guys I'm gonna go ahead and stop the video here hopefully you liked it if you did leave a like please subscribe if you're not and I will see you next time so I just want to give another shout out to male tag who sponsored this video male tag is a free Chrome browser extension that allows you to track your emails in real time I've been using it myself for about a week now and I can't recommend it enough on top of email tracking mail tag has a bunch of other features like desktop push notifications that alert you when your emails have been opened link click tracking that shows that people have actually clicked on the links in your email and a ton of other cool features again all these features are completely free be sure to check out male tag and click that link in the description

Channel: Traversy Media

Views: 470,299

Rating: 4.9445786 out of 5

Keywords: google chrome developer tools, chrome tools, devtools, chrome devtools, chrome developer tools, chrome console, javascript console, chrome tutorial, google chrome

Id: x4q86IjJFag

Length: 51min 19sec (3079 seconds)

Published: Thu Sep 28 2017