DEV Community 👩‍💻👨‍💻

Cover image for A Verbose Log Snippet for Easier Debugging
Omar Benmegdoul
Omar Benmegdoul

Posted on • Updated on

A Verbose Log Snippet for Easier Debugging

Here's a VSCode snippet that populates a console.log call with more information to help you interpret your output. Typing llog then Tab will get you something like:

console.log(`❗ data.js line:78 'reservations' <type: ${typeof reservations}>`,reservations);
Enter fullscreen mode Exit fullscreen mode

Instead of just printing the value of your console.log argument, you get the file name, the line number, the name of the argument, its type, and then its output. There is also a red emoji to mark this as your own note and to easily spot the beginning of the log.

The actual snippet

"Labeled log to console": {
        "prefix": "llog",
        "body": [
            "console.log(`❗ $TM_FILENAME line:$TM_LINE_NUMBER '${2:expression}' <type: \\${typeof ${2:expression}\\}>`,${2:expression});"
        ],
        "description": "Logs filename, rough line called, name, type, and value of expression "
    },
Enter fullscreen mode Exit fullscreen mode

Here's a shorter version of the same info:

 "Labeled log to console": {
        "prefix": "llog",
        "body": [
            "console.log(`❗ $TM_FILENAME:$TM_LINE_NUMBER '${2:expression}' <\\${typeof ${2:expression}\\}>`,${2:expression});"
        ],
        "description": "Logs filename, rough line called, name, type, and value of expression "
    },
Enter fullscreen mode Exit fullscreen mode

And an even shorter version with no typeof - use with slog then tab:

  "Short log to console": {
        "prefix": "slog",
        "body": [
            "console.log(`❗ $TM_FILENAME:$TM_LINE_NUMBER '${2:expression}'`,${2:expression});"
        ],
        "description": "Logs filename, rough line called, name, and value of expression "
    },
Enter fullscreen mode Exit fullscreen mode

Shoutout to Neophius and alexdima for showing me the escape characters

How to use VSCode snippets

It's easier if I just show you:

A gif demonstration of what the snippet does and how to use VSCode snippets

Notes

  • The line number doesn't update if the call moves to another line in the file. It doesn't matter very much in practice.
  • Maybe you have more than one index.js? Replace TM_FILENAME in the snippet with TM_FILEPATH for the full path to the file.

Learn more about user snippets

Top comments (0)

Dream Big


Use any Linode offering to create something unique or silly in the DEV x Linode Hackathon 2022 and win the Wacky Wildcard category.

Join the Hackathon <-