Emoji Console Log is my new Visual Studio Code extension to add console.log() statements using a hotkey — my favorite way of debugging web apps.

Here are the main features of the extension:

• Hotkeys to add, comment, uncomment, and remove logs to monitor different values.
• Adds random non-repeating emoji to each log to make it easier to distinguish different logs in the browser console.
• Automatically detects project’s code style (quotes, semicolons, tabs/spaces, etc.).
• Automagically adds new lines at the right places to keep the code neat.

Using console.log() is my favorite way of debugging JavaScript and TypeScript code. I’ve been trying to learn more fancy techniques, like a debugger, but I always come back to console.log(), because it’s the simplest and it works for me.

The way I do it is by adding a separate log for each variable I want to track, like so: console.log('🍕 variable', variable). I always add a different emoji at the beginning, so it’s easy to differentiate logs in the browser console.

Try it now in VS Code!

You can also look at the source code on GitHub.