In the world of programming, there is no error-free program! Programming errors occur. If we can detect errors and fix them, we will never be afraid of errors and bugs! In this article, we will examine the practical methods of troubleshooting and debugging JavaScript. There are several reasons for an error. As a result, errors fall into different categories. The two types of errors that we may encounter the most are:

 

Syntactic error

Syntax error occurs due to incorrect spelling of words or the general structure of the code. Usually part or all of the code will not be executed due to a syntax error. It will be very difficult to fix the syntax error if you use the right tools when programming or understand the meaning of error messages.

 

Logical error

Sometimes the code structure is correct, but our program does not work properly. That is, the program runs without error, but the output is not equal to the expected result! To fix logical errors, we need to check the logic of the program to understand the problem.

 

Runtime Error

This type of error is not specified when compiling code. Instead, they may cause problems when running the program. As mentioned, it is easier to fix a syntax error depending on the error message that is displayed. In the following, you will learn methods that make it easier for you to study the logic of the program.

 

Console.log method to fix JavaScript error

A simple way to fix a JavaScript error is to print the value of the variables in different parts of the program. By doing this, we print the value of the desired variable (numeric, string or array) in the critical parts of the program. By examining these values, we can understand where our program computing is doing. The first solution that appears to print a variable value is to use the alert () function. If we monitor a variable called x, we can check its value using the following code anywhere in the program. But this is a bit unprofessional! If the number of locations to be examined or the number of variables is large, it is illogical to execute a message for each of them. In JavaScript, we have an object called a console. This object has a method called log. Prints everything given as input to the browser console. The console is one of the tabs of the browser Developer Tools. Or you can open this tool by pressing the F12 key and go to the console tab. If the variable data is in the form of an object or an array of objects, there is a trick to printing the array in one place.

 

Use Debugger to troubleshoot JavaScript code

Debugger is a program that can be used to run the program line by line. At each step, check the value stored in the variables. With this, we will proceed line by line with the logic of the program. And finally we find the place that causes the problem. Because the JavaScript language runs on the user side and in the user’s browser, most up-to-date browsers have debuggers to fix programming errors. If we want our program to run partially and then the browser Debugger to run the code, we can use the debugger keyword in the desired line. When the code reaches the third line of the program, the browser debugger will open and we will be able to execute the continuation of the code line by line.

 

Add breakpoint in JavaScript code

In Debugger, lines can be defined as breakpoints. When the program execution reaches this line, the execution will stop (pause). As a result, the status of the program and the amount of variables can be checked. Using the breakpoint feature may vary depending on your execution environment. Here we teach you how to debug JavaScript in Basic WebKit browser (Chrome and Firefox). The process will be very similar in other browsers. The steps will be as follows:

  • On your Apps screen, press F12.
  • In the window that opens, select the source tab.
  • From the displayed path, open the file that contains the JavaScript code.
  • By clicking on the line number, the line number will be highlighted and blue. We now have a registered breakpoint.
  • Multiple breakpoints can be defined for the program.
  • Now refresh the page.
  • You will see that the program stops running on the first specified line.

 

Correction of syntactic errors

You can use the F12 key to refer to the browser console developer section. Developer Console Whenever there are structural errors in JavaScript, it displays error messages before the code enters the browser’s JavaScript engine. First, go to the tab where you opened the file and open the browser console. You will encounter an error message as follows. Tracing such errors is quite easy and the browser provides several useful clues to help you. The image above was taken from the Firefox browser; but other browsers provide similar information. This information from right to left includes the following:

 

A red cross indicates an error.

  • An error message indicating the error: “TypeError: guessSubmit.addeventListener is not a function”
  • A “Learn More” link that leads to the MDN page, which explains the meaning of the error and many details about it.
  • The name of the JavaScript file that is linked to the devtools debugger tab. If you follow this link, you will see exactly the line where the error was highlighted.
  • The line number where the error is located and the character number in the line where the error was first seen. In this case it is line 86 and character number 3.

 

guessSubmit.addeventListener (‘click’, checkGuess);

The error message states: “guessSubmit.addeventListener is not a function”. So we probably said something wrong. If you are not sure if the spelling of the words is correct or part of the structure is incorrect, it is best to look at that feature on the MDN website. The best way to do this is to search for the attribute name along with the word MDN in the search engine. In this case, we provide a page link to make your job easier: addEventListener. So if you look at the page above, you will notice that we have misspelled the function name. Keep in mind that JavaScript is case sensitive. Hence, any slight difference in the spelling of the phrases causes an error. Changing the phrase addeventListener to addEventListener fixes this problem, so do it now.

JavaScript

The second round of syntactic errors

Save the page and refresh the browser and you will see that the error is gone. Now if you enter a guess and hit the “Submit guess” button, you will encounter another error.

Variable-is-null

This time the error is reported as “TypeError: lowOrHi is null” on line 78. Note that Null is a special value that means “none” or “no value”. Hence the lowOrHi variable is declared and initialized; but its value is not significant, that is, it has no type or value. Also note that this error does not appear as soon as the page loads, as this error occurs within a function, inside the checkGuess}}} block. Because the code inside the functions is executed in a separate domain from the code outside the function, this code will not be executed, and therefore no error will be issued until the checkGuess function is executed on line 86. Take a look at line 78 and see the following line of code:

 

lowOrHi.textContent = ‘Last guess was too high!’

This line attempts to specify the textContent attribute of the lowOrHi variable as a text string; But it does not work, because lowOrHi does not contain what is expected. To find out why, we look at other cases of lowOrHi in the code. The first instance of this variable is in line 48 of the JavaScript code:

 

lowOrHi = document.querySelector (‘lowOrHi’);

At this point we are trying to create a variable that contains a reference to an element in the HTML document. We check if the variable is still null after executing this line. Add the following code on line 49:

 

console.log (lowOrHi);

Note that console.log () is a really useful function for debugging that displays the value of a variable in the console. Therefore, the above command displays the value of the lowOrHi variable in the console as soon as we reach line 48 of the code. Save the file and refresh the page. You should now see the result of the console.log () command in the console.

 

Console-log-output

We see that the value of lowOrHi at this stage is equal to null, so there is definitely a problem in line 48. Now we have to think about what the problem could be. Line 48 uses the document.querySelector method, which obtains a reference to an element by selecting it with the CSS selector. If we examine the file further, we can find the desired paragraph:

 

<p class = “lowOrHi”> </p>

Thus we need a class selector that starts with a dot (.); But this selector, which is passed to querySelector () method on line 48, has no point. This can be a problem. Line 48 lowOrHi to lowOrHi. We change. Now if we save the file and refresh the page, we will see that the <p> phrase we want returns in the browser console. This is how we corrected another error. You can now delete the console.log line or save it for future reference.

 

Third round of syntactic errors

Now if you run the game again, you will see more success. The game runs completely without any problems to the end and it does not matter if your guess is right or wrong. At this point, the game crashes again and the same error we initially saw occurs again:

 

TypeError: resetButton.addeventListener is not a function

This error usually refers to an incorrectly shaped JavaScript object; but in this case you can change the code from the following situation

This causes the browser to think that we want to send the content of the function as an argument into the function. So you have to be careful when using parentheses.

 

SyntaxError: missing 

This error is quite simple and generally means that you have forgotten one of the parentheses in the function or condition structure. This error was caused by deleting one of the final parentheses at the end of the checkGuess function.

 

SyntaxError: expected expression, got ‘string’ or SyntaxError: unterminated string literal

These errors generally mean that an open or closed quote is missing in a string value. In the first error above, the string value must be replaced with the unwanted characters that the browser found instead of the quotation mark at the beginning of the string. The second error means that the string is not closed with a quotation mark. You need to think about all these errors in the way we used to deal with them in the examples. When an error occurs, look at the line number and then scroll to that line to see if you can find the problem. Keep in mind that the error is not necessarily on that line, and that the error may not have been caused by the same issue as in the previous section.

JavaScript

Concluding remarks

In this article, we will look at the basics of basic concepts related to errors in JavaScript programs. Of course, finding errors in code is not always that simple; But at least by reading this guide and learning the skills introduced, you can save hours of time troubleshooting programs and solve problems more quickly when the program is not working properly.

 

 

 

Author

Write A Comment