JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)

Chapter 22. Errors and Debugging

Thanks to unavoidable human errors, bugs can instantly conquer your scripts. And since modern browsers do not display error messages on the screen, errors that can render your scripts acting weird or malfunction can become unnoticeable.

Old browsers like Internet Explorer 6 and lower do provide error messages in a page’s JavaScript code. However, due to numerous scripts out there that are so prone with errors, error messages became a nuisance rather than a helpful tool for web users.

And because of that and the increasing lack of knowledge about JavaScript by common internet users, error reporting in browsers have become “reserved” to developers only. Nowadays, browsers are equipped with debugging and developer console. And two of those browsers that have great consoles are Chromium (Chrome, Opera, etcetera) and Mozilla Firefox (Pale Moon, Waterfox, etcetera).

Of course, having a debugging console is not enough. After all, the most common behavior that browsers have when they encounter an error is to halt the execution of the script. Unfortunately, you might want to let the browser continue on executing the other statements despite encountering an error. If you need that to happen, you will need to use try and catch.

Try, Catch, and Finally

Try and catch are two keywords that can allow you to specify a certain block of code and test it if it will generate an error. On the other hand, the finally keyword will allow your program to execute statements within it regardless if the browser encountered an error. Basically, this is how they work:

try {alert(This is a message);}

catch{alert("The script encountered an error");}

finally{alert("I don’t care if there is an error or none. I will still appear!");}

What will happen is that, when the statement inside the try block gets an error, the statements on the catch block will be executed. If there are no errors, the catch block will be ignored. Alternatively, the statements within finally will still execute regardless of error state.

Console.log

What if you want to see everything in the console? Every value or variable that are getting change, you would want that especially during debugging. To be able to see a lot of information in your console, you can take advantage of logging functionality of console browsers

To print a message on the console, all you need is to provide a value to the Console.log method. For example:

> var x = 1

< undefined

> var y = 2

< undefined

> var z = 3

< undefined

> var a = x + y

< undefined

> var b = y + z

< undefined

> console.log(a)

2015-01-01 00:00:01.001 3

< undefined

> console.log(b)

2015-01-01 00:00:02.002 5

< undefined

> _

Notification Errors

Notification errors, which show up through IE dialog boxes or through console are the outcomes of runtime errors and syntax. These notification errors include the number line at which the error happens.

If you’re using FireFox, then you can just click the error console to proceed to the precise line in the script with error.

Debugging a Script

Below are the different ways to debug a JavaScript:

Add Debugging Code to the Programs

The methods document.write() or alert() in the program can debug the code. For instance, you can use the following:

By studying the order and content of the alert() as they are positioned, you can easily study the status of your program.

Add JavaScript Debugger

A debugger refers to the application, which places all factors of execution script under the command of the programmer. Debuggers offer better control over the script status through an interface, which permits you to study and establish values as well as execution flow.

Once you load a script into the debugger, you can run a single line at a time or commanded to stop at specific breakpoints. When the execution is stopped, you can study the state of the script as well as the variables to know if something is missing. It is also possible to take a closer look at variables for value changes.

JavaScript Validator

Another way to test the JavaScript code for erroneous bugs is to run it through a program, which tests it to ensure that this is valid, and that it follows the right syntax of JavaScript. These are known as validators or validating parsers, and usually added with JS editors and HTML.

The JavaScript Lint, developed by D. Crockford, is regarded as the most convenient validator for JavaScript. This is available for free, and you can just paste the code into the specified text area. Once you click the jslint button, the program will parse through the JS code, which ensures that the function and variable definitions will follow the right syntax. This will also test JS statements like while and if, to make certain that they too follow the right format.

Helpful Tips for Developers

The following tips could help you to reduce the errors in your script as well as to simplify the process of debugging.

· Use indentation to create codes that are easier to read. Also indent the statements to make this easier for you to match up the curvy brackets, starting and ending tags, as well as other HTML and script elements.

· Use a lot of comments, because these will enable you to discuss the reason why you wrote the script and you can also explain the tricky sections of code.

· Keep the consistency in naming your functions and variables. You can try using names, which are long enough and more meaningful. These names should also describe the variable contents as well as the use of the function.

· Use constant syntax in naming functions and variables. To put it simply, keep them all uppercase or lowercase. If you like to use the Camel Back notation, use it all throughout.

· Write codes in modular form. If possible, categorize your statements into functions, which will allow you to group statements that are related to each other, and check as well as reuse specific portions of the code with less effort.

· Check long scripts in modular form. To put this simply, don’t write the whole script before you check any portion. You can try to write a piece and obtain it to work before including the next portion of the code.

· Be mindful of your quotation marks. Take mote that the quotation marks will be used in pairs surrounding the strings and that both marks should be of the same style. Choose single or double and use the same style all throughout.

· Use function names and descriptive variable and lessen the use of names that are single character.

· Be mindful of your equals signs. Avoid using a single equals signs for comparing other elements.

· Explicitly declare variables through the keyword var.