DEV Community

loading...

Are you a console.log addict? Add this snippet to make it faster, easier, and clearer to use.

Analogy | Absence | Example
The way I understand things is in relation to other things: Analogy: what can it be compared to? Absence: what would we have to do without it? Example: how does it work?
Updated on ・3 min read

Our first debugging friend, the humble console.log

One of the first things you learn when programming javascript is how to print a value to the output window. Let's say you declare a variable called myVar, and your code has a statement like myVar = 1+1. When you want to make sure that your code is doing what you expect-- 1 + 1 = 2, so myVar should equal 2--you write console.log(myVar). When the interpreter reaches that line of code, you will miraculously see 2 appear in the output window.

...but it doesn't scale

The problem is, once you are peppering your code with console.log statements, it's hard to remember what all the values appearing in the output window refer to. The solution is to write a more verbose console.log statement, like

console.log(`myVar = $myVar`)
Enter fullscreen mode Exit fullscreen mode

but that can be cumbersome after a while.

My solution

My solution was to create a snippet in VSCode so that when I type a shortcut--mine is consolel (like typing console.log without the period--I get the following statement:

console.log(`foo = `, foo)
Enter fullscreen mode Exit fullscreen mode

I then double-click foo, type ⌘d to select the other foo, then type in myVar to replace both foos with myVar. The result is the following:

console.log(`myVar = `, myVar)
Enter fullscreen mode Exit fullscreen mode

...and when you run the code, what you see in the output window is:

myVar = 2
Enter fullscreen mode Exit fullscreen mode

...instead of just

2
Enter fullscreen mode Exit fullscreen mode

Isn't that nice?

Here's how to create a snippet to quickly and easily add descriptive console.log statements

  1. In VSCode, at the top menu, select Code > Preferences > User Snippets
  2. The Command Palette will open. Select "New Global Snippets File" and type in the name you want to use. Mine was consolelog, so it created a file titled consolelog.code-snippets
  3. Your new code-snippet file will have a bunch of commented-out text inside a set of curly braces explaining how to use it. At the bottom of the text, but inside the last curly brace, add the following code:
"consolelog":{
    "prefix": ["consolelog"],
    "body": ["console.log(`foo = `, foo)"],
    "description": ["Shortcut for a descriptive console.log statement"]

    },
Enter fullscreen mode Exit fullscreen mode

When you're finished, the code should look like this:

{
    // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    // "Print to console": {
    //  "scope": "javascript,typescript",
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "consolelog":{
        "prefix": ["consolelog"],
        "body": ["console.log(`foo = `, foo)"],
                "description": ["Shortcut for a descriptive console.log statement"]
Enter fullscreen mode Exit fullscreen mode

Here's what's going on in the code. As it says in the commented-out text, "Each snippet is defined under a snippet name and has a scope, prefix, body and description." In this case, they are:

  • Snippet Name: consolelog
  • Scope: (I skipped scope to make this global)
  • Prefix: The shortcut you choose to summon this snippet, I chose consolelog
  • Body: The text you want the snippet to create, wrapped in brackets and quotes
  • Description: Whatever you think best explains your snippet. I wrote "Shortcut for a descriptive console.log statement"

I hope this helps!

Discussion (0)