Troubleshooting JavaScript

- [Instructor] Throughout this course, you've seen me type out a ton of Javascript and run it in the browser without any errors, and you may be thinking to yourself, wow, this working guy really knows how to write perfect Javascript. He makes no errors. That is not the case at all. In preparing for this course and creating the code examples and projects, I made a ton of mistakes and rewrote my code a bunch of times before ending up with what you've seen. Anyone writing Javascript will make mistakes and rewrite their code. Well, maybe with the exception of Ray Villalobos, who's some sort of magical Javascript adept.

The rest of us mere mortals make mistakes and reconfigure our code all the time. In fact, I would argue making mistakes or causing unexpected things to happen is part of the Javascript development process because the majority of mistakes you're going to make come from experimentation and innovation, trying to solve some sort of challenge or problem, or exploring new features, and as with any other code language, much of your learning and discovery in Javascript will come from breaking things and then trying to figure out how to fix them.

The challenge is, unlike with HTML and CSS, which is pretty easy to troubleshoot, Javascript seems kind of black box-y when you get started. You write a bunch of code, and your code editor, like the example in the exercise files for this movie, 1102, and then when you run it in the browser, you get an unexpected result. Right now, the timer is not working, and looking at my code editor, it's really hard to see what's wrong, because nothing is being flagged as incorrect here.

There are no error warnings. Nothing is red. Everything looks the way it's supposed to. The trick to writing Javascript is knowing how to debug your code and figure out what's going on and what's wrong. The first thing you should do any time your Javascript is not working as expected in the browser is open the console. Chances are, there's a blatant code error, and the console will let you know right away. This flag up here in the corner tells you how many Javascript errors you currently have, and down inside the console, you'll get a list of each of the errors with information.

The error tells you what type of error this is, although these messages are often very technical and don't make sense unless you look up their definition on the web. More importantly, they give you the line number and sometimes even character position where the error occured. This can be helpful. In my case, there's some sort of problem on line 23 in script.js. If I go over into my code editor here and scroll down, I find line 23, and here, I can see the error right away.

The actual output error is Uncaught SyntaxError: Unexpected token, and then a semicolon. That just means there's a semicolon here. I don't understand why it's here. It shouldn't be here. I was expecting something else. That something else is a plus symbol, because right now I'm doing math and then not finishing it. What I want to do is add one to the timer element, so adding this extra plus symbol is what was missing. Save that, error goes away. Here's the thing, though: this error on line x message isn't always helpful.

If I go into my code and randomly remove a curly brace, we get an error, and here it says, there's an error, Unexpected end of input on line 73. If I go into my code and scroll down, I find that line 73 is the end of the script file. So this error is just telling me, there's some sort of error in your code somewhere above the end of the file. That's not very helpful. The good news is typically these error at end of file or error at end of functions are caused by parentheses, square brackets, or curly braces not being closed, and here the code editor can help us out.

First of all, the code editor will highlight the corresponding parentheses, bracket, or brace when you focus on one of them. So up here, I have some parentheses and square brackets, and if I click on any one of them, you'll see the editor will highlight both the current one and its corresponding end. The same thing happens if you highlight the end one. It'll highlight the beginning one. It does this with these blue underlines. That means if I click on any one item, I can see where it begins and ends, and I would see immediately if the braces are closing in the wrong place.

So what happens if I scroll down here to the spell check where I made this mistake? If I click on this first curly brace here, you see it does not have a blue underline. That means it doesn't have a corresponding end curly brace. That's the problem. The challenge is to figure out where this end curly brace is supposed to be. So using this same tool, I can now go through all my curly braces to see that they're closing where they're supposed to. So this one closes where it's supposed to. This one closes all the way down here, which looks wrong, so that means the error is somewhere between the beginning one and the end one.

Then I need to figure out where the actual error is. So here, we have this if text entered. That one closes here, that's fine. Then we have an else statement, which closes here. That means the error must be between this one and this one. So if we put a curly brace here, save, error goes away. And our code is working again. The second debugging tool you can use in the code editor is color coding. You've noticed that everything I write is color coded.

You can see numbers have a different color from strings and functions have a different color from methods and so on and so on. And if you start making mistakes, you'll notice that the code editor will desperately try to help you fix those mistakes. Let's see what happens if I take away the end quotation mark on a string. All of the sudden, everything after that turns red telling me, ah, there's a huge error here. You have not closed your quotation mark, and I am pretty sure you don't want to spell out everything else here as text.

So I'm just going to flag everything red for you to make it absolutely abundantly clear there is an error. If you see anything like this, you made a mistake. More likely than not, you can just undo to fix it or just look for a start quotation mark that does not have an end quotation mark. It gets a little more challenging if you have long strings that also contain variables. So, for example, if I set up a string here that also contains a variable, and then accidentally take away the quotation marks, what ends up happening is the entire string now turns green and reading the text, I can clearly see, oh, there's a plus sign here that's not supposed to be there, and this will also output into the browser and we can clearly see something is not right.

So that means, any time you see this long green text, you want to make sure that all the contents within long green text actually matches with the string you want to output. Familiarizing yourself with the color coding and functionality of your chosen text editor will help you debug your code before you send it to the browser. Once the code is in the browser, use your console to see if there are any errors, and then identify the errors, go back into your code editor, and fix them there.