Debugging JavaScript - Beginner to Advanced in One Video

hello everyone I'm Chris morrow this is my talk on debugging JavaScript from zero to Heisenberg so the purpose of this talk is for both beginner level JavaScript developers those that are very brand-new as well as the Heisenberg's the the advanced JavaScript developers maybe you've been doing it for a number of years so hopefully you'll have take home whether you're beginner or advanced again my name is Chris morrow I'm a senior UI developer I work at a company called Sol Tech I've been doing web development for over 15 years and just you know wanted to share what I've learned throughout the years some things that have gotten me in trouble some gotchas to avoid and just looking forward to sharing that with everyone I'm on Twitter there's my twitter handle if anybody wants to reach out if you have any follow-up questions I'd be glad to answer so as I said earlier this talk is for both beginners that's the Walter White's new to the game not necessarily well versed and debugging JavaScript driven knowing where to start and also the Heisenberg's out there those that have been doing JavaScript development for for many years so the plan today is to show you JavaScript best practices throughout some definite do's and don'ts I'm going to show breakpoints and again everything that I show you today is going to be Chrome debugging tools Chrome developer tools but you could definitely do that in Firefox Safari Internet Explorer if you wish though not recommended so again today I'm using Chrome but again this is most of everything I'm going to show you the UI is a little bit different on different debugging tools but you can do these same functions on any browser that's available so show breakpoints I'll show watches explain what those are using the console a number of different ways describe what a call stack is and how to use it how it can help you as well as I'll share some custom tools that one tool that I've created just as an example ways that you can debug your code and help just have a sanity check to check for memory leaks running your app you know more intensely changing some configurations to help you test your app faster as well as I'll share some pre debugging tools that will help you write better code so one of the common problems in JavaScript is there are too many cooks in the kitchen what I mean by that is their global variables declared in and the best practices to avoid global variables let me show you what I mean check out this line of code var now equals new date we've created this code this is this is your code or our code var now equals date we come down here later we load a library that has some nice date functions that we might need and if this date library JSL declares var now in any different way but if var now is declared within that library on the global scope it will overwrite our variable var now so the way to avoid that from happening your variables getting destroyed by some other code it could even be your own code that you've forgotten that you've declared var now on the root is you want to avoid those global variables by wrapping it in a function if you wrap your code in a function this is an anonymous function here also known as a closure function you wrap your variable var now in this function it's now protected any code outside of this function will not overwrite these local variables as they're called so that's a quick way to protect your code and just lock it down put it in a put in a function and now it's protected so why do people hate JavaScript why do I hate people why do people hate debugging JavaScript well here's a few ways a few reasons why variables are in global scope as we just saw many other languages if you do a if or a conditional statement it will protect the variables but in JavaScript as I just showed you the only way to protect a variable and to give it its own scope is to put it inside of a function alright another problem that many people have with JavaScript is it doesn't require strong typing and let me show you what that means in most other languages when you declare a variable you would say for my string and you would actually have to type that variable usually with a colon and then you would actually declare the type after the variable name or the object name and then you would say equals this is a string but in JavaScript you don't have to do that so this parameter this typing does not exist it when you declare a variable or an object so many people have a problem with that because you can actually save our my string equals 10 and now it actually is typed as a number but you haven't specifically declared that it's type number so that is that it the fact that it doesn't require strong typing cross-browser compatibility Internet Explorer a lot of issues there many other browsers that we have to support so other languages you know they just work they compile down and they work on on anything especially server-side code but cross-browser issues we have to deal with with JavaScript as well as cross device also there's no per se built-in classes you can't say this is you know new class although you do you can create classes in JavaScript just different methods of doing it performing it so Z buggin got you stressed maybe it does we're going to hopefully solve that problem in just a moment by showing you some ways to to debug more easily so let's discuss breakpoints breakpoints are the quickest easy way to navigate your code and we're going to discuss many different ways of navigating your code but there are standard breakpoints and there are also conditional breakpoints let's go ahead and start by looking at standard breakpoints first so before I get into breakpoints I want to show you one thing to bring up your tools at least in in Chrome the easiest way to do that is to go to the top right in this menu here and scroll all the way down to more tools and then choose developer tools and you see there's a shortcut I always use the shortcut but I wanted to show you the the menu how to get to it through the menu first alright I want to click that it now brings up my console potentially your console may start off on the elements tab as is highlighted here and notice it also shows you what styles might be on an element that you have selected as I choose different elements here within the elements tab it'll show me styles on the right but for debugging and setting our breakpoints we need to navigate to the sources tab now that I'm in the sources tab I can find the JavaScript file that I want to debug that is going to be in my Jas folder and I have one break point CAS here that we can run through so looking at my code and for now I'm not going to we're going to talk about these panels a little bit later but for now I'm going to get those out of the way and I can get rid of that by clicking this arrow it will close that debugging panel alright so I have some closure as we've showed before a function that we execute and it will run through my code top to bottom as JavaScript does and it'll step into here it will declare this variable my number equals 181 it will go through all of the functions but on functions they won't actually get executed until they're called so it'll call VAR my array then the code will come all the way down skip all of these functions so it'll come down and hit this first function and then we'll jump back up to here and we'll actually hit this line my first function and jump in here and execute the code so to see that just to confirm that that's the way our code is working just want to make sure that things are running an order I'm going to set a breakpoint on var my array I've already set one in first function and then I'm going to go down here at the very bottom this line 31 and it is going to hit this right before it makes that first function call and again as you've already seen to create a breakpoint all you need to do is click the left side of the gutter where the line numbers are now that I've set these breakpoints I can read come up here and reload my page and notice that it did execute from the top it stopped in my array myarray is undefined until it passes that line of code if I hit the continue button that's this right now in the blue since we're running our code if I hit the play button it will just continue to execute our code until it hits the next breakpoint notice now it jumped all the way down to first function here and now as we've said before up a Buster breakpoint sometimes the debugger does we go but in general it works pretty seamlessly now I've recreated that breakpoint here in the first function so it hasn't yet called first function it's going to call it and then it should jump into this breakpoint on line 12 and it did so as I hit play and continue to execute the code and I went to this next breakpoint if I hit play again I don't have any more breakpoints it should just run through my code which it did and now we're out of it now notice on the right on this panel now that we have breakpoints it automatically opened the debugging panel and lists each breakpoint that I have it's a quick way to see what breakpoints you have you can add you can remove the breakpoints here you can also just deactivate them if I uncheck breakpoint on line eight it will not hit that breakpoint now you can see that the breakpoint is deactivated with this like low opacity kind of see-through and now I've activated again so it's one way to quickly deactivate breakpoints so what I want to do is I want to show you now a the other breakpoint which is a conditional breakpoint I'll go back to our code here so I want to get rid of all the breakpoints I don't want to just deactivate them I want to get rid of all of them a quick way to do that in chrome dev tools is to right-click within the breakpoints panel you can see I can remove one breakpoint I'll remove all I can also just deactivate all or disable all but I'm going to remove all so now I have no breakpoints in my lines no arrows to the left so now I'm going to set a conditional breakpoint and how to do that is you just set a regular breakpoint first and then if I right-click that existing breakpoint I choose edit breakpoint now that I'm editing that breakpoint it actually gives me an actual field that I can fill in and and as it says there it will stop only if this expression is true so if I'm in my code say have a variable and I'll make sure hey if it's not if it's undefined or if my array doesn't have any any values like Hank Jesse or Walter then I want it to break here in this case I want to say hey my number should equal zero although my number should equal 181 as we see before and so I want it to stop there only if it equals only if it equals 181 so my number equals 181 and then I just hit return or enter notice now the breakpoint is orange and that lets you know that it's a conditional breakpoint if i refresh my page notice it stops can hover over it now if I right-click I'm going to edit this breakpoint just to show you here we stopped but let's say 182 a close enough it should stop right no wrong if it's a if it's not true it's not going to stop so now I'm changing my number equals 182 it stops I'm going to run through my code first once i refresh the page up it didn't stop refresh the page again as I showed you does not stop if I change it back edit the breakpoint back to 181 hit return refresh the page it stops so again that's a quick way to evaluate if an expression is true I want you to break only in that condition that's a conditional breakpoint okay now I'm going to go a little bit deeper into navigating the code in the breakpoints example I showed you how to continue through your code by just hitting the play button which is like a play/pause of your code and it just continues through your code until it encounters a breakpoint there's also the step over looks like this icon over the little dot there jumping over something and that steps through each line of code just line by line one by one goes to the very next line of executable code step into is just like step over you know I'll show this in just a moment except if it encounters a function call it will jump into that function that's being called and then last is step out if you're inside of a function inside some other scope if you want to jump out of that function go back to your parent level of code that's getting executed then you click step out and you'll just skip through the rest of that function code being executed all right so I'm going to go back through step over step into and step out let's go back to the breakpoint sample all right and we know that we're going to call first function here at the bottom I'm going to set one breakpoint just so we can stop our code and then as I step through it actually let's go ahead and set the breakpoint at the very beginning then we can just see line by line what happens with the code so I stopped at my number it hasn't been declared it's undefined I'm going to use the step over and notice that it jumps to the very next line of executable code the next thing that's declared a variable in this case total function is called and then if I step over again it goes to the very next line of executable code step over again functions aren't called and they are not executed unless they're called so I went to the very next level of executed code from var my array this is commented out here we learn about console.log later and then it goes the first function call as I step over again notice that it didn't hit any of these functions the first function the second function third fourth it didn't hit any of those functions because I stepped over every call I'm just I'm just in this scope I'm skipping through all the lines of code and then I finish and now my codes run completed now let's do that same vein using step into I'm going to refresh the page at the same breakpoint so step into much like step over it'll continue go line by line but when it hits it for a function call in this case first function and I click step into it's actually going to go into that function now we're inside first function as I continue to click step in to go to the next line of code as an encounter second function call it jumps into that function call so step into is much like step over if you really want to traverse all of your code you want to use step into and that will just continue to take you down the chain how many ever function calls you may make jump in the third function and then the fourth function executes and then we jump out of each of those functions and then at the very end much like before and we're done all right so that is step into step out I'm going to go by through and use the same method step into when I step into the first function notice I'm going to click step out in this case step out and it jumped out of that second that first function call went ahead and went back to the parent scope in that function and then it went to the very end there and then the code is run so a quick way to step into functions and then step out all right another best practices first don't use meth it's very bad for you don't do it it's it's just not not a very good thing at all don't even try it same thing equally bad and speaking of equals do not use the double equals or the exclamation point equals which is inequality both of these evaluate equality or inequality but they do not check type so JavaScript does have typing and inference and it can figure out what type object you have but you have to use the triple equals and the exclamation point double equals for the inequality so just plain pain when you're evaluating equality always use the triple equals it's another it's another equals I know it's that much work but that's one of the idiosyncrasies of JavaScript just to never use the double equals only use the triple equals for equality and the explanation double equals for inequality and one of those that practice is documented in this book javascript the good parts by Douglas Crockford if you haven't seen any of his videos online or any of his content definitely check it out this book is a great starter just showing all the things that are good and bad about JavaScript and he focuses on the things to definitely use and things not to use that will get you into trouble so definitely pick up this book if you don't already have it I make no Commission I'm not giving you any links it's just great content so go ahead and grab that alright now let's talk about watches so you can add to watch multiple ways first is selecting and right clicking in the sources panel let me show you what I mean alright so I'll open the watch's JavaScript and notice here on the right panel there is a watch expressions panel I'm going to expand that so a watch is basically anything that you want to watch to you know read that's like the teachers answer the student that does another right answer but you are really just observing any expression that you want in this case I'm going to observe an actual variable that is in this in this code it's my array so as I said before you can select a variable or an expression and then right click and then go up to the very top of the menu and choose add to watch notice now I have the watch expression but it says it's not available the reason as this code is already run and I'm not inside of this function currently but if I go ahead and set a breakpoint and rerun that code I'm now in this function it notices that there is my array but it's undefined this line of code head has not been run yet so just for ease of use to see what's going on I'm going to make a breakpoint inside first function and go ahead and run my code now that I'm in first function we've already hit this line of code my array has been declared so you can see I can expand this and actually see the list of items in the array Hank Jessie Walter Hank Jesse Walter as I continue to run my code and I'm going to use the step into that we used earlier which will go through each function and line by line I'll jump to this next line of code my array dot push I'm going to add Walter White jr. to the array and I might continue to step into which will just go to the next line of code and then now Walter White jr. has been added to the array as I continue to run through my code again stepping to the second function Skyler's about to be added to the JavaScript as I jump again you'll see that now she's been updated and added to the array alright so I think you get the point there I'm not going to show any more on on that that is at a watch expression and you're just evaluating any expression that you want for example I have my array that's something that was kind of in my sources panel something obvious but what if I want to evaluate what what is the length of my array well that's another way to add a watch and I'm going to show you that with clicking the plus on the watch expressions and then I'm also just for time sake going to go ahead and also to show you you can right-click inside the watch expressions panel to do it as well to add a watch so first the plus pretty easy click the plus sign again let me show you that let me expand the watch expressions you're going to click the plus it gives me a field much like the conditional breakpoint gives you I'm going to type my array it actually has intellisense that's all so I'm going to just hit tab there that will give me to the end of that code so my array and I actually want to get the length and you can see it actually has intellisense on a lot of variables that might be added might be available for that object in this case it's an array I'll hit tab now that I'm at the end of my code just like the conditional breakpoint I hit return and that will add that expression so now you see I can actually add any expression that I want to evaluate into watch expressions all right so my radar length equals 5 and then as I said you can right-click anywhere in the watch expressions to add a watch expression or to delete all watch expressions as well in this case I can add one more watch expression kind of running out of ideas here let's see just playing around with our array again let's say I want to know which item is the very first item in that array and we an array 0 is the very first item that 0 index for a raise so if I hit return so the very first item in the array is Hank as you can see here it was the first added all right so that's watch expressions I'm done with those so I can right click and delete all watch expressions now I have nothing no watches all right let's go back to our presentation deck scope variables kind of like watches but they're only shown in the current scope let me go ahead and show you an example of that so I'm going to keep all of my breakpoints that I have here on the on the side and here you see scope variables we're going to actually refresh this page rerun the code and notice that we have these different variables now that I'm inside the function it actually recognizes my array here and it recognizes that there are functions inside of this scope so we're inside of this function it just pulls every local variable or function any object in that scope second function as well all of that so as I go through my code notice that when I jump into first function the scope is changed so now all I see is current person and and I see this which is basically you know just a reference to the functions within notice that if I that there is a closure option within the scope variables and that will actually go up and show you parent level objects parent level variables as well so it shows you my array second function on third function alright so that's pretty much the gist of scope variables it's just handy to kind of see what's going on what things are being declared alright now a quick message from our sponsor if you ever get any kind of trouble with JavaScript debugging then just call Saul he'll help you get out of it and you know we can move on from there all right let's talk about using the console first there's console dot log and console dot clear I've actually surprised many people have never heard of console but clear are not used it as much but they go hand-in-hand and let me show you what those two do so here at my code the console this console dot J's file you'll see that right here I have a consult out log and I've just put a string in there so what that does is it just logs out whatever whatever object whatever expression I make in this case this is just a basic string so if I go from sources over to my console tab here and I rerun that code you notice it hits that first log code starts and this is a common practice many people have done do this where you log each major function of code every little function of every little block of code that you want to print out and make sure that things are still working maybe you want to print out an actual variable at a certain point in your code and that's that's very common so that's console that log very very simple now let me go to the code and you'll see here's my console dialog code starts I jump into the first function console that log first function called and then the second function called and so on and you notice here my code I'm actually jumping from first function the third function so another need for second function I'll just delete that code out all right so I should say we logged the first function and the third function and and then we get into our fourth function well we don't want to see any previous logs we only want to see what happened on the fourth function so the quick way to do that is just as I've commented out here just for time is consult clear there's no parameter you just call this clear method and it'll just clear any logs that were that we're logged prior to that consult out clear let me show you and just to make this even more clear on the console dot clear let's see I'm going to refresh the page I want to put a breakpoint right before the console dot clear so you can see this already hit the console dot clear I'm paused it's a good now I can jump over here to this console and you can see the log code starts first function third function called but it's hard to jump back and forth when I'm in the sources panel so oh there's actually a quick way to pull up the the bottom console and that is called the drawer and you can click this this button right here to show the drawer you can also just hit the Escape key notice when I click on anything just the Escape key and it will bring it up if I show that drawer and look at the console then now can see the console log at the same time as my sources so I'm gonna bring this down just a little bit still paused here on the console type clear noticed I'm going to put a breakpoint actually I don't need a breakpoint remember we can just step over so I'm going to step over the next line of code the console was cleared and now it shows that very next console log fourth function called so again you can see how if you have 20 50 logs it gets ridiculous and then something happens and you really want to see just that last bit of code or that last log then you can use console dot clear alright alright now let's talk about the next option and that is console dot assert notice that console dot assert takes an expression similar to a conditional breakpoint so you can evaluate any expression and then the second parameter is any object that could be a string that you want to print out like this is an error or you could say I'm expecting this value and you could you know get a value from an object to print that out let me show you what this means or how to use this so I need to jump to my code real quick so so in example earlier we had my array we had three items in the array see Hank Jesse and Walter now what we want to do is we want to make an assertion and a good way to remember it is you're making an assumption that of that you're going to have a certain value so I'm going to assume let's see I'm going to do a console that assert and I'm going to assume that my array should always be greater than or equal to one in other words it should at least have one name in it one item in the array and if this if this condition is not met if it's not greater than or equal to one or in other words if that expression is false then there will be an error thrown so I'm going to say my array length was not greater than one so that's the log message that I'll print out with that error now I'm going to run this code and you'll see that only if this is false if my array is not greater than or equal than one in length oh and I have a rare problem there if my array dot length is not greater than or equal to one let's just break our code on purpose here my array equals and we'll do an empty array which as we said we should have at least one item now our array has no items so this is going to become false and we're going to see this assertion this error thrown and you can see there now we have errors just like any other normal errors that might be shown and here in my log down here you can see assertion failed my array length was not greater than 1 that's what I print it out now more useful than that is this can be any object as is we saw we can say my array length was not great than one it was and then we can actually add to the string just using the plus operator and then actually Prout what the length was my array dot length where you run the code and you can see certian filled my array length was not greater than one it was zero so again a good little handy tool raise your own custom errors to catch some of those things early on alright consult up table this is a very handy tool for many different veins but the simplest quickest way and you can see other options is if you're looking at JSON data that you're loading on your page it's a quick way to see that data in a different way let me show you kind of the differences so on this page you see that I'm loading these names here in this case the v named Valerie Shalini is highlighted let me go to the code to show you how how this is being loaded scroll down here we go we have a JSON call just getting a Loken a local JSON file and in the debug tools you can view JSON data it's just harder - harder see but you can see I'm just loading this JSON data and then appending it to a list container again not critical information but just showing you how I'm actually appending all those list styles but if you want to see the JSON data that gets loaded you can actually go to the network panel click on xhr and then click on that JSON data so you see normally will have Heather's preview response response is actually all of that data that gets loaded you see this is very very heavy lots of nested objects lots of complicated stuff and maybe I only want a couple of fields out of this like maybe I want just the the name or the email a few of these examples and I don't necessarily want to see every bit of data well that's the quick way to do that is when I go to my console update my code and you see here we have a consult out table and all I'm doing is you see that data represents that JSON data that was passed in so this data once it's returned I come down here I just passed that data in and then I ask it I give it an array of whatever parameters that I want to log name gender and email again there's a number of different ways that you can manipulate the data but this is defining what the column names will be for that table so now as I save this file go back to my code here we go so it prints out and the console is now a table it really gives us indexes for free of each item and then you see the column names name gender and email and you saw there that you can actually sort it it's actually a sortable table so you get sort ability for free so again a quick way to see your data nice handy tool console that table see all right multi-line commands in the console in the console you can actually do editing you can do a number of edits like say my VAR a equals one and then hit return and it's undefined there's nothing that we're being returned but now if I hit a and hit enter it will actually print out the value of that variable so you X we are defining running JavaScript code in the console so just like that I can do VAR B or B equals a so now VAR b is going to equation ow it should equal 1 here i've run that code i will print out B what B equals returned and there it is 1 as well well now I want to do that gets kind of tedious one line after another maybe I already know I want to run a couple of 2 or 3 lines of code I don't want to do that so the quick way to do that is I'm going to do bar C equals a plus B and we know 1 plus 1 that's 2 but if I hold down shift and and then hit return holding down the shift-key hit return it starts a new line without actually running that code so C equals a plus B that's 2 and now I'm going to actually add to that I have C declared so now I can just add to it C equals C times 2 and now we run that code and you can see it actually added VAR c equals a which is 1 plus 1 for B is 2 and then C equals C was 2 before times 2 and now it's 4 so again multi-line commands pretty awesome a pretty nice quick way to two decent tests or run some code snippets very handy didn't know about snippets for a while I hate the number of years that I continue to have to Google everything and if I'd have known about snippets in the console would have saved me some time but now I know I'm sharing with you so to get to snippets you go to the sources panel and if I bring this out let's see normally have sources there's content scripts not going to talk about that in this discussion but there's actually a snippets tab and you see that I have some existing snippets and if I click on one you can see console dialog Breaking Bad now to see some of these in the log then I'm going to actually most of these I've done console dialogues now it could be any JavaScript that you want to run it doesn't have to be just a console command but in the examples I have that so I'm going to bring up the drawer which and we can bring up this way or again hitting escape and then after I have that snippet up if I right click it and click run you say that it's log Breaking Bad just ran this command close that snippet an example of a styled console log yes you can actually use CSS styles to come to style your console logs the perfect example for me sometimes I forget this but again its percentage see if you had percentage C in front of any any string anything that you want to log it will give you a style anything from that C on will get that style you can see I'm doing color white much like CSS at the text color will be white the background will be red if I run this log and see now error white text red background great way to really stand out some logs that are better errors or major problems in your code and again a lot of the common ones that I forget is how do I get what jQuery version I'm running I'm going to clear the log here but if you want to get what jQuery version you know there's the code right here and I can actually run that command as well so it's a very great way to run some code that you may not remember offhand or you know you don't want to dedicate your your memory to those things just to save a snippet and you can rerun it at any time and this is saved in your and Chrome and the browser it stays there forever until you delete it so you won't lose these snippets after you close Chrome all right that's snippets live editing a number of different ways that you can live edit and using the console so first I'll show you the elements so as you're in the console you can actually manipulate the Dom the document object model by just a number of different ways I can select an item you can see that I can change the highlight color let's say well I want to really want to see what the highlight looks like in yellow there you go oh but that highlight doesn't look good let me see if I have a yellow then I guess the color should be black and you can change these these things and then oh maybe I want the highlight color I want the font and you can it gives you some type of heads you can actually arrow down pick the one you want I'm now going to hit tab you hit tab and it will take you to the the attribute or the value for the attribute I'm going to type bold so anyway you can manipulate the Dom that way you can also not only style things dynamically you can also actually drag an item in the Dom and move it around I'm dragging this Li to the top you can see now I've just moved the order and change the Dom so again it's pretty cool how you can manipulate the Dom this magnifying will actually allow you to select an element and inspect it and it will highlight those items if I actually click on the item now then it will jump to it in the in the elements panel and then I could play with it and style it that way so that's one quick way for doing live editing but on top of that in JavaScript world we may want to do some live edits to our JavaScript I want to go to the JavaScript file console jes and I'm going to go into the code set up a break point my new var equals five you can see here I can set up a watch expression for my new var I'm going to add it to the watch my a var is undefined I'm going to go to run to the next page all right so my Navarre is 5 now I'm going to bring up the console console drawer and now that I'm in that line of code I can do this a number of different ways but even in the console I can change that value my new var equals 10 run that code and now it prints out 10 so as I continue on as I run the execute very next line of code you can see that my new var changed to 10 other things you can do is not only the live edits and actually coding in the console I can actually manipulate this code I can actually edit it on the fly and say well I don't want to consult a surgeon here anymore I know that's just debug code and I want it to go away now so I can actually select that line and delete it actually deleted that line of code I'm going to delete that my array and notice here at the top I have an asterisk much like many other IDs the asterisk says that it's been changed so I can save that file I can right-click anywhere in the J's file and then to save or save as if I want to save it as some other hotfix file or some other but I'm going to just rewrite over my local file so that local file if I hit save well then it'll ask me to where to save it I'm going to go to where my files are and the presentation's debugging in my app folder and then like j/s folder and you see I have consoled dodged ass here I click Save I'm going to replace the existing and notice now that the color has changed to a light brown indicating that this file has now been changed from the original that was loaded on the page if I run through this code and refresh notice now I do not have that consult out assert I don't have the myarray running everything is now saved and and running a new file so it's got a good quick way to edit your existing file all right another best practice do not let a PHY your code on development because you always would like to see meaningful code just like jQuery minified or other libraries you don't want to see function abz you'd actually like to see that it's a meaningful descriptive function so that's understandable what's going on with your code as you debug it so don't minify your code alright one last thing to discuss is the call stack and to think of the call stack it is bottoms up so something that's executed first is going to be on the bottom of the stack and let me just show you that let me skip to our call stack file alright we have it loaded here now again our same sample code first function second function third function fourth function so a quick thing to know is the call stack is each function call call sax only they don't show you every variable that's that's in scope like scope variables they will only show you what functions have been called so if I set a breakpoint on the first function and as we did before we did all these console logs and make sure our codes working well we know we just want to know does it get to the very end so I'm going to step into the fourth function and set a breakpoint as I run my code you'll see I hit the first function I've hit anonymous function and that's really just the intro into this function call and as I hit play notice that it went through the first function call the second function and as and if I want to actually see where that code was executed I can click an item on the call stack I click first function it takes me right to that call click on second function it take me to that call the call that was made from that function you see so it's making a third function call and then third function what call was made there is now calling fourth function and then now fourth function inside there so again it's a great way to see the quick function calls the the major stack calls throughout your code alright another thing is you know we can all admit to it no matter how long we've been coding sometimes we just we write crappy code and we have written crappy code and but there's a way to avoid that we need to clean up our code you know I've had some bad practices in the past and some tools are out there to help fix that so let's talk about debugging tools all right let me talk about rolling your own debugging tools the basic principle was to create something really quickly doesn't cost you many how much time to create but it gives you a lot of custom login as well as running your app in a different mode that will give you a sanity check on memory leaks and other things let me show you a quick example here's a quick price game price well game I click through it it has all of the screens that the app would have as I step through it I'm going to spin the game once this will run in the default mode and I know that I'm not gonna win the first time now that's pretty close this game is actually rigged so I know that on a second time I'm actually going to win so I've change the code to do that on the very second spin I will win the grand prize just barely I win an iPad Mini so good for me I play it again now that prize will never be won again there in this time period so again look close but no grand prize now I want to show you how I can change that and add some custom debug tools so here's the file there's a config file config object here I have debug mode equals false and change that debug mode the true I can also change the spin duration of the prize wheel six seconds looks natural to the audio but I'm going to change it to 100 milliseconds it's a very quick spin the and then also in this debug mode it's going to change a number of things it's going to change the prize wheel and actually have a different image that has the prize ball numbers and let me go ahead just show you make more sense so as i refresh the page it's loaded in debug mode now I've also added numbers to the prize wheel and and then also there's a console log div so it kind of rolled my own console log and this is handy for a client handoff for some everyone you just don't want to be on the debug tools you have a quick visual on the apps running without anything getting in the way and I just put this in an area that didn't matter as far as then we could see the prize wheel so if I click spin it's going to log that I did not win this time but now that I've refreshed a page even though I'm in debug mode you notice that the very next one and I did a custom style on the grand prize so it stands out that I won the grand prize the second time when I Nabal Auto spin and now I just want to let this run for an hours I want to make sure that there's no breaking of code and the apps not gonna you know just bail out on me on memory and it's just going to continue to run run run run so again a quick way to debug this app make sure that there aren't any problems so just kind of created my own little console log and you guys can do the same thing I may do a separate tutorial on how I did this but it's really just a div block with you know an overflow set on it but if that's not cleared to you then I'll definitely look at maybe doing a more full featured video on that alright disable auto span it's going to stop we're done anyway so you can go back to this log all that's wonderful stuff again roll your own debug tool but there are other debugging tools are pre debugging tools I call them and a side note is these will want you to use strict and your JavaScript I'll show you that in just a moment so the tools are J's hunt and J's lamp they'll actually verify your code and let you know of any inherent problems that could cause errors in your in your JavaScript jsn is more lenient than jslint JSONP in the original more strict mode jsn is supported by a number of different apps including sublime text and i'm going to go in there and show you so in sublime text I'm going to open a different file here let's get out of samples and let's slowed up call stack so notice I have you strict statement here what that does is it it makes the browser use strict mode so that it doesn't allow sloppy JavaScript code things that can break things they can break your code or bad practices one example of this is not declaring a variable just setting a equals one without using the var before it so if I save this I want to go to the call stack let's go back to my browser look at the console refresh and you see that actually I'm getting the error now uncaught reference error a is not defined if I go back to my code and I do not use strict inside this function I have a equals one i refresh the page it didn't print out an error at all it actually allowed it so by using strict mode it will actually catch a number of things for you in and of itself but before the before having to go to the browser we even in my code editor you can load tools and sublime text many other editors have have these plug-ins for it but I can load J's hint and sublime text and if I lent my code it'll actually show me that error a is not defined right here same as the browser if I do var before it and I can right click and use jsn as well lent the code and again most of time I use this shortcut and left the code no errors nothing pops up and I didn't have to save my file I'll save my file I'm using strict now browser works so the quick premise is you strict on your JavaScript to help you catch errors even in the browser it'll catch errors for you that you may not if you don't have jsn but the other thing is to definitely go ahead and get J's hat it's a great tool to help catch a number of bad practices alright and then if you're not happy with jsn it's sometimes very strict on on some of the errors it spits backs things that you go I know my codes good I don't want to hear all these errors well you can just customize it with an actual config file I'm not going to go into details here I can do a full-featured J's Hansa torille later but you can configure it to not give you certain errors all right the screen that you just got a sneak peek of is the resources and if you have any questions then definitely hit me up on Twitter there's the chrome dev tools here in this link a number of great resources there tips and tricks jQuery Learning Center is an awesome place to learn all things JavaScript not on this list is mozilla if you go to mdn the Mozilla developer Network another great resource here's a link to Crockford site javascript to good parts and you could pick up that book again a great gate great read and then design patterns in javascript some object-oriented different ways to create your stuff to just go to addy Osmani website has a lot of great information and then you can find my slides here that's pretty much it I'll try to do more tutorials maybe not as long I know this is a lot of information if you're still here then I appreciate you sticking around and look forward to sharing more with you so that's all folks the slides are there and I appreciate you staying tuned until next time you

Channel: youwebdev

Views: 196,869

Rating: 4.9361782 out of 5

Keywords: debugging, javascript, web development, chrome

Id: -q1z8BPFItw

Length: 61min 5sec (3665 seconds)

Published: Mon Nov 24 2014