Debug School 2: Reading Error Messages 1

This is part 2 of the Debug School video series. This episode explains the importance of reading error messages, even when you don't want to do it, and gives you a system for dealing with them when you encounter them.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : hello welcome to debug school this time
00:03 : reading error messages part 1 this
00:08 : lesson is all about errors because
00:10 : they're that important
00:12 : my advice is simply this when you get an
00:15 : unexpected error you should read them
00:18 : now sure this advice sounds obvious
00:21 : right but surprisingly I have seen many
00:25 : instances where developers would avoid
00:27 : doing this very thing they may look away
00:30 : from the error and try something random
00:32 : just hoping that the error would go away
00:34 : which is basically like sticking your
00:37 : fingers in your ears and singing lalala
00:40 : lalala I can't hear you and needless to
00:43 : say this is not a very effective
00:46 : debugging technique but I can empathize
00:49 : with this because I too at times have
00:52 : avoided reading errors I mean computer
00:55 : errors can be pretty cryptic right if
00:57 : you come into programming from a user's
01:00 : perspective most of the errors you
01:03 : encounter are so impenetrable that you
01:05 : are conditioned to think that computer
01:07 : errors are things you simply can do
01:09 : nothing about but this is a mentality
01:13 : that can be changed when you're
01:15 : responsible for the program that
01:17 : generated the error then you have the
01:20 : power to fix it and once you start
01:23 : getting the hang of reading errors and
01:25 : interpreting what they mean it's going
01:27 : to seem crazy to ignore errors anymore
01:30 : even if you don't understand what it's
01:31 : saying at first glance that would be as
01:34 : if you're a detective at the scene of a
01:36 : crime and you found a note in the hand
01:38 : of the dead man and when you open it up
01:41 : you find that it was written in Chinese
01:43 : a language that you don't happen to
01:45 : understand and because of that you
01:48 : decide to toss the note too bad I can't
01:51 : use that you say now what kind of
01:54 : self-respecting detective would do
01:56 : something like that but in case you're
01:59 : still not convinced here is why it's a
02:01 : good idea to read errors most of the
02:04 : time it leads you towards where the
02:05 : problem is and many times directly to
02:08 : the exact line of code where the mistake
02:11 : lies but even
02:13 : in situations where it doesn't help you
02:15 : do that and you needed to gather further
02:17 : evidence in order to solve the problem
02:19 : still going back and understanding what
02:22 : the error meant in the context of the
02:24 : problem is going to help you debug
02:26 : similar situations in the future with
02:30 : that said I'm going to show you a
02:31 : variety of errors and deconstruct how to
02:34 : read them and what they mean here I have
02:36 : a Java Script exercise from Exorcism dot
02:39 : IO called pop and Bob is a lackadaisical
02:43 : teenager who gives very limited
02:45 : responses this exercise provides a test
02:49 : suite that I can write my code against
02:51 : when i refresh the browser the test run
02:54 : currently I have all 17 tests passing
02:57 : which means that I've implemented the
02:59 : code correctly to the specification now
03:02 : I'm going to introduce some mistakes
03:04 : just to see what errors they will
03:06 : produce what would happen if I
03:09 : misspelled this input variable why I get
03:13 : an error the first thing to do when you
03:16 : get an error is to read it out loud so
03:19 : let's do this together
03:20 : are you ready reference error impt is
03:24 : not defined the second thing to do is to
03:29 : look up the error location in your text
03:31 : editor now look at this big
03:33 : intimidating-looking blob of text here
03:35 : that is called the stack trace for the
03:38 : time being we're only going to focus on
03:41 : the first line of the stack trace which
03:43 : is what gives us the location of the
03:45 : error I have Bob J as line four column
03:49 : 11 I will bring that up in my editor
03:52 : here and that's exactly where I made the
03:56 : mistake so in this case simply following
04:00 : the error message directs me to the
04:02 : exact location of the mistake isn't that
04:05 : awesome
04:06 : so when you encounter an error do not
04:10 : panic instead read the error message out
04:13 : loud
04:14 : next pull up the location of the error
04:16 : in your code editor to get more context
04:19 : and if you simply do these two things
04:22 : every time you encounter an error you
04:24 : are already doing much better than those
04:27 : about hers who are too afraid to look
04:30 : okay let's try something else
04:32 : first I'll revert that mistake and let
04:35 : the testicle green again now what
04:38 : happens if I misspell input over here
04:41 : this time let's see and this time I get
04:45 : reference error input is not defined now
04:49 : looking up the error location that is
04:52 : lying for a column 11 exact same as last
04:55 : time but this time we don't have a
04:58 : misspelling here and this is because
05:01 : it's trying to use the variable input
05:03 : which doesn't exist now because we've
05:05 : misspelled its original definition on
05:08 : line 3 so in fact in Pooh is defined but
05:13 : input isn't sometimes following the
05:16 : arrow location will not get you to the
05:18 : exact line of the mistake but it can
05:21 : still get you pretty close so let's try
05:24 : another one this time let's try
05:27 : misspelling var and the error is
05:30 : reference error Bob is not defined and
05:33 : that is on Bob test that SPECT is line 2
05:38 : column 17 so at the location of the
05:42 : error Bob is being instantiated with the
05:44 : new keyword the error tells us that
05:48 : there's a problem because Bob was not
05:50 : defined now I know that I've misspelled
05:53 : var so that must contribute to why Bob
05:56 : is not being defined correctly but
05:59 : shouldn't there be an error message
06:01 : telling me that I hadn't defined Bob
06:04 : correctly in the first place why yes
06:06 : there is actually a second hidden error
06:09 : that you can only see when you open up
06:11 : the console so let me do that right now
06:14 : so from the view menu I'm going to open
06:17 : up developer JavaScript console there so
06:22 : that's the console and there is the
06:24 : error in red which says syntax error
06:27 : unexpected identifier and this error has
06:31 : the location Bob that is line 1 if I
06:34 : pulled it up that is exactly where I
06:36 : made a mistake so for this case as long
06:40 : as I
06:41 : to look for the hidden error in the
06:42 : console I was able to pinpoint the
06:45 : mistake
06:46 : but still that's pretty confusing first
06:49 : of all there were two errors not one but
06:52 : moreover one of those errors was way
06:55 : more helpful than the other but that was
06:58 : the hidden one what Wow no wonder people
07:02 : are afraid of errors I'm going to go
07:05 : into more detail as to what happened and
07:08 : to do that I'm going to describe just a
07:10 : little bit about how browsers work when
07:13 : a browser processes the web page it
07:15 : works its way from the top to the bottom
07:18 : for JavaScript files that are included
07:21 : using script tags it's going to evaluate
07:23 : its script in turn sequentially and if
07:28 : there's an error when evaluating any
07:31 : particular file it's going to
07:33 : acknowledge that error by printing it
07:35 : out in the console and then move on to
07:37 : the next group now it might be more
07:40 : logical to stop processing any scripts
07:42 : when the first error is encountered
07:45 : right
07:45 : but alas that's not how browsers work
07:47 : and this is why there can potentially be
07:51 : multiple errors when you get more than
07:54 : one error that just means you have
07:56 : multiple pieces of evidence to process
07:59 : and you want to find all the errors
08:01 : because otherwise you might be missing
08:03 : out on valuable information now in order
08:06 : to do that you want to know where to
08:08 : look for browser based JavaScript you
08:11 : want to make sure that you look in the
08:12 : developer console for other development
08:15 : environments it might mean looking at
08:17 : the output of a terminal program or a
08:19 : log file a lot of times the errors are
08:24 : related
08:24 : the primary error is the error that
08:27 : happened the closest to what went wrong
08:29 : while secondary errors are a side
08:31 : effects of that primary error and in our
08:34 : instance the syntax error was the
08:37 : primary error which caused Bob to not be
08:40 : defined correctly and that led to the
08:43 : second error when Bob was used in the
08:46 : tests
08:48 : now I will talk more about syntax errors
08:50 : and their difference to runtime errors
08:53 : in JavaScript there are two main types
08:55 : of errors syntax errors and runtime
08:58 : errors syntax errors are going to say
09:01 : syntax error right in their name and
09:03 : everything else is a runtime error when
09:07 : a syntax error happens that means the
09:09 : computer didn't even attempt to execute
09:11 : the code because it had problems with it
09:14 : a runtime error means that the machine
09:17 : had executed some of the code but hit a
09:20 : snack along the way and had to stop
09:22 : prematurely now just imagine that you're
09:25 : the king and you were fighting a war and
09:27 : the means by which you orchestrate the
09:30 : fighting of that war is by exchanging
09:32 : letters with your commander a syntax
09:35 : error would be like your commander wrote
09:37 : back saying that he doesn't understand
09:39 : your instructions and is going to need
09:41 : clarification before he can do anything
09:43 : else a runtime error on the other hand
09:46 : would be like if the commander has
09:48 : already started out the mission but the
09:51 : troops ran out of food and cannot
09:53 : continue until reinforcements come
09:56 : syntax errors can look daunting to give
09:59 : you a better understanding of why they
10:01 : say what they say and their varying
10:03 : degrees of helpfulness I'm going to dive
10:06 : a little bit into how the parser works
10:08 : the parser is responsible for parsing
10:12 : code and like humans
10:14 : it reads code from left to right one
10:17 : token at a time a token can either be a
10:21 : word operator or punctuation the parser
10:25 : reads these in one by one and tries to
10:27 : make sense of them in this instance it
10:30 : first sees the token bar and it says oh
10:33 : okay so you're declaring a variable and
10:37 : then it sees the token Bob and it says
10:40 : okay so the variables name is going to
10:43 : be called Bob and then it sees the equal
10:47 : sign and then it says okay so we're
10:49 : going to initialize this variables value
10:52 : to something then it sees function and
10:56 : then it says okay so we're beginning to
10:58 : define a function here and so forth and
11:01 : so forth
11:02 : now what happens when there is a syntax
11:05 : error to demonstrate that I'm going to
11:07 : remove the assignment operator here I
11:09 : get the syntax error unexpected token
11:13 : function why does it say that well from
11:17 : the parsers perspective I see the tokens
11:20 : var followed by Bob so now I'm about to
11:24 : declare a variable named Bob but then
11:27 : when I see the token function I'm
11:29 : confused I would have accepted an
11:31 : assignment operator a semicolon a comma
11:34 : or even a newline but function here just
11:39 : doesn't make sense therefore it's not
11:41 : valid JavaScript so I'm going to have to
11:44 : bail out with an error here's another
11:47 : example an error that programmers
11:49 : commonly make is that do sometimes
11:52 : forget to close a set of parentheses or
11:54 : curly braces so that's what I'll do I'm
11:57 : going to remove this closing brace and I
12:00 : get this error unexpected end of input
12:03 : the error location is the very end of
12:06 : this file and that's nowhere close to
12:08 : where I made the mistake why does this
12:11 : happen again think about this from the
12:14 : parsers perspective since the body of
12:17 : this function was never closed the
12:18 : parser continues reading all of the rest
12:21 : of the code as if all of it lived inside
12:24 : this function when it reached the end of
12:26 : the file it was still looking for the
12:29 : closing curly brace to end this
12:31 : functions definition now the troubling
12:34 : thing about this kind of error is that
12:36 : it's just not very helpful for finding
12:38 : your mistake the error location is way
12:41 : off you do have other recourses though
12:44 : at this point if you have been taking
12:47 : small incremental steps you would have
12:50 : had the option of reverting back to the
12:52 : last known good state otherwise you can
12:56 : always use the test case simplification
12:58 : technique in order to pinpoint the error
13:00 : both of these techniques are covered in
13:03 : separate lessons okay let's recap the
13:06 : things that we covered in this lesson
13:07 : when you get an error you should
13:10 : definitely read it out loud then look up
13:14 : the location of the error in your ad
13:16 : in order to get more context know where
13:19 : errors come out when they manifest
13:21 : themselves because you want to get all
13:22 : the errors because these things can
13:25 : really be helpful and by now you know
13:29 : the difference between syntax errors as
13:31 : opposed to runtime errors which is
13:33 : important because they mean different
13:35 : things and you would approach them very
13:38 : differently that's the conclusion of
13:41 : this lesson I'm going to leave you with
13:43 : some exercises to work on please do do
13:46 : these because it will force you to apply
13:48 : the concepts of the lesson and thus help
13:51 : you retain it for when you actually have
13:54 : to use it during a debug session in part
13:57 : 2 of reading error messages I'm going to
14:00 : show you the ins and outs of reading
14:02 : understanding and making the most use of
14:05 : stack traces see you then