Tricks to Debug JavaScript Faster

If you’re a developer, you might find yourself tired after writing the same console.log() syntax to check your current variable value. Here are some ways to log your values faster.

Create Log Function

You can create this function on top of your JavaScript file, or create it in separate file if you want to use it in multiple files. This function pretty simple, it look like this.

function log(...params){
    console.log(...params)
}

Notice that we use spread operator both in the function parameter and console.log statement because we want to iterate all the item passed to the parameter, and print it to the console.log statement.

Somewhere below in your JavaScript file you can use this function like regular console.log statement.

let yourVariable = 'Print me!';
log(yourVariable)

or something like,

log('this is the data: ', yourVariable)

Create a snippet

If you’re using vscode as code editor, you can click a gear setting in left bottom, and choose user snippets. You can choose existing snippet or create a new one. You can write the snippet like below.

"log": {
   "prefix": "getlog",
   "body": "console.log()"
}

The log key is just the name of the snippet, but the prefix value is the word that you will type in the editor to get the body value. So if I type getlog in my vscode, a console.log suggestion will appear as I type.

That’s it! Thank you for reading, see ya!🍻