console.log() Faster with Turbo Console Log

Introduction

I’ve recently been live-coding on Twitch and the thing that I’ve loved about it is all the users in the chat that are helping me out by giving me their own tips and tricks.

In our most recent stream, we started talking about my VS Code extensions and one that was recommended to me that I’d never heard of before was Turbo Console Log.

In a nutshell, it lets you take a variable and quickly write the whole console.log statement with keyboard shortcut CTRL+ALT+L for Windows or CMD+OPT+L for Mac.

Here’s a gif of it in action:

Why Turbo Console Log?

I’m a sucker for any keyboard shortcut that can save me from writing some characters. Absolutely love working with Vim.

If you told me of an extension or keyboard shortcut that saved me typing even 3 characters, I’ll jump on it and dedicate adding that to my arsenal of keyboard shortcuts.

The JavaScript (ES6 Code Snippets) extension has a convenient snippet where you can type:

clg

Expands to:

console.log()

Turbo Console Log provides another convenient shortcut to create those console.logs.

Extras: Removing All console.log()

In addition to creating console.log() messages quickly, Turbo Console Log can:

• Delete all console.log() messages: SHIFT+ALT+D
• Comment all console.log() messages: SHIFT+ALT+C
• Uncomment console.log() messages: SHIFT+ALT+U

Conclusion

Yes, I know that the Debugger for Chrome extension is useful also to find out what is in your code, but sometimes you just gotta console it! For some tutorials on debugging in VS Code, check out these:

• Debugging JavaScript in Google Chrome and Visual Studio Code
• Debugging Node Code in VS Code
• Debugging Create React App Applications in Visual Studio Code