How to Create a Visual Studio Code Shortcut for Console.debug() Snippets

Balram Chavan
2 min readAug 11, 2024

As developers, debugging is an essential part of our workflow. One of the quickest ways to diagnose issues is by adding console.debug() statements throughout your code. However, typing out console.debug() repeatedly can become tedious. Wouldn't it be nice if you could add a debug log with just a couple of keystrokes?

In this post, I’ll show you how to create a custom keybinding in Visual Studio Code that allows you to insert a console.debug() statement quickly using a keyboard shortcut. Personally, in my set-up cmd+l cmd+l (on macOS) or ctrl+l ctrl+l (on Windows/Linux) as the shortcut to insert a debug statement like:

console.debug('🔥🔥 Your debug message', variable);

Steps

1. Open Your Keybindings File

To get started, open the keybindings configuration file in VS Code. You can do this by pressing cmd+shift+p (macOS) or ctrl+shift+p (Windows/Linux) to open the Command Palette, and then type "Preferences: Open Keyboard Shortcuts (JSON)" and select it.

Or from the menu:

This will open the keybindings.json file where you can manually add or modify keybindings.

2. Add Your Custom Keybinding

--

--