DEV Community

TulusIbrahim
TulusIbrahim

Posted on

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)
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

or something like,

log('this is the data: ', yourVariable)
Enter fullscreen mode Exit fullscreen mode

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()"
}
Enter fullscreen mode Exit fullscreen mode

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!🍻

Top comments (0)