Demystifying Debugging, Pt. 2

My first blog post as a student at Flatiron School (see: https://medium.com/@newmanbradm/demystifying-debugging-3b61c315e07b) was about the importance of understanding AND utilizing the debugging tools available in the Ruby programming language. Now, a month later, I’ve been introduced to a new set of debugging tools that we are using with JavaScript, and their usefulness, yet again, should not be underestimated.

This blog will outline examples of common errors we may encounter as we write JavaScript code, the console object and its methods, and the debugger keyword. These are the basics of debugging in the browser console when dealing with JavaScript code. I have also included a few extra tips and tricks related to the browser console (there are a lot of them, I have only added a few to this blog).

Error Messages

The error messages we will encounter when writing JavaScript code are, luckily, fairly descriptive and usually very easy to understand. Deducing what we did to cause the error can be a bit tricky, but the error messages themselves are pretty explicit in their descriptions. The act of recognizing the actual mistake that caused the error just takes some practice. Now, for some common error types:

1. UNCAUGHT REFERENCEERROR: _____ IS NOT DEFINED

This error tells us that we tried to reference a variable or function that doesn’t exist in the current scope or within the scope chain. We may get this error message if we incorrectly declare a variable, or forget to declare the variable entirely. We may also see this type of error if we forget to wrap a string in quotes properly. If the error seems to have been caused by a scope issue, we should make sure our function is declared at a place where its scope chain should include the outer scope that contains the declaration of the variable we are trying to access.

2. UNCAUGHT TYPEERROR: _____ IS NOT A FUNCTION

This error is telling us that we tried to invoke something that is not a function. A common place where we might see this error is when a variable contains undefined instead of a function.

3. UNCAUGHT SYNTAXERROR: MISSING ) AFTER ARGUMENT LIST

This error is incredibly straightforward, but annoyingly common. As it states, this error message means we tried to invoke a function but forgot the closing parenthesis.

4. UNCAUGHT TYPEERROR: ASSIGNMENT TO CONSTANT VARIABLE

Another very straightforward error message! Unlike the var and let keywords, a variable defined with const does not allow for reassignment. If we know that we were not trying to reassign a variable, we should look for possible typos. We may find that we used an assignment operator (=) instead of a comparison operator (===) somewhere in our code.

For more error messages: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors

The Console Object

The web browser, not the JavaScript language itself, provides an object called console. This object has specific methods that send text to the DevTools logging area, which is referred to as the console. These methods are used in the process of tracing, which is the process of using output statements to provide feedback from the machine. Tracing allows us to check assumptions when our code doesn’t seem to behave the way we want.

console.log()

The console object’s log() method is used to log general information to the console. It can log strings, numbers, and even objects. If passed more than one argument, the arguments are printed on the same line separated by a space.

console.error()

The console object’s error() method is used to print out an error to the console. The method can take multiple arguments, and most browsers will format the error message differently than a logged message.

console.warn()

The console object’s warn() method is used to log a warning to the console. It is meant to be a step between the regular log() method and the severity of the error() method.

console.table()

The console object’s table() method is a very useful tool to work with arrays. It logs a neatly formatted table from the data stored in the array (or object), where each element is displayed as its own row.

*Bonus Console Methods*

The previous console methods are just some of the most common examples of methods available to us. The following are a few bonus methods I came across that I thought would be nice to share.

console.assert(expression, object)

This method writes an error to the console when the evaluated expression is false.

console.count()

This method writes the number of times that the count() method has been invoked at the same line and with the same label.

console.group(object[, object, …])

This method starts a new logging group with an optional title. All console output that occurs after console.group() and before console.groupEnd() is visually grouped together.

console.time([label)

This method starts a new timer. The timer ends whenever console.timeEnd() is called and the elapsed time is printed to the console.

Using Debugger

The debugger keyword is JavaScript’s built-in debugging solution. It stops the execution of our code at the point where it was called. Once the debugging function is called, we can check on the current contents of a variable or see whether a function is available within the current scope. Debugger is supported by the five major web browsers (Google Chrome, Microsoft Edge, Firefox, Safari, and Opera).

As soon as the JavaScript engine hits a debugger statement, it will pause the execution of our code and a yellow banner will pop up in the main browser window.

While the execution is paused, we can hover our mouse over identifiers (function names, function parameters, variable names) to see their current value. We can achieve the same result by typing the identifiers into the console, as displayed in the following image.

Using debugger allows us to test our assumptions and catch errors as we write our code. When we are done testing our identifiers in the current, stopped state of our code, we can hit the Resume Script Execution button to finish executing our code.

Conclusion

There are many tools available to us for debugging and testing our JavaScript code. Most of these tools are very straightforward to use, but the errors we face may be a bit trickier to solve depending on the scenario. As with anything, the more practice we get, the better we can understand and utilize our debugging tools and the quicker we can identify and correct our mistakes.

Again, this blog post only highlighted of a few of the many debugging tools available to us, so I encourage you to seek out other convenient tools that can help you on your coding journey!

Fun fact: The first known computer bug was a real bug (an insect) stuck in the electronics.