Debugging Quicker with a VS Code console.log Shortcut

As you know, there are two types of software engineers: those who use debuggers and the those who use logger statements. I am in the second camp myself, and not because I don’t know how to use a debugger (which can be tricky and probably worth writing another tip on) but because logs don’t break the flow of execution, which I prefer.

It’s like in a joke: I opened the debugger; it said “paused on breakpoint.” I said “same.” Went back to console.log.

VS Code: “Problems (1).” Me: adds console.log. — “Problems (0), Output (857).”

So I used to spending time typing something like for 3-4 variables:

console.log("data", data);
const results = await processMyData(data);
console.log("results", result);

…and then spending time removing those log statements when debugging is done is no fun. But no more!

Luckily, VS Code has an extension that lets us create a shortcut to automatically insert a console.log for a highlighted variable. console.log in a single click: the VS Code hack you’ll actually use. Spend 3 minutes configuring this and you’ll save hours in the long run.

Adding Logs: Step by Step Instructions

1. Install the extension
   Install Multi Command by ryuta46 (VS Code Marketplace):
   https://marketplace.visualstudio.com/items?itemName=ryuta46.multi-command
2. Open settings.json (user settings)
   Path (macOS): ~/Library/Application Support/Code/User/settings.json
   Use Cmd+Shift+P → type “user settings json” → Preferences: Open User Settings (JSON).
   (Note: Cmd+, opens the non-JSON UI.)
3. Add the Multi Command config
   Add this top-level property anywhere in your settings.json (keep valid JSON):

"multiCommand.commands": [
  {
    "command": "multiCommand.console.log",
    "sequence": [
      "editor.action.clipboardCopyAction",
      "editor.action.insertLineAfter",
      {
        "command": "editor.action.insertSnippet",
        "args": {
          "snippet": "console.log(\"$CLIPBOARD:\", $CLIPBOARD)\\n$0"
        }
      }
    ]
  }
]

4. Create a keybinding
Open keybindings.json (macOS path: ~/Library/Application Support/Code/User/keybindings.json) via Cmd+Shift+P → “keyboard shortcuts json”. Add an entry like this (note: the file is an array):

[
  {
    "key": "ctrl+l",
    "command": "multiCommand.console.log",
    "when": "editorTextFocus"
  }
]

Bonus: Customize the snippet’s output by adding prefixes like >>> or other decorators inside the “snippet” string.

Use it: Double-click a variable (or select it) and press Ctrl+L (or whatever you bound). A console.log is inserted on the next line.

Removal of Logs

Now that we know how to create logs quickly and effortlessly, what about those annoying lint errors when I forget to remove logs after debugging is done?! Not a problem, there’s a shortcut in VS Code that deletes an entire line of code! When you’re done debugging, clean up fast (on macOS):

• Delete line: Cmd+Shift+K
• Cut line (delete and copy to “the clipboard”): Cmd+X

These help you zap stray logs and avoid annoying lint errors.

Handy VS Code Shortcut Cheat Sheets

Lastly, here are two nice “cheatsheets” of VS Code shortcuts, because with shortcuts we can become more productive (and spend more time on work that is fun):

• Windows/Linux PDF: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
• macOS PDF: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf