DEV Community

codethepotato
codethepotato

Posted on

Debugging in Console

Something programmers use all the time is debugging. The best thing about this process is that we don't have to wait until an error is thrown to use this tool. There are many different ways that can end this tool to refine our check. We are going to talk about a few of them here today.

console.log()

It is the most basic and best tool in JavaScript for debugging.

While writing our code we can add in console.log() with the parameter or message that we are checking. This is called, Tracing!
This will provide feedback about 'what the machine is thinking', and showing us what is being passed. From here we know if we need to go back and see why we aren't getting the response in console, or if there's some reshaping to the code that is required.

console.log('Is this our info?')
Enter fullscreen mode Exit fullscreen mode

Here are some that are not as popular as the console.log.

console.error()

const pets = {smallCat: 'Flurry', bigCat: 'Keebs'}
console.error(pets)
Enter fullscreen mode Exit fullscreen mode

This is for printing out an error to the console. This form allows it to take on multiple arguments.

console.warn()

const pets = {smallCat: 'Flurry', bigCat: 'Keebs'}
console.warn(pets)
Enter fullscreen mode Exit fullscreen mode

This form is a middle step between the usual .log() and the more dire .error() messages.

The final one that we are going to talk about today is:

console.table().

This is going to print out a table of all the entries. Just like the last two examples, they are not as common. Primarily console.log() is going to be a new best friend!

It is good practice to always console.log() any message, variable, and even finish functions with that to be sure that everything is still working so far. When passing or receiving elements to the DOM it's so crucial to be checking that those elements; Be sure we are moving what we want, where we want.

There are many many uses to this debugging. It allows us to pick apart our code to see what is causing the issues and where they are. Error codes will show what folder, code line and line space that broke the code. The most common error types are Syntax, Type, Range, and Scope errors.

Here are some great links that are helpful to understanding these tools more in depth.
MDN Web Docs
GeeksforGeeks
FreeCodeCamp

Thanks for reading! Have a great day!

Top comments (0)