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.
- Working with data
- Using functions and objects
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality