Debugging JavaScript Cool trics and tips

well hello people of the earth today I'm going to talk about something very important debugging your JavaScript smartly we are trying to figure out what really went wrong in our code something doesn't work and we are trying to attract some variable you know object we're trying to figure out what's going on how are they changing it could be asynchronous or sometimes we can't find our variable you know we all have gone through that and believe me I have spent endless hours trying to figure that out but we shouldn't do that I mean they're tools right now available in your browser especially chrome that are so cool that you can actually figure things out very quickly but a lot of people don't know that so today we're gonna talk about some of the common stuff and some of the tricks that people may may not know where you're doing that something hard way but there's an easier way to do that so let's let's talk about it and welcome to tech see tutorials so we're gonna look at some basic tricks and then we're gonna do some interesting ones that you may not know so but this basic ones are also very important on this end because often time we are not using the full potential of even a console on a lot of people do things hard way with console.log but before we start one of the first thing I want to mention is alerts do not use alerts blocking they're annoying and there is not much place for alerts in JavaScript anymore so avoid as much as possible I wouldn't I would say don't use it at all console lock console Mac is a king right we need to use console.log in a right way for example let's look at it let's say if I have some variable X equal to 1 okay now I want to console this most of the people will simply do console log X right now the problem with this is that what if you have multiple console log all over your code then since it's only printing the value you don't know which one is which right so the best thing to do is put some sort of a label and I usually put something like this something that you cannot find in your code and X the advantage of this would be let's look at it since we are here and we are inside the jsfiddle where there are tons of logs alright so what I'm gonna run this but as you can see there are tons of logs so which if you are using console.log your value might get lost inside right so if I run this yeah I would get a here but as soon as I do something here my bamboo gets lost so the best thing you can do is if you you you will have filters here so I can here I can simply type AAA and then my value will be filtered and I can always get my and all other annoying stuff more show up here now the cool thing about console.log is you can actually track multiple values so if i have y equal to 2 I can simply say X I can say Y I mean as many as arguments as you like and they would all show up here I can put another label here let just say Z Z Z then I can filter Z Z Z run this and I can see now - okay so here's another trick I'm sure you have seen this if you've seen my videos I use it all the time let's say if I have a function right I'm gonna call it F equal to some function and see if I add some prototype to it proto type dot I'd say I'm gonna call this function to add equal to a function I'm not gonna put the whole body but so if I cancel out this function and I'm just gonna say F equal to and if I print this in console it only shows me the function body not the I want to see the prototype because I've added a prototype property so instead of log if I use dir I cannot use multiple arguments I have to do this way so I'll just simply do this way and then I have more details I can see its prototype I can see this add method inside it right so this is quite useful ok so here's another trick let's say if I have some already call a and then I'm gonna say console.log a and I said if I add something more to it I can say push let's say I fired four to it right then I'm going to console.log this again now I have before and after which means if I print this before it should print three elements if I print after it should have four elements right so let's look at what happens so when I run this yeah I can see here but if I expand it because often this may be a huge object and I'm gonna expand someone I see more information there I would see all four elements here four elements here because there's a reference so a it updates because it updates it that the reference so that's why you see both and it can be really confusing I mean this is a smaller array so you can easily see in the top three and four this would obviously show the right value because this is almost like a output of the you know it's like a string version of it right but if I expand it it should show me the real object with indexes where it actually shows the same object before after so one trick is I usually do Jason string if I and not parse to both so because it creates a copy of it it should have it removes the reference to the original object now the first object has three elements the second object has four elements which is correct okay so this is a one other tricks that you need to know now when you print a giant array with with lots of objects right using console.log is not the right way to do it for example let's try to create a giant object and since I don't want to create it here I can just simply use or the services call Jason generator alright so by default it shows you bunch of you know elements and I can generate this create so I can copy it and then print is here now I want to log it if I use console.log it won't be very useful so let's run this Sinton has so many rows it's hard to really see so let's say if I want to see I Connor right I have to open every single one and look for the eye color here here's a blue here's blue you know which is quite annoying okay here's green so what if I want to see eye color and maybe age of the person okay so for that I can use console dot and the first argument is always the data that I'm passing and then I can pass in the an array with the field fields that I wanna filter out right so here I want to do age and maybe eye color and voila I have a table with indexes ages and eye color okay how cool this is right and if I want to look the entire I can still look at it here underneath okay so this is really cool because it shows you both in one it would also show you the console.log and also show you the table itself and this way you can isolate things and then analyze it alright so the next trick is oftentimes you want to you want to know if you run a function how long does it take to run or you want to put some timer where you can say okay I want to know from this line to this line how long does it take to to run so in a benchmark so I used to do I used to put timers and I used to create my own timer class and I used to do all kind of stuff right which is kind of redundant because Jansky provides already provides this functionality for you to do it it's much easier let's look at set timer and i can i can create a function i can say okay it's gonna take five thousand milliseconds to run this code okay and we already know that and now i wanna know when does it actually runs right so anything inside here would run after which is five seconds so what i can do in order to start I can say console.log time oh sorry console it sets a bad habit just right console.log every time it's a console time and then I would put a label I can say st for set timer and then I can say inside here I can say console and then I can use the same label because I can use multiple of these and it would it would only measure for this label right so it will start the timer here and then end it here and then it will give me how much time it has taken right all right so it says it took five thousand and three millisecond and it has some other stuff here too but you know that it is taking just a little bit more than five so it's already accurate right and again you can actually eight multiple of these right I can say and you know so as you can say something else ran for even less than a millisecond because it's outside the set timer so it should do it faster right okay so now let's look at a next trick now console.log is your friend but it's not gonna help you everywhere let's see if you want to stop at specific place and analyze things more or you know usually you you you would print some variables in console.log but often time you want to check the whole environment out you want to see how much what is the value of this variable while you you know when you stop so you can actually stop the execution because the console.log just prints the value and it just moves on to the next line it doesn't really stop so what you see is things that are afterwards right so there is a way to actually start the execution and then analyze it and move forward let's look at it so let's say if I have some variable a flat B and then I want to stop here somewhere right now I can console log A and B but instead I can do debugger put this here and run this it would actually stop the execution at that line and inside the source code I can see the values here right so I can put put breakpoints here now I can go and put the breakpoints at the code but this is much easier just put put the debugger inside the code and the jsfiddle is usually hard to find out whether your code is running because it's some summarize it it creates this environment and your code is running somewhere else right so it's very hard to find this way you don't have to look for it it automatically stops there at that line let's have you want to test something a website that is already running like let's say if I want to test something yahoo.com right and then they have tons of GS right and if I knew what J is for I'm looking for I can simply go here inside the source one way to do it is if I I can I can go and find my stuff here but often it's very difficult so I can just do command P and I can do some J's let's say B V J's I don't know so I can search for the J's file that I'm looking for once I find it it could be you know minified or something or it could be some really ugly code and then there's little frilly prettier so if I click on this this line here and it makes my code readable and then I can put some breaks here and then I can test I can debug my code here okay so this is pretty neat trick and there are tons of stuff here still that I haven't explained I might make another video you know there's performance tab memory tab network tab and each has its own little tricks that you can use so I might make another video and I'll feel free to share any interesting tricks that you know that I haven't covered here so I can share with other people and and also for myself since I'm teaching you if you if you know something you can you know you can teach me this and I hope you learned something from this video and if you did please like don't forget to like like subscribe and provide a nice comment and you can also translate this video for me to your native language so your countrymen can also learn it's pretty easy I'll provide instruction in the description and once you translate it send me a message so I can approve it and give you the credit in the next video and also you can help me on patreon I put a link here and thank you

Channel: techsith

Views: 44,859

Rating: 4.9052987 out of 5

Keywords: debugging javaScript, debugging JS, JavaScript Debugging, debug JavaScript, debugger, console.log, console.table, debugging tricks, chrome, firefox

Id: -bS6u_oQFtc

Length: 15min 12sec (912 seconds)

Published: Mon Dec 03 2018

Reddit Comments

[u/aiiqi]

Love this guy's vids. Always a lot of useful information. Cheers for sharing

[u/didiben]

I did not know about console.time. :)