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);

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 "
    },

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 "
    },

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 "
    },

Shoutout to Neophius and alexdima for showing me the escape characters

How to use VSCode snippets

It's easier if I just show you:

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