The Most Important Skill You Never Learned

the most frustrating part about coding hands down is trying to find and fix bugs in your code this is why learning how to debug properly is an incredibly important skill that most developers completely skip over and it doesn't matter what skill level you're currently at learning how to properly debug using Advanced Techniques is incredibly important so in this crash course video I'm going to teach you everything you need to know about debugging from the absolute Basics all the way to the most advanced concepts you need to understand in order to make sure that you can minimize the amount of time you spend finding bugs so you can spend more of your time writing code which we all know is way more fun welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner now since I'm going to be covering everything from beginner to Advan Concepts in this video I want to put time stamps in the description so you can jump around to the exact skill level you're currently at now if you're an absolute beginner when it comes to debugging the first important thing to understand is how you can actually use the tools that are given to you to debug bug certain problems that come up in your code for example in this code I have some really simple stuff going on I have a function called print name takes in a first name and a last name and it just combines together the first name and the last name and down here if I just pass in for example Kyle and I pass in cook that should print out Kyle cook but when I save you can see we're getting an error immediately uncaught reference error fit name is not defined and it gives me some other information after that now we'll get that in just a second I want to finish understanding what the rest of the code does this next function is called print end times all it does is you pass in how many times you want to print something and the thing that you want to print and it should print that thing that many times so as you can see down here I'm calling that pass it in in five and the value high so it should print out high five separate times and then finally I just have a simple event listener on my document so every time I click on it it should print out clicked super straightforward but for now you can see we have this error so immediately when you get an error like this the most important thing to look at is going to be this Topline message right here which tells you what the error is in our case it's an uncaught reference error and here's a little bit more information on What that particular reference error is and then the next most important thing to look at is going to be this section right here which tells you exactly in your code where this happened so in our case it's saying this happened in our script.js file on line two so if we go into this file and we go down to line two you can see this is where the error is occurring now without any more information it's kind of hard for us to tell what's going on but if we look at this uncaught reference there it says fit name is not defined so that means this fit name variable is not defined but is trying to be used in this particular case all I did is I misspelled first name as fit name so if I were to actually fix this by properly spelling first name and I give it a save you can see immediately that fixes that particular error that we had so I bring this back the most important thing to look at anytime you get an error message is going to be where that error message occurred so this gives you the exact line number and also looking at exactly what the error message tells you is happening also if that isn't enough information it'll also give you more information on exactly where it's called if it's nested inside like seven different functions so if you call like print age then call Print name and then call something something else after that it'll tell you the exact order of all these events in this section down here in our case we're calling just one function so that's why you can see it has one line here for our function and then one line for our main script file and that's all that's happening as you can see this is saying on line 17 which as you can see is essentially where we're calling that function and if we had more nesting we would have more entries inside of this telling us exactly the order of all that nesting so that gives you a high level information of what to look for now let's go back and fix that error again and we'll notice we have another bug but this one doesn't actually show us an error and these are by far the hardest to actually debug because usually an error message is good at telling you what's wrong but if you don't get an error message it means something's wrong with your code most likely because of how you wrote it so in our case here Kyle Cook is printing out exactly like we expected to but right here we're calling print n times and it should print out the value high five separate times but instead it's printing out five five separate times so clearly there's something going on inside of our code now in our particular case it's really easy to read this function cuz it's only three lines and figure out what the problem is in our case you can see here that I'm console loing n instead of console logging our value if I were to swap this out with value and I give it a save you can now see it prints out high five times instead of n five times so this one was pretty easy to figure out just by looking at exactly what's going on but a lot of times your functions are going to be more complicated maybe you have a 100 lines of code you're trying to read through with a bunch of different if statements and variables being created concatenated changed and so on so it's hard to keep track of exactly what the particular value of all your different variable is throughout the entire essentially function that's running so instead what you can do is you can put in console log statements to try to figure out what's going on inside your code so for example let's bring this back to the broken code that we had before and what I could do is I could say you know what for some reason it's printing out five I wonder if my value is proper so I could say console.log and I could say value and I could print out my value so now hopefully I can see if my value is being passed in properly as you can see here my value is high so at least I know that is working and this is going to be the most basic way of debugging a problem we're going to get to more Advanced versions later in the video so you can see okay my value is obviously correct so now I'm going to move on into my function to make sure that that is working properly so I can come inside of here to see okay is my value High here as you can see it's printing out High every single time so my value is still high and at that point I'm most likely going to realize oh I just forgot to change n to Value so that's where my problem is I'm going to change this to value and boom there's my problem nothing else to worry about rather straightforward so if you have a relatively simple bug or maybe a simpler function that you're having a hard time debugging just by reading it and looking at it throwing in a couple console log statements or other type of console statements in there to try to figure out exactly what's going on with your different variables is really important this is also great if you have a lot of if statements for example that are doing certain logic inside of them it's really great to put a console log inside of these because you can see okay did I hit this a lot of times I'll just put console log here and if I see that in my log okay I know that my code has made it to this point and then what I do is I take that console log and I move it down a little bit further in my code and I say okay am I getting to this point in my code and I save and I say okay it's printing out here so I'm getting to this point so I'll maybe move it down a little further and be like okay I'm still getting to this point in my code this is a great way to figure out how far your code is actually getting at a rather simple situation I use this all the time when I'm doing really simple debugging so using console log statements to figure out where your code is actually executing as well as figuring out what the values of your variables are is a great way to do really simple debugging but obviously if you get to more complicated problems this console log system is not really the best option because it really clutters up your console and it can be difficult to actually debug more complicated problems and that's where it comes in to start using an actual proper debugger now this is something that's really cool I'm going to show you exactly what this does all you do is anywhere inside of your code just type in the word debugger just like that you can see it turned blue because this is a JavaScript keyword and now when I save and rerun my code immediately I'll expand this so it's a little bit easier to see you can see I get this huge section on the right hand side here if you're inside of Chrome for the dev tools you can see it opens up this sources Tab and the sources tab shows you exactly all your JavaScript code so this is all the JavaScript code that I've written over here on the left you can see it's repeated on the right here it's paused my code exactly on this debugger line so I can see the value of every variable I have for example I can see the value of N I can see the value of my value variable I can hover over things inside of the code and it tells me the exact value of those variables and the really nice thing is you can see right here I have these buttons that allow me to actually do different things with my code so this very first button right here all it does is just resume execution it essentially unpauses my code and it'll run all the way until I reach the next debugger statement or until my program is done so if I click this you can see nothing at all happens my code just runs perfectly fine and prints out everything just like it did before now let's rerun our code by Saving to get back to this point the next thing that I have is going to be called step over then we have step in and we have step out these are kind of really important things to look at so by using step in it essentially allows me to step into whatever thing I'm calling it's going to be a function usually so if I click on step in it's going to step in to the thing that I'm doing so if I keep clicking step in you can see it's constantly stepping into what I have right here I'm not actually running any functions so there's not really anything that's happening when I do step in but if I were to move my debugger statement I'm just going to expand this so I can show you what I'm talking about I'm going to move it right here before I call these functions now if I move over to here and I just resume my script you can see we're now stuck at this debugger statement if I use this step over function what it does is it steps over this function it does not actually step into the function instead the next time it pauses is going to be my next line of code so you can see it pauses right here for my next line of code while if I click step into that's going to go into the function and pause on the very first line so you can see I click step into and now I'm on the very first line of that function and it's going to be executing that code now you can see I have quite a bit of stuff going on inside here I would have to click this step into function a lot of times to get all the way through this whole Loop and this whole function that's where the step out function comes in if I click on this it's just going to take me essentially to the very next line after that function is called this is a really great way to be stepping into code and as soon as you get to the point where you're like okay I don't care anymore about this function click step out and it's going to bring you to the very next line directly after that function is called now the final option that we have for these buttons is going to be this button just called step and this works almost identical to the step into function but it works slightly differently when you're dealing with asynchronous code so let's go ahead and actually change our code slightly to show you what I'm talking about I'm just going to go in here and I'm going to add a set timeout there we go this set timeout is going to last 1 second and we'll just say console. log time there we go super straightforward stuff that's going on here I have my debugger directly above it so if I just resume and rerun my code you can see I'm at that debugger right there now if I use the step into function my code is actually going to wait when I'm on this set timeout it's going to wait a full second and then it's going to put my debugger directly inside that set timeout because it's now trying to step into that asynchronous set timeout code so if I use step into it's going to wait and then step into that set timeout function now if I resume and refresh my code back at that breakpoint and I use the step function instead that's going to go in the normal chronological order so my set timeout is not done yet so if I click this you can see it's going to print name click it again and it's stepping into my print name function let's step out of that here we're on print end times we can step over and so on so the only difference between these two is how it works with asynchronous code if you use step it's going to just execute in the normal execution order while if you step into your code's going to wait for that asynchronous code to finish before it jumps inside of it to look at that code this this is a fairly Niche thing that you don't have to worry about too much but it's nice to know the difference between the two now that's the basics of using this debugger command but there's a lot of other stuff you can do with the Chrome debugger and we're going to later show you how you can actually do this directly in vs code which is my preferred way to do more advanced debugging setups but as you can see here on this left hand panel besides all these buttons that I have at the top this last button here just disables all the break points that I have we don't really have to worry about that too much but as you can see here I have this breakpoint section so for example I can pause on any uncaught exception this is a really powerful thing if you have certain errors in your code but you're not really sure where they're happening for example if I were to spell first name incorrectly again and I Sav my code I'm going to get rid of this debugger statement and just refresh our code to exactly what we had before give it a quick save and you notice since I have pause on uncaught exception checked that means anytime I have an error in my code that I don't explicitly handle it's going to stop my code execution right where that error is show me what the error is show me the line where the error code the exact place where the error occurred this is a really easy way to track down specific error messages that you have and you can see inside this section that has the scope that tells me all the different variables that I have you can see I have my first name my last name my entire Global scope here which doesn't really matter too much as well as all the information on the actual error that is occurring tons of really useful information inside of there so I love having this checked pretty much anytime that I'm working inside a code where I have errors that are happening and I'm not really sure where they're coming from now there's also an additional checkbox for pause on cot exceptions this essentially just means anytime you properly handle an error with like a a try catch statement or a catch for a promise then it's going to also pause your execution in those scenarios I recommend generally not turning this on because it's going to give you so many false positives of errors that are properly handled by things like Library code you use and so on that it's just overwhelming with errors and stuff that's pausing that you don't actually care about and doesn't usually help you with your debugging code but I do recommend keeping pause on uncut exception on in many cases because it makes it easy to find where there's errors inside of your code now if I just continue the execution of my code make this a little bit larger so it's easier to see everything you can see the next section is this call stack now all the call stack is is just going to show you all the functions that are currently being called in the order that they are called in so in our particular code let's modify it a little bit so we have a function called Main and inside that function that's called main we're going to call Print name and maybe inside of here we're also going to call another function so we're going to say function test just like that and inside this function we're going to call Print n times we're going to print out two times the text of by sure and in here will call test as well so we have all these different functions in this particular order so I'm going to give that a quick save and what I want to do is I want to load up my debugger inside my print end times so I'm just going to come in here debugger just like that give it a quick save and now we'll move over here now in my particular code I'm calling this function twice I'm calling it once right here and once inside test so it can be kind of hard to tell which particular scenario I've run into where have I actually called this code that's where the call Stat comes in you can see here it has print end times and then if I click the next level it is anonymous and it actually shows me the exact line of code where this has been called now the reason this is labeled as Anonymous is just because it's something that's in the main portion of my file as you can see on my actual code it's just at the top level of my file so it's essentially inside of an anonymous function you'll also see this anytime you use functions that don't have names so most of the time you're going to see those with arrow functions now if we continue our execution to the next time that print end times is going to be called you'll see that our script actually finished that's cuz I should make sure that I call Main that it actually works so now here we're on our first time we called it if I click next you can now see that it's throwing an error on first name so let me fix that first there we go so now I can continue the execution we're inside of the print name the first time now we're inside print name the second time or print end time sorry and you can see here our call stack is much larger we have our print end times function we have our test function so if I bring this down a little bit and click you can see we're inside that test function right here if I click on Main you can see that this is where we called it inside of our main function and if I click Anonymous you can see that that's where we called our main function so being able to go through the call stack level by level is really great CU not only can you tell where you've actually called this function but also it'll tell you the exact scoping of all your different variables at each level of the call stack so inside my test function this is all the different scope that I have inside main you can see I have a separate level of scope inside my Anonymous another level of scope and inside print end times another level of scope it tells me exactly what each of the different variables are inside of every single section which is really nice now if we can continue on from here the next thing I'm going to be talking about are break points as you can see every single one of these categories is breakpoints the most simple form of breakpoint actually falls under this breakpoints category and that's because anywhere in your code you can add a breakpoint and to do that inside of the Chrome debugger all you do is just click on the line number what that's going to do is add a breakpoint so let's say I want to add a breakpoint right here on line number nine you can see in this breakpoint section it's telling me the exact script file where this is what the line is and what the code is and now I can even remove this debugger statement completely give this a save and I can move around exactly where my breakpoint is going to be so it's on that four statement and you can see essentially when I run my code it's going to stop right where I specified this particular breakpoint so again if I save my code you can see it stopping right there so this is a really easy way to actually be able to put a breakpoint directly in your code and stop where you want to without adding the debugger statement into your source code this is really great if you have code you can't easily change for example you're on a production version of your site and you want to test a particular problem why it's happening you want to debug it adding in these different break points is a really great way to do that another nice thing about breakpoints is you can really easily disable them or you can completely remove them by clicking on the line number again now let's just let our code finish out and we'll talk about this xhr fetch breakpoints essentially this works anytime that you have a fetch request inside your code that's fetching out to another URL for example anytime I have example.com inside of a URL it's going to break inside of that fetch statement for me this is a great way to be able to say hey you know what I know I'm fetching a particular URL I don't know where the code is for that fetch statement but I want to add a breakpoint so that anytime I make a fetch statement to example.com it's going to put a breakpoint directly inside that fetch statement it's a really handy way to do that for now we're just going to remove that cuz we don't have any fetch statements another thing you can see here I'm going to skip a little bit down is the event listener breakpoints as you can see I can go through and I can do any particular event that I want I can actually make sure I do exactly what I want for example in my mouse I can say anytime I have a click event listener I want to actually pause inside that click event listener whenever I do the click so if I open up my Google Chrome and I just click inside of here immediately in my debugger you can see it's gone inside of that document. add event listener this is my click event listener and it stopped on the very first line and that's how these event listener break points work you can essentially say anytime a particular event occurs I want to break inside the exact code that's listening for that event which is a great way to be like you know what I think something's happening on Mouse click but I don't know which particular event it is or where the event is in my code I can just come in here and say you know what every single click event in my code it's going to throw a breakpoint directly into them for me automatically and we can close out of that let our code continue on and we can look at this Dom breakpoints section this Dom breakpoints is actually something you set inside the elements tab here so for example inside of my body I could write click this and I can come to the section for adding a breakpoint where it says break on and there's three options there's going to be node removal so essentially when this thing is removed attribute modification for example if I change the class name if I change other things like the title element or I change the actual attribute for like a data set property and then finally we have subtree modification that means we added children modified the children removed children Essen changed anything inside the element so we can actually do a breakpoint on these different things which is great to say you know what I want to do something whenever this particular element is removed and now anywhere in my code as soon as this element is removed it's going to pause me on the exact line of code that removed that element or if I wanted to have a breakpoint that's happening anytime things are modified it's going to pause directly anytime I try to modify this body so we can actually see that really easily I can come into my code document.body do classlist do add and I'm just going to add the class of High super straightforward and simple and since we have inside of here that we're breaking on that attribute modification and the subre modification we actually can make this a little bit easier by just appending a child so we can just say we'll just append the text High to the very end here inside of our body you can see that's being appended right there and to make sure that we're able to link this up properly let's just move that inside of our click event listener so inside of our click event listener we're going to pending directly into our body element so now what we can do is we can open up our Chrome browser and I can just click inside of here and you can see immediately my code has paused and gone to the exact line where I changed my body and you can see paused on sube modification for me appending something into that body element this is a really cool thing that I absolutely love about debugging inside of Chrome or Firefox or any other debugger is it makes it really easy to check when things are changing inside of the Dom so let's just let that code finish out as you can see here all of our different Dom breakpoints are being listed the next thing we have is going to be Global listeners we don't really have to worry too much about what these Global listeners are but these are ESS enally listeners that are set up on the window object or other Global objects I can actually see this a little bit more in action if I just come in here and I add an event listener on my window so we'll just add a resize event listener for example doesn't even matter what the code inside of here does now you can see we have that resize event listener and I can click on it and brings me to the exact line where that is so it's an easy way to see things that are happening on the exact Global scope then finally we have this CSP violation breakpoints now this one is a little bit interesting it stands for Content security policy and essentially if you have a Content security policy set up for your site this is going to be able to detect the errors that are being thrown and you can actually break on those particular errors inside your code to see exactly what lines they are I don't have any content security policy set up for this it's something that you're going to see a lot more in like larger sites and larger teams so for the most part you probably don't need to worry about this particular option but the other options inside here are all incredibly useful now the final thing I want to talk about with this particular page of the Chrome debugger is the watch tab so right next to scope we have this watch Tab and inside here I can click the plus button and just typee in any variable name that I want for example I can type in first name just like that and now what's going to happen I'll just move my camera out of the way real quick you can see that essentially it's going to give me the value of the first name variable anywhere inside of my code wherever I am so if I put a debugger statement for example inside of here there we go got a debugger come over to here and I refresh my code you can see make sure I get rid of that pause on COD exception that first name right here if I hover over this is set to Kyle because inside this code first name is Kyle now this watch section I don't use super often but it's really useful if you want to kind of track a variable through an entire set of code like maybe you have a really large function and you have one variable that's changing a lot this is a great way to write out what that variable is but you don't have to just write out a single variable for example I can write out my own JavaScript expressions for example first name and last name combined together and you can see it's printing out Kyle Cook as the value for that particular code so this is a really great way if you want to have more complicated things where you check the value of certain variables or check like certain if statement values things like that are really good for this watch section but I generally find myself I don't use it too much because I can just use this scoping section to get all the exact same information now I'm going to come back to this chrome debugger in a little bit because I want to talk about some of the other tabs like the network tab which is incredibly useful but I also want to show you how you can actually take all these powers that you have in the Chrome debugger and get them directly inside a visual studio code I'm going to completely exit out of that we're going to open up full screen for visual studio code and I want to show you how you can debug everything directly inside of here which is a much nicer debugging experience because you have your full code editor work with and all the code is showing up directly inside of here so the very first thing that we need to do is we need to go to this tab right here called run and debug it should be the option essentially almost at the very bottom so if we open up run and debug you can see I have this run and debug Command right here and I want to click on that and for my particular use case I'm using Chrome so I'm going to click web app in Chrome because I'm creating a web application for Chrome if you're doing node.js choose node.js and so on and you can even create your own custom scripts but in our case this is going to do pretty much all the work for us now the first thing you need to put inside of here is the URL for where your actual site is running now in my particular case I'm using an extension called live server this live server sension just essentially lets me host HTML files so I can open them up and actually view them and it works on Port 5,500 so here I'm going to change Local Host to Local Host 5500 just like that and now it's going to listen for that 5500 port and then all you need to do once you have that done is just go to that tab you can now see I have this play button right here I'm going to click that play button you can see on my screen it's actually opened up this chrome window right here and you can see at the top I have this little bar that I can use to pause I can step over step into step out of all those same things that we're used to and I can even restart my program from the beginning and then I can end this if I want to now this is really great because I can go into my script for example and I can add in a debugger statement oops debugger just like that if I can spell properly there we go give that a quick save and now immediately it has paused me on that line because my program automatically restarts when I save that's part of live server and on the left hand side it's a little bit small font unfortunately I'll zoom in a little bit so it might be slightly easier to see but you can see here I have all of my scoping all my different variables my Global scoping everything that I could possibly want to see about everything I have a watch section where I could for example watch particular variable names when I can even do expressions for example I can just copy this expression paste it into here and now you can see I get the combination of first name and last name I get the entire call stack showing up right here and I can jump to the exact lines where all those different things are being called if I minimize these values down a little bit you can see I have my whoops not my call stack my loaded scripts these are all the different scripts that are being currently loaded you can see I have all my break points with the exact same checkboxes and if I wanted to add a breakpoint all you need to do is just click off to the side here you can see this little red dot is going to appear off to the side just click on that and boom now we have a break point being added and we even have our event listener break points this is all pretty much identical to what we had when we were working inside of chrome I'm going to move my camera back to the corner just to keep it out of the way so you don't have to actually see it and what we can do a little bit fancier here than some of the other stuff that we could do in Chrome is if I just let this continue all the way through is we can actually add in fancy or debug breakpoints for example I can do a breakpoint like this and if I restart my program boom it's going to be right on that line pretty self-explanatory but I can also put in slightly more customized break points for example if I right click on this you can see I add a normal break point I can add a conditional breakpoint a log point which essentially just log something out in my console and then I have a triggered breakpoint which does something based on when other break points happen so for example let me add in a conditional break point and I can just say when I is equal to 2 so now this breako is only going to occur when I is equal to the value of two and if I restart my program and I check the value of I at this breakpoint you can see it is two and if I click to go to the next one the next one there is no next one because I'm only calling this function one particular time and actually I am calling this function twice you can see I'm calling print name with five print name with two but when I call it with two I never actually reaches the value of two it only reaches the value of 0 and one and never gets the value of two which is why this break point is never hit a second time now you will notice one downside that it appears at first is that I can't see what my console output is but if I open up this section here that has your terminal you can go to the debug console and boom I get the exact same console output that I get inside of chrome but since I'm using my debugger nvs code I have that exact same information I can jump to the line numbers of where all this stuff is occurring so I get the exact same output that I would get inside of chrome but now I'm getting it directly inside of vs code which is really great for debugging now I'm going to minimize that just so it's not taking up a bunch of screen space and I want to show you what that log Point looks like if I just come in here I can just say that I want to log the value of I for example and now it's going to log me the value of I every single time this runs so if I do a refresh and I just expand past this open up the debug console you can see it's printing out I a bunch of times obviously I want this to print out the value of I so if I just put it in Brackets like this it'll actually use the variable itself so now if I refresh this and I make sure that I move that debugger to the correct point so I'm going to just remove this one I'm going to put on this line in particular so I'm going to just remove the break point that we have here add in a log Point logging out the value of I inside of here and now if I just let this continue all the way through you can see it's printing out zero one up here it's printing out all the way up to four it's essentially just counting all the way up for me I'm going to be honest I don't use this particularly often just because I can throw in a console log statement relatively easily but this is nice if you need to add in a particular thing inside your code to log something without mudding it up with a bunch of console log statements so now I want to talk about this triggered breakpoint section so again I'm going to minimize this so what I'm going to do real quick inside of my code to demo this is I'm going to add an if statement if n is greater than three then I just want to console log big doesn't really matter what I'm doing here I'm going to add a breakpoint on that line now you notice this breakpoints hollowed out essentially it's saying that this is unverified my file has been modified I need to restart my debugging session so if I just save this and I make sure I restart it'll make sure that that actual debug statement works properly now here I'm going to add a triggered breakpoint I'm going to say I want to wait for a particular break point I want to wait for the break point on this particular line script line 8 and I'm going to click okay so now this line of code will wait for this particular break point to be hit before it actually runs this breakpoint here so if I restart you can see this breakpoint has been hit which means I'm also hitting my breakpoint here all of that is working perfectly fine now I'm going to remove both of these break points just so I can get my code back to a state that I had before and now what I'm going to do is I'm going to change this to be greater than 30 this is never going to get hit so I'm going to add this break point in I'm going to add a conditional or not conditional I'm sorry I'm going to add a weit for breakpoint here for that particular line click okay and now if I restart my code you'll notice that I'm never hitting this breakpoint and that's because I never have an n greater than 30 which means this breakpoint never actually executes and since this breakpoint never executes it never executes this breakpoint down here now this is a rather Niche thing that you may want to use but it's really nice where if you have an if statement then you only want to check for certain things happening if that if statement evaluates to true or if certain code runs this is a great way to make sure you stop your execution of your program only if certain prerequisites are met inside of your code this is essentially also how those triggered breakpoints work if we were to edit this and do a hit count for example like only do this when I've hit this a certain amount of times so like for example two I have to hit this breakpoint twice before it actually finishes or based on when a certain expression evaluates the true we kind of already looked at that as well so these are really great ways to only breako on certain particular situations now pretty much the only thing that you may notice that is slightly different inside VSS code versus Chrome is I can't add a debugger state on fetch statements but that's actually something I can do there's just no UI for it so if I hit control shift p and I search for fetch you can see I have edit add and remove for a fetch breakpoint if I click on that I can type in a URL and any URL that I fetch that is contained inside here for example if I did example.com and I hit enter that's going to essentially set up a particular fetch breakpoint for anytime I fetch example.com so you have all that functionality that's built into Chrome directly built into vs code and this is my preferred way to debug especially on larger projects now the final thing that I want to talk about is going to be a few more tabs inside of chrome so let's just open up that Chrome debugger that we had before there we go got that open I'm just going to remove all these different break points I don't actually need all these break points so let's just make sure we get rid of all of these there we go just so we don't have weird break points showing up so and we're going to go to the network tab here this is probably the next most powerful tab after the console the sources Tab and the elements tab because this allows you to see exactly what's being fetched every single time you actually fetch from your page so what we can do I'm just going to put this off to one side and on the other side I'm going to have my document so I'm going to bring up my network tab make it as large as possible and in my sources section I'm just going to make sure I remove all break points I'm going to click this to remove all the break points this essentially just disables all my break points so now we're on the network Tab and you can see inside of here when I refresh my page it shows me everything that's fetched so I'm going to clear this click refresh and now you can see exactly every single thing on my page that is being fetched this is really simple for me I have an HTML page I have a script page and since I'm using live server there's a wed so connection so when I save a file it automatically refreshes also you can see here I get this like waterfall that shows me exactly what's going on how long every single request takes and so on I get all the different headers response timings previews and so on which is really important to debug exactly what's happening for certain things now it can be hard to narrow down exactly what you need because large sites are going to be downloading hundreds and hundreds of different files which is why you can come in here and do only fetch request for example or only things that are documents maybe you only want to check things that are CSS JS fonts images so on media you know you can pretty much click around here to get exactly what you want to be narrowing down your search too also if I just do a refresh again on this you can search for certain things so if I go back to all and I search for script.js you can see essentially it's giving me only the things that match that script.js now unfortunately this isn't being super accurate right now with the actual things that are being showing up inside of this when I like for example search for script.js there's just a little bit of bugginess going on inside here I think it's because of how zoomed in I have my browser and other stuff that's going on but normally these different elements for index HTML and websocket those actually wouldn't show up now another really great thing about this tab that I absolutely love we just bring it back to essentially normal is we have the ability to disable and enable in caching I recommend having disable cache always checked when you're doing this that way you can really test everything at the most optimal state to make sure you don't have any caching problems giving you issues it's going to make sure it always fetches everything for you also you can throttle to make your page slower for example fast 3G if I were to refresh it's not going to take much longer to actually download all the different files that I need my page is relatively small I mean it's almost completely empty but still if you had a larger page you can see that this is going to drastically slow things down for those different testing purposes now the next tab I want to take a look at real quickly is the performance tab I'm not going to go super in-depth into everything inside of here but essentially the main thing is you just want to click this record button right here this is going to start profiling do whatever you want to do click some buttons whatever it is I'm just going to do a full refresh my page doesn't really matter and then you just click stop and what's going to happen is it's going to break down exactly how long every single step of your entire process took for every single thing that happened so this is a great way for you to be like okay what are the different things that are slowing me down for example scripting was by far the slowest thing in my application obviously in my particular application there's almost nothing going on so that's why there's pretty much no values showing up inside of here but if you had a more complicated application you can look at okay how long is certain things like the Dom content loaded event happening how long does it take for on load how long does each frame take to load like how long is every single function inside of my thing taking it gives you a bunch of different information I get like a call tree and show on it's really really useful for the most part though I don't mess with this page too much unless I have particular performance issues and I'm having a hard time figuring out exactly where they are this can give you some Clues to look into the right places now the next few tabs I want to talk about this application tab this one's really useful for figuring out what values you have in local storage for example maybe things inside a session storage and inside of your cookies it's a great way to kind of debug that information even the index DB you can look at all that stuff you can change things delete things for example I can add a new value inside of here if I wanted to it really doesn't matter it's really great to be able to just kind of go in and figure out okay what's happening inside of all this information the final thing I want to kind of talk about is this Lighthouse tab this is a really great tab for just being able to check different performance categories so I can like toggle on performance best practice SEO whatever I want to toggle click analyze page load and that's going to go through it's going to load up my page and a bunch of different things and it's going to tell me hey what were the slowest things to load what are things that are within acceptable parameters where are some accessibility things that I could fix and so on it's just going to give me a bunch of information on different things that I could fix inside of my site now it takes a little while to run and for my particular site we're pretty much going to get no useful information just because my site is completely blank and has nothing on it but if you have a larger site it's going to really help you with seeing what the different problems inside of your site are and this is a really great way so for example if you have like a lot of images that are taking a long time to load it's going to let you know about that and other things for example on my page you can see this page doesn't have anything on it it literally says right here there's nothing on your page so obviously there's nothing to actually talk about but if your page had more information it would give you a score between 0 and 100 telling you how good you were at these things and then it's going to give you a bunch of different warnings and errors down here for the the exact things that you're missing inside of it that you can fix and that is literally everything you need to know about debugging if you enjoyed this video I highly recommend checking out my JavaScript simplified course because I take complicated JavaScript Concepts like this and simplify them down into ways that are really easy to understand no matter what skill level you're at so if you want to really Master JavaScript and be able to build projects on your own I highly recommend checking out that course I'll link it down in the description for you with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 174,462

Keywords: webdevsimplified, debugging crash course, debugging, debugging guide, debugging in js, javascript, javascript debugging, debug programming, how to debug code, how to debug, how to debug in vscode

Id: l8pe_MSX4Lc

Length: 34min 55sec (2095 seconds)

Published: Tue Jun 04 2024