Chrome DevTools - Crash Course

chrome developer tools are extremely helpful for web developers and i think all web developers should have an understanding of what they can do nabhit who teaches this course is very experienced and he will teach you everything you need to know about them in this course we will have a look at uh chrome developer tools which you can go from zeros more tools and developer tools so so once you click on it the developer tools open right and so in this course we will talk about a look at each of these tabs what does what do we do with it and elements one what do we do in source one what do we do in network one console memory performance and write our security so all of these steps and then we'll try to make sure that we understand their basics and uh once you're done with the course so that you are very pretty much comfortable with it so without wasting for the most time let's get going and let's start with the basics so in this uh first lesson let's try to get comfortable of how do we move around the chrome developer tool how do we you know what lies where and few other things so how do you how can you open this is you what you can do is you can click on this three dots more tools and developer tools that's one of the way which is ctrl shift i also the shortcut in mac you can have command shift i or um it depends for us f12 also works right so once you click on it the the developer console opens and if you look at the the overall getup of this it is as of now dark what you can do is you click on this icon gear one okay let me make it bigger yes and you can change the theme from dark to light right for example if i make it light it needs a reload okay so what i will do is let me just uh maybe reload it again and then i just press ctrl shift i and now it is a light theme right and then you can have a layout also clover format you can also have some default settings for your record network log whether you want to whatever the activity is going on in the network you want to record that so or you want to enable javascript auto completion so these are the few of the settings which you can do right how much indentation you want and then workspace is something you can add the folders for example whichever project you are working in you can add it here and you can change the code in the chrome developer console only this tool also i will show that in in the relevant section and then there are some experimental features which are always there because they are not finalized and they are not really but you can still uh they can you know work on them and then you have ignore list anything which you want to speak from let's say whenever a website load you want to skip some scripts so you can add those and accordingly you have devices because you can also you know customize that you can also check how your website how do your the application will look and feel like on different devices this is where you can set right throttling is like for example uh let's say your app or website is going to be open on a on some locations where your download and upload speed will be less so you can have a profile name you can you know you can provide the download speed upload speed latency and you can check how does your application will behave so you can accordingly you know find in your applications then you have the shortcuts which will talk about you know we have every shortcut here so if you want you can you know people who are more fond of using a keyboard and they can these use check the shortcuts and uh full lists will be found here okay so so that's that's bit about it's it's it's color settings and all right and uh now if you look at this screen right this is these are the different view areas or different tabs which are available for example under elements tab you can have your html right then under source code it will load the different source codes of the file okay console where you can do some stuff where you can write your own javascript code network is like whatever files were loaded whatever ajax requests were sent all those things can be recorded here performance is basically you want to check how your overall website is doing memory and then applications this is something this browser also comes up with its local storage so local storage is it will remain only till the time the browser is open session storage will be released you know there even if you close and reload again and indexeddb are not we'll cover these in detail then you see this security lighthouse and these are other customers okay and and on the right hand side based on different tabs you can have different views for example elements you can have your css right for source you can have your source controller this is your console you can close it also right and so every tab every view has its own corresponding things which will help you in troubleshooting right so that's how you normally basically uh not troubleshoot things not basically this is a this is a single stop shop for you to troubleshoot your website related issues so i think at least we now understand okay what it is okay one more thing i forgot is if you click here as of now i have kept it as a separate one i can add it directly inside the window so for example if i say dock to the right so it will automatically open right and if i say dock below so it goes to the bottom and if i say dock left depends on individual to individual how you are comfortable with right and then also you can change your device tool this is like how this view will look on a mobile moto g4 galaxy so these devices i hope you remember these are coming from this devices okay so you can check here only that how will your web app will behave in under different devices okay and you can click here and then if you click again these three dots you can you can have a kind of uh more tools for example apart from these tabs you can have these different types which is like something related to sensors network conditions you know right and then you can also open the shortcuts from here the same thing happens right and and you can have a run command which is like whatever operations you will see we are performing here we can do it do i just shortcut that let's say you want to show the network so you click here so it'll automatically go to the network right so this is like um you know terminal type kind of a thing console drawer is like this one where you can write your own code right and uh search as if in case you want to find something that's a global source okay so that's bit about uh our our console that at a very high level what how it is briefly organized now what we will do is we will create a small project which is like which will have a small html file a very basic one and a javascript file and a style because we will make we'll see how do we troubleshoot different things using this chrome developer so moving on let's first now create our small website not a website small page which includes all three different types of files okay so we have created a very simple page which is uh which is loading two files one is a style sheet style dot css now there is a my file js all it does is it has an h1 element some list basic one then click below to begin your journey and then it has a button right and button we have this event okay so this is pretty straightforward one there's nothing in frenzy right and when we say that okay they said for what we have in our css first is uh uh we have is a once we have as a body body tag always we have to find that this has to be the color let me just bring it here so now you can see that for body we are saying background is this s1 has to be of this color paragraph has to be this if i hover over the list over over the list the background color should become red for this right and in javascript all i'm saying is on click you do alert your update uh right what i am using to run this local server is basically what we call it as a live server you can add it as an extension as a add-on to your vs code right and then you can also run it so if you look here so here you can go to live server this is the library which i have installed and in case you want to run it all you need to do is ctrl shift e and do a live server also okay so now maybe let's look at this so this is how our website not a very great one right it's a very uh basic one and but this will help us and and in understanding how do we troubleshoot things how do we debug things and if we look at this the hover is also taking effect right to our website which we want to troubleshoot as set so let's now open our console okay and let me just reload it so that everything becomes clear so if i just reload it so now if you look here it network it shows what all files are loaded these two are others are web server let's just ignore it so our focus right now is this elements okay so what this does is it shows the complete html file for uh whatever is displayed for example body whichever whichever tag you will click on that will get selected for example body this is h1 this is ul under this we have list right so it's basically this is m and if you look at on the right side it it automatically selects what all what all css is applicable for example style css one background color is this text line is centered there can be many multiple css but some of it will be applied to your element how do we find out that so what you can do is go to this computed one right and now you can see that for this body the pending is this border margin and then you can see clearly the color right what is the background color and you can also see from where it is coming right because there can be multiple side sheets from where they are coming and some are inherited for example if i just click here these are all the inherited one okay and these are all coming from the style sheets the basic one which is inserted okay and so we now and then we also have something like the rendered fonts and all the details now for example what if you want to select any of it so what you can do is you click here and let's say i want to see what is happening with learn so learn is getting selected which is a lie right and the style is here is there's only text line which is center and that is coming from body not from every time right and for example if i want to see a h1 so for h1 the color is coming from set right and what i can do is if i go here and if i click here if i want to see how it will look like if i change it so for example i can make it red this and i can you know increase degrees gradients colors everything so whatever you want to do you can do that from there if you want to change the change of alignment right you can let me make it like this so that i want to make it as left line right so you can see how it looks right let's just keep it centered let's say i want to have a font size as size of 30 pixels so now it is increase 46 and then also it is increased so you can play around with its style right and then for example if i go to accessibility i can also see this another key from where it is coming and what others are here okay so that's how basically you can check what all styles are assigned to it and and how you can modify and try changing them now let's say that this one i want to modify the text also so what you can do is do a right click go to edit as html i say let me just slide it in a bit right and i can just see how it looks like right what if i want to see that how do this this node i can select it go to copy and copy js path and then if you go to console and you can write here this control v you can see it is already selecting this right and uh we will cover console in detail but this is how you select this element okay now going back again to elements and if i select this right and if i right click this again and i say copy copy styles then all the css which is applied to uh this h1 element will be shown copied you can see here this caller is this text line everything is copied right and let me just close it and for example if you have to you know inspect this element how you can do is do a right click and say inspect element which is like ctrl shift i right and it again open the same thing right it is already selected so now let's let's so we now understood okay this is how you can because the overall this is nothing but everything is at the end is an html tag so that's how you work with them now for example let's let's look at uh this unordered list which has these elements right so what i can do is let's say if i want to add one more list so i can do a copy or i can delete directly do a duplicate so you can see there is one more at it right i can also do a height element and this is hidden right you can see this is hidden but the space is this is it right and uh what if uh now if you must be noticing that if i hover over this it is it is turning into red right and if i go here and look into style of css and resource but we'll go into source once into the next lesson but for time being why it becomes red is because i have i have a css ally to colon power as background right and how do we trigger this is what you can do is for example this is the element which is selected i don't need to cover it right i need to over it to trigger this but another way out is you can click here right with this as selected you can trigger this element straight over and now when that state is reached you can see that how it is becoming red background color is a line and if i go here this also you will see that okay this is the reason the style daughter says that it is becoming red correct so that's how basically uh you are able to uh trigger different uh stuff right so now so we see how do we trigger this how do we edit an element and in fact you can add also once you say if i just say add it as html right so you can add whatever you feel like correct and now let's say that you want to add a you want to suppose let me first select this right so you can filter these properties also you can say that where is textview so you can filter those so text align you can clearly see those those those filters you can apply right and same goes for computed one also here also you can have a list and it will already filter place one list right and then you can also kind of uh you can add your class also for example if i want to add a new class here i can add any new class here so that is it right so so that's how basically and you can see the color is also change right so you can play around with the styles you can debug it you can check from where it is coming you can edit it right and you can also what you can do is you can also delete stuff you can hide stuff also okay one more thing what you can do is for example i want to see what part of my css and all those stuff is being used right so for that what you can do is you can have a click on control shift e you can open uh coverage show coverage okay and if i just click on reload right then it tells me that okay in my style these these parts are covered let me just uh maybe what i will do is let me modify something maybe i can have something like uh not this we cannot be one let's add something like p1 right and just save and then we see in style.css right me just do it again this is from the command palette also you can go from here also run command ctrl shift e and i use it should be concept right you can then here if i double click this right yes if i i don't know what this does not work but if i double click this file i can see that my body these all parts have been used but li has has not been as well as p1 hasn't been but if i just say move here this turns its blue right why it has been used so in our elements tab as of now what we learned about was that how do we select an element how do we add up different classes right how do we kind of filter them how do we see which which which style is added to which element how can we basically copy that id where which that elements refers to we can copy the styles as well as you can so that's that's bit about our elements now in our next chapter or video we will move towards our sources tab where we will understand about how how do we handle the code how do we you know let's say if i click here and how do we this this message is getting triggered for example if i just say okay now you need to troubleshoot it we'll look at that okay so now in this uh listen we will look at uh this source tab and before that uh let us just look at quickly at the core changes which i have done rather than just simply having a you know when you click on this file button right rather than just showing alert message about format i have defined a function nested call to which i am for passing a variable my account and it is returning its count right and then again i am showing another message right so idea is to showcase you the different features of debugging using this and for the timing let's just say that uh let me just close this and if i just click here you complete one extra you complete seven exercises now let's just try to troubleshoot it that i want to see how it is happening okay so for that what we will do is first if you press ctrl shift i you this panel is opened and it has three parts one is on left hand side is a kind of a hierarchy of your files how they are placed then you have in the center is the window where different files will be opened right it'll be like this and on right side you see there is a different kind of breakpoints breakfast look at them we look at this so this is how it is things are organized right now let's see that when i click on this button it automatically run this code and i know that this function is being called right so so how do i stop the code in the debugger so the first thing which i can do is i can simply put a breakpoint by clicking here if it turns blue it is a the breakpoint is active if you click again it gets the bug it's it get deleted or you can create a breakpoint using right click and add breakpoint for the timing we'll just say add breakpoint right and if i click here what does it say pause then develop right and the code has stopped okay now let's just first look at these three these these some of these buttons this one means you just i want to execute it you don't want to debug this means you want to debug it but you will you want to step over each call for example if i click here it goes to next one it calls alert okay now here yes here it is a function called nested call where this my account is being passed so one thing which i can do is either i want to go inside debug this function or i just want to skip over so for example i want to skip over so that's what this step over function does and you are able to see this message all right and if i just say process that's okay now let's again look at it and let's see how does this step in support work so if i now click here and it goes again here and i just want to step over this okay now i want to debug this so i go inside this one f11 so it goes here right for example now i feel that everything looks okay i don't want to debug it i want to come out of this so that's where you have stepped right so that's how you basically do this step by step and then you can just simply say click click on resume and everything is done so these are the buttons basically which you use to you know move to towards different codes okay so now since we have seen how how these different uh options are there right and now what you can do is that for example you can place multiple breakpoint i can place a breakpoint here here and here okay so for example if i do this right now it stops here i say resume message is coming and again it goes to here right and then again step by step it will start it will stop at every point every break point and it will show me everything right but let's say you don't you said that okay this breakpoint is okay rest i think a lot okay i just want to proceed i don't want to stop right so what you can do is you you see this there's a down arrow the you just click on it and you hold the mouse button right and then you click on the second option so it basically goes through everything so what it does is it basically uh skips through rest of the break points right so another option is for example you don't have these breakpoint you just surface breakpoint and you say i want to debug so it comes here but you don't want you want to skip everything and you want to directly in the code to directly go here just click here and do a continue here that's it and first message come line number three and it stops so that's how you can basically skips through the the few lines and the codes and you can directly go there okay sometimes what you need to do is for example you have executed everything and you are at these somewhere in between but you want to restart it right you want to go to the beginning and start again this whole function so what you can do is uh go here on the call set to a restart frame right this is one way you can do it so all i need to do is restart frame and goes to the beginning right and it starts again that's how you basically the starts execution of this function and what you see here is let's just focus on as of now on call stack so this is like in what order this this function is being called for example first is you see there's a button in our index.html which has on click event which call this and that's where it comes right and this this is called as uh the trace and you can also do a right click copy stack trace so it basically what it does is you can see there's a staff trace is copied right and then you can basically uh kind of uh move through your you know check through troubleshoot your issues using calls check that how the calls have happened and where probably an issue can lie right so let me just step over to the next function and just show you how do you check the variable value one is you can see there is already available variable value coming my count is equal to 1 another way is you can just hover over it you will see this value or you can just copy this variable you can go here it shows that another way is if you look at this scope there is a local scope where you see this my account variable one and you can modify it from here also right if you just double click you can modify it very simple right so let me just say okay okay that's fine that's that's okay okay so now we see one type of a break point there are multiple type of break points which we will see so one is the this is simple breakpoint right and there is if you do a right click for example if i do a right click here there's a conditional breakpoint so this breakpoint will be triggered based on certain condition it will not be triggered like always so why what i can do is if my count is equal to seven right double seven then only trigger it and i know that one is it will be one here then it will call this method nested calls one plus six is seven it will get triggered and now you can see this that is yellow orange right orange is kind of yellow that it will be like conditional so if i just click here and let me just remove this so now it stops here because my account value is 7 right now if i edit it right click edit i say this value is 6 then only stop and now if i click here it doesn't stop so which is the way we want them to be right so that's how these are conditional breakpoints one is a simple breakpoint another is a breakpoint is a dom break point right for example let me just first do one thing just move this let me just uh this is a list under which we have this element i'm just copying it right and copying the path okay and what i will do is if you click on this button i will remove this entry the the first one right so what i will do is i will have something like this dot remove method okay so i'm selecting it and then remove method is there if you look at this source this is a document.queryselector select this path this element and then remove it if i click this button right but before that i want that in case anything happens to this list [Music] i should have a breakpoint triggered so what i can do is first let me delete this or i can disable also i click disable it is disabled right and this is a different one and if i can disable blue one it will be light blue so these are all disabled points if i enable it right then they become enabled and i can i can see these two breakpoints under this i can also enable disable from h okay so now let me disable them what i will do is i say that in case this unordered list which is this complete break on subtree modification so if in case anything under this tree modifies you break you stop or in case any attribute modifies then you stop in case there is a node removal then also you stop so i say substring modification so it becomes blue right dom break point right so if you go here you can see there's a dom break point in everyone now if i click here you completed one exercise now it stops automatically and you can see that paused on subtree modification you will descendant li removed automatically okay so this is the dom break point if i just say okay you can see this this is already deleted okay now sometimes you want that whenever you click this button what is happening which event what is mouse click event what is happening can i listen to this event and can i have trigger a breakpoint yes so if you look here there's an even listener breakpoint and under it you have different things different events any mission canvas for us it is we'll take mouse we'll say click so whenever i click let it trigger a breakpoint so if i just click here so it triggers a breakpoint automatically it says this button type on click event and if i just execute it then it also automatically trigger my other breakpoints right so that's how it basically triggers it let me just first delete all these and show you one more thing break on and subtree okay so another thing is basically is for example um what you want is that you want to trigger a breakpoint when this function is called nested and you don't know when it will be called but it is globally available because i have upload unloaded this file by index.html so what i can do in control is you can say debug nested call okay whenever this is called you debug it so i just click here and you see it automatically gets triggered nested call i did not put any breakpoint it got triggered automatically right paused on debug function it automatically tells you that okay this is how things are right okay good let me just reload it because the entries are deleted right and now let's see that another thing which i really have not seen is you can also modify these code for example i can say my account is equal to two and press save simple press save and if i click here you can see you completed two exercise the value gets modified right but if i just do a refresh and you see this value is lost right so there are two ways around it right how do you preserve these changes okay so what you can do is one way is you say that you click on this file system right and you add your chrome folder right this one from developer tools folder to the workspace you see allow and now whatever changes you will make here so let me just close all in whatever changes you make for example i make it to two i make it completed one two three right and uh here also i write something and i press save so whatever changes you make here right you can see them that they will automatically are let me just read this breakpoint that one two three eight everything is getting reflected right and if you look at if you just press the refresh also still the changes are still right why because the code is it is directly modifying your file system if you look at this does this here so you can actually in fact modify everything the developer console so anything everything you can modify right and uh one important other thing which i wanted to showcase is uh one is this not one let's look at this snippet right so in case you want to store this code in the browser right so what you can do is you click here you know you go to here snippets okay let me go back again snippets and then you click on new snippet and you paste your code or press save right or you can do a right click rename my samples right and uh maybe we just want to store this for example console.log hello right and now you want to run it so what you can do is either you can press ctrl enter right or it will console log hello right or you can come here and run this so these are like multiple snippets you can store for uh for your reference in the browsers okay then for example if i go back again to file system right and if i go here let me close this and let's say if i change this right and i have changed this also right or in fact i added another function also let's just assume right i want to see what all changes i have done right now without before saving so what you can do is you can go from here more tools and changes you can clearly see in function there is you have added this then you added this then you add so it also tracks those also right so basically at any point of time you are you are checking you know making some changes trying to check what have you done so you can use this changes tab also right now let's say that i want to remove it let me remove this folder from workspace so let's say that rather than having the whole workspace here i just want to make some changes try out things and let those changes persist also when i reload and if i later want it to merge with my changes i'll do it so what you can do is for example if i just go to page and i want to see what happens if my account is three and i just press save and if i just refresh my account is again two right how do i make sure those my temporary changes persist so for that what you can do is go to our rights select the folder if i select chrome developer tools and i say allow right now if i just say maybe three right and uh now because now it is done with violet so right now if i just press refresh right so it is now three if i just change it to five right and you know hold on and i press save and uh if i just press refresh my count is five but if you look at the back end code it is still two so how it is doing is it is a override folder which it creates inside this right where you can see my account file okay so that is normally which you can use to to sometimes check your chummy changes and then uh kind of uh if you think they are okay then you can immerse them so so this is we have come to this source tab and of the things right end of the lesson where we have looked at trace probes breakpoint listeners source codes how do we debug and operate so now without wasting for the most time let's move on to the next lesson which is related to the next tab which is console and then you might look into network performance certification also hello everyone in our previous lessons we have covered elements sources and now in this we will plan to cover console so like sources console is also very important so this is like uh you know apple where you can write your javascript code you can run it you can you can make you can check how it looks right and primarily in console normally for example uh let's look at our code so so normally developers what they do is they they kind of log some stuff when something is done right for example here it is console.log is being used right let's just look at it what it does so for example if in sources you go you will see console.log is being logged in in nested call which is being called an on click event let me just click here okay okay and this is done so but what happens so anything which a developer wants to process is or wants to log is logged in if you look at here there are four messages so this is the one which was which came from our fees completed one two three nested call if we look at here this is the same right and so that these you know developers can have different kind of login messages and on left hand side what you see is this four messages is like for everything then in case you want to see only errors you can use this filter warnings info right whatever we have logged and user messages if right and in user messages these are these are like uh the locations from where those messages are coming for example my file dot ds is one message which is coming from here and another message is coming from live load so these are the five different ways to see the message right and you can if you want to clear it you can clear it using clear console and if you want to increase the size just control okay and in case you want to filter it you can filter that also for example if i just refresh right and i click here so you see there are two messages and if i want to filter for a click only click will come if i just say rdea then those will get filtered all right and then then that that's how basically the whole uh logging happens and you can view those logs now you can also preserve the logs in which there is a reload or something right if i just hit reserve log and if i do an f5 right you will see that this log is still there it's the previous one and similarly there are other options while for example you can log stm in the the those xhr hx request also right and you can do enable auto complete from history also right so let's just try to while we are in console let's try to look at how does this console okay so for example if you just want to log any messages you just press console and you will see what all different methods are available for example i just press enter so there is error info log one in count there and number of error in the method which are available that's how you can which you can use in your code to put kind of a breakpoint not breakpoints the log checkpoints in your case for example if you just want to log a message to the console you can just say arrow one two three and it is locked hello one two three simple and uh for example let's say there's a error there's an array not error area of salary right and uh which is like which has objects so it's like month as uh exact and uh salary and the thousands okay let's say there is this one object and then there is another then there is another so there are this area of three objects now you want to log them so one way you just say console.log celery right it will just lock this very object and you have to drill down to right another way is to make it more meaningful and you know beautiful is console.table and you just say salary so you see it has index is one column month and salary so it's just much better readable and all right and now for example um so so you want some let's say let me just clear it so one way of clearing is this ctrl l another way is console dot clear so it clears it uh due to preserve block okay yeah so once again let me just do this and now we run this console.clear so it clears it right now let's see that okay in case we want to log a message which is an error how would it look like we want it to stand out so what i will do is say console.log console.error test error it gets shown in red if you say console dot warning just maybe let's say test walking you have it in yellow so in case if you click here it will show that test running you click here it shows testers if you click here it shows everything in the file using the file right it is mentioning it as others because we are using this right and then what you can do is uh once you have an error let's say sometimes uh you want to log a certain set of messages in a group let's say you have one function call you want to log that messages under one function group and then there's another function then you want to lock those messages how do you do that so what you do is you say control dot group group was let's say g1 right and then you say console dot log hello i'm imagining i'm inside a function so console.error [Music] [Music] these are thrown from one function okay and i'm logging it as under g1 function name let's say there is another one which is like g2 right and that's how those are drawn so whatever you press enter you see this so there are two groups g1 g1 has yellow hello and error right so you can use these what if i let's say let me do that what if i just use this right and i want to log that let me close this style that will just so it will say on click event right and i just say group end right and let's not have it as console we say console.log and we say console dot error so we are logging two messages just for our tracking and now what i will do is in case this function is also call we will log that also right and then we say and this key right and i just press save and because it is live server so now as of now the clear everything is clear right if i click here why there is alert console also let me yeah you remember why there is an alert because the changes are coming from this right so let's just remove it and delete all our rights because there is an override and now if i just press this button and now you see this red one shows one error one warning and one okay so we're going to go to this you see on click event then you have you completed one x one two three exercise and then you say nested call then there is this right and if you look here why it is you know kind of not closed here is because if you look in the code this call is before this call so what i can do is maybe i can say it like this right you call it let's just see it as a group complete one so if i now click here so you see there are two groups so that's how we use this okay i think uh one thing is remaining related to controller which is console. assert okay so that's like how do we do is let's say we have let's let's say we have variable a is equal to 10 and where b is equal to 20 right so now what you see is like that we want to say that c is equal to b is a is less than 10 a is less than b right it has these messages so now how you can use console dot basically you want to pass the condition first condition is b a is less than b okay and then what do you say is that what is the data you say my data is a comma b right comma c right and if this and you just execute it right and if a is less than b this result condition is true which is okay and if it relates this assertion field because a is not greater than b so it logs the data also clear so it's like you are making some version is less than b with this data if this assertion fails which in this case it has failed so now you can have little option so you can use this console as a rebel you can code anything even if let's say i want to remove this for example this one right what i will do is i'll say copy js path i can try it here only i can say dot right same way if you want to copy this path and you want to see what all methods are there you just press start and you can see whether it is click and all and everything in here also you can have i'm just taking an example so that is also one so that's what we learn in this lesson so maybe now we have understood fairly well elements sources console and it's like a playground for us and we can interact with the on the code also in fact we can modify the values also during debugging now next we'll look at networks then we'll look at applications and the other tabs so now we have understood about elements source console time now to understand and talk about networks so normally what happened is so let me just clear everything and just do a refresh and now if you look at this when i when any website anything which loads there are set of files which are uploaded so you can see there is a style.css my file there is a web socket because of live server there is a ui file on this you can ignore so these are the different files which are loaded and so you can look at them for example if you look at click on this it tells you what is the request it is loading this what is the method get method status is green okay what was the response header this was a header and then you can check in response also those code right and it can tell you what initiated it right and it also shows you how much time it took to load for example which you can see here also in the waterfall model right and the status also tells us that what is the status that is like 200 means everything is working fine right in case you want to filter certain queries or certain files you want to see whether they are loaded or not you can for example filter it here using my or whatever filter you define for example if i say i want gs files or js files another way of js file to be filtered is this one you see all js cs1 css1 xhr is where you mix ajax since we don't have any so that's why you don't see it but otherwise you know you can have these filters and if you want you can write data url also as well as if you want you can block certain requests also for example if you right click here you say block request then it will come on the block okay and then if if you do a right click you can save these requests also there's another function which is to which is like a recording network log stop and start for example if i just stop it and i just say refresh right then it will not uh log let me just clear it so if i just say refresh you can see there is no log coming because i have stopped network logging and if i just enable it and do a refresh you can see this so where it is used is when normally what happen is your front end interacts with the back end then you make those xhr requests and those requests are normally you can track them here what requests are made for example let's just uh maybe let's open the site name or to our rd right and if i open this right and i do a reload let me do a reload and now you can see there are so many requests being sent right so how do i filter so let's say i want to see what are the ajax requests and so in this case i don't see any what are the javascript files these are the javascript files because i need to debug and i might need to choose them right what are the css files you can see that the bootstrap so clearly it is using bootstrap you know are there any images yes there are many images anything media no phones yes these are talk anything yes this is a one web socket sending there are no web servers and and similarly and you see this console also these error messages shows you something that okay there is some error some some file is missing or some font is missing right let's say if i just click here and i say reference library okay and if i just say let me just keep it all and let me just clear it okay and let's see what if i want to click this so now we can see there is a request which is being sent and if i just do an x hr there's nothing there is if you just open it it will tell you what kind of requests have gone for example this css one which responds anything javascript rated and all those stuff so basically you can drag and in case if you look at this request this request was sent to this place okay and what was the response the same thing whatever you see here is you can see those values so that's how normally we use networks is to check whatever is being ordered is there any file which is missing is there is there any call which is not going through that's how which he uses for troubleshooting so now in our next lesson what we'll do is we'll we'll go through first as applications and then we'll go through other tabs so we have seen element source console tab and network tab so far i think now to talk about application tab so this is uh the place where you actually see what local data is stored by the page for example local storage is like uh if you open one session here and i open the same thing in next tab then the data has the data needs to be shared that is the local storage but as soon as you open the tab a session is open and any data you want to just save for that session is stored in session storage this web sql db are typically in browser databases right the light one cookies is what all any cookies which are stored by the website you see that then you have cash you know so what we will see is how do we create this local storage or how do we read it and uh one way for this is that i write it here but since we now understood what is console so we will actually you know do it interactively in console for example if i click here i go to console and we have a global upgrade local storage and we will say local storage or set item uh name let's say i want to store the name right name is the browser okay and i let's say i want to store the same name in session storage okay so now if you go to the application tab you will see there is a name in a feed and there is name evaluates is stored like a key value and good thing is you can filter also you can delete a value also you can delete all right and in case you want to read it that is also not very that's also very straightforward right so all you need to do is do get item then in the name in the in the value you pass the p [Music] so i want to see what is the name of it right and same you will go for this and you can delete also by using the move item so local storage remove right on the bead and if you see here this is born but session is still there right so let me just store again the local one because i want to show you something okay so now we have both named here as well as here let's see what happens if i just copy this open a new one right and if i open uh the window you will see here this local storage is there but session storage is not all right and in case you want for example you can clear it from here if i say local storage clear all and if you see here and you go to local storage it is like a data which is shared across multiple tabs and session is local to it so maybe let me open one one more one more application so that you can see if we have any cookie or not let me just say ctrl shift i okay and you will see here in under application there are cookies right which is nothing but name value here right and youtube this is like another one from where which we are getting the cookies right does it have any local storage yes it has these keyboard values storing locally like this one frequency and youtube also locally some data electrical youtube and then there is session storage nothing in related to session storage yes in youtube it has some session storage data so so that's how normally when you want to understand is there any data which is locally stored or anything what value in it and you can interact with that using it so i hope it makes sense and in our next video we'll cover the next tab okay so in our previous uh previous lessons whatever you call them we have understood elements sources console network as well as applications now i think it makes sense to club performance as well as lighthouse so the overall intention is to you know study your website in all the specific perspectives whether it is from accessibility uh performance wise or how it will be to the user so first let's start with lighthouse and all you need to do is what categories you want to check where i want to check its performance progressive web web it is not there but let it be able to run those text also seo so i want accessibility i want and device i want to check is let's say mobile and all you need to do is just generate report so it will kind of do an audit of this report right so you can see on the left hand side uh there is uh there is a mobile it is trying to load on that mobile console mobile the demo one it is trying to load on that and now hopefully we will get our report in terms of these categories you can see our website is following 100 best practices although one page performance wise there is 62 percent and uh okay very good what i forgot to mention since we have not used in cognitive mode the chrome extension which we have have impacted it right so let's do this one more time yes so maybe we go to this and then i open again the same way the lighthouse and i say generator board everything same options ah because now you can see because it is a very simple single page i was like why in performance it is bad because there were extensions there but now it is hundred which is what best practice is under one facebook as cos we are down accessibility also not good now if you scroll down you will see matrix wise time to interactive and everything is green green green there is a trace and there is a accessibility issues right bathroom and forward london do not have a sufficient contrast ratio then it tells you the different options of how do we fix it right or maybe on seo also it tells you there is no meta tag yes we had not provided it all these things so that is one aspect it tells you talks about how your website is what is how does what are its how does it rate from different parameters now let's say i want to measure this performance if i do some actions right so if i just say record and i just say start i just want to click on these things three four times right and then i say stop so it will also record during that time however website is behaving good thing is you can set the the network also whether it is 3g 4g we have not set any you can set what kind of a cpu also and if you look at it there are three parts to it one is fps frame per second and it is all good which is very good because there is no less of a frames there is no frame drop cpu utilization is also good not much and it was also so if you look at here the frames there's almost it's just one frame per second item frame it's all green right it's good so nothing bad and if you just scroll up you will see where your time is being most of the time it's applies in scripting rendering printing primarily it is scripting because uh we are clicking this button there are logics being run right and you can have this uh um there's not much here put them up not much here even also is empty okay good because our website is a very basic one so it doesn't have that let's do one more thing let's let's open google.com okay and uh what we'll do is we'll delete this and we'll declase and then we say generator report on google.com and we'll see do we have any issues or anything issue related to google.com you can access any site across these parameters and let's see how it behaves with google and it also provides you some tips also how you can increase your little low time and you know can improve your performance so let's see what score does google gets actually wow performance wise amazing so i will say time to interact total blocking time what you can do is because it might have i have already labeled a site here so you can do multiple you can generate this report multiple time and to come up at a certain decision and i think uh removable news so it tells you where there is someone new javascript accessibility-wise it is very good whatever is small changes it tells you and then best practices there is some form size or register those you can do pw it's not a pwa search engine so so there is always a room for improvement that's that's very important so lighthouse and performance is what will be useful so in our next one we will i like to look at security and memory and then that will be like our end of the course so in this last lesson we'll talk about briefly about memory and security and in case you see don't see these tabs you can click here and go to more tools and you can choose from here so typically security is like what kind of certificates our site has since it is not secured it doesn't use https it is http that's why you see this right for example if i open google.com right and uh then i see this security tab let's just uh let it open yeah so now you will see here is a little lower little bit slower so it is a security green and you can also see the certificate also what certificate is using right and you can download it so and all the details are there so that's the importance of this site right that's important this secure data you can view the certificates settings resources everything is secured or not right and here it clearly shows it is non-secure right so now uh so we understand what happens in secure freedom let's maybe go to memory so there what happens is because this whole website contains so many javascript objects right so those objections things how much memory they are occupying how much this storm actually is occupying your memory what what are the tasks of deck so those things we can look here so what you can do is you click here you go to this memory tab you click here on take snapshot and then you just press refresh this number is increasing right so this increase is actually basically building the snapshots and okay so here you now see all the relevant objects window document time saying shadow size is the current of memory size which has been occupied by the object series and strings and retained is in case they're released how much of it can be recovered and distance is typically more from like you know you store different memory areas one is linked to two two is linked to two so how far those nodes are distant and if i search of this in daw so here i don't see any uh detached node that anodes are like for example if you have a tree and then that tree has its leave nodes and if you delete the leaf nodes i are referenced to the tree but you delete the tree so but your leaf nodes reference still to the tree so that's said they're like they exist but they're not part of that dome but they are complying the memory they are detached so in this case we can see we don't have those detached node at least so which is good right and here once you click on it you can get the details right for example for google if we run such snapshot okay and i just refresh it i can click here around on the things and same with this the other options also kind of uh this one is also like it draws a timeline also let it let it run and plus you can filter from here you can see the objects are located this summary is like you can see statistics for example how much of it is chords strings areas so typically system objects how much of each memory is being used let it run so now let's see uh dom that has dom docker list you see this so we have there around we see that there is some there are some iframe elements for which we can have a detached option which exists right and you can click and find it so i believe we have covered most of these uh important very important tabs and rest all for example uh you can keep using them right whenever you you know you can refer them whenever you need whatever network relations rendering right so so that's how normally uh our our journey of uh com developer tools or console comes to an end before that one more thing is if you want to run some commands for example you want to show console so you can directly show console and it moves forward so this is like a command from which you can use thank you so much for watching thank you everyone for making to the end of this course and i hope you learned something new something more out of this course feel free to provide your feedback ratings and happy to share it with your friends uh what is the next so the what is next is that this is like a chrome we are into prompt so we might actually look into how do we develop an extension or is it possible to develop extra tab our own one for example you see these right you might have a course on it so maybe you can also explore and once again thanks for watching keep sharing keep learning bye bye take care stay safe

Channel: freeCodeCamp.org

Views: 97,188

Rating: 4.8981433 out of 5

Keywords:

Id: gTVpBbFWry8

Length: 74min 51sec (4491 seconds)

Published: Thu May 06 2021