Writing console.log() lines with just one keypress

Benefits

This is a simple idea that will:

1. Reduce typing
2. Save time
3. Improve log readability
4. Keep console.log() lines out of your codebase

What is the trick?

Add a macro to your editor that makes it super simple to create a new console.log() line for the variable under the cursor.

<insert animation here>

How does that help?

By making it easier to log variables of interest, you can more quickly debug and solve issues.

A macro can automatically label the variable when it is printed, which makes the logs easier to read, and easier to find when you want to remove them.

And if it’s easy to create new console.log() lines, then you won’t be so tempted to leave such lines in the code once your debugging is finished “just in case” you need them again.

<insert animation here of log lines being removed>

Bonus tip: This isn’t only for variables. You can also use it on expressions!

<insert animation of expression being annotated>

How can I do this in VSCode?

You could try the Turbo Console Log extension.

Then just put your cursor over a variable and hit Ctrl-Alt-L (or Ctrl-Opt-L on Mac).

If it doesn’t work quite how you like it, the extension has many forks.

How can I do this in VSCodeVim?

I create one key binding to do this for a visual selection. And then two normal mode key bindings \log and \Log which create a small-word or large-word visual selection, and then call the macro.

Open your settings.json and add the following lines:

///// settings.json /////

"vim.normalModeKeyBindings": [
  { "before": [ "<Leader>", "l", "o", "g" ], "after": [ "v", "i", "w", "\\", "l", "o", "g" ] },
  { "before": [ "<Leader>", "L", "o", "g" ], "after": [ "v", "i", "W", "\\", "l", "o", "g" ] },
],

"vim.visualModeKeyBindingsNonRecursive": [
  { "before": [ "<Leader>", "l", "o", "g" ], "after": [ "\"", "l", "y", "o", "c", "o", "n", "s", "o", "l", "e", ".", "l", "o", "g", "(", "\"", "C-R", "l", ":", "\"", ",", " ", "C-R", "l", ")", ";", "Esc" ] },
],

As you can see, there are some disadvantages to this approach:

• The keybind only works on one language. If you switch between languages often, you will either need to comment and uncomment the relevant visual key binding, or generate a different set for each language.
• It looks pretty ugly, because the keystrokes must be written one character at a time.
• It can be slow to execute, if you have not yet enabled affinity (which you probably should do).
• If the expression you have selected contains " characters, these will break the generated code (which you can fix by manually escaping them with \)

How can I do this in WebStorm?

It has been a while. But the technique I used was to create a macro (bound to Cmd-Shift-L) which would output:

console.log("$0:", $0);

Then to use it, I would:

1. Double-click on the variable to highlight it
2. Copy it to clipboard
3. Run the macro
4. Paste the variable (which the macro would duplicate in both places).

How can I do this in Vim?

Similarly to VSCodeVim, I create mappings. We can do this separately for each language we use.

For example, for JavaScript I create the following ftplugin file:

""""" ~/.vim/ftplugin/javascript.vim """""

nmap <buffer> <Leader>log viw<Leader>log
nmap <buffer> <Leader>Log viW<Leader>log
" Simple
"vnoremap <buffer> <Leader>log yoconsole.log("<C-R>":", <C-R>");<Esc>
" More stable
vnoremap <buffer> <Leader>log yoconsole.log(_QUOTE_<C-R>":_QUOTE_<Esc>:silent! s/"/\\"/g <Bar> s/_QUOTE_/"/g<CR>A, <C-R>");<Esc>

This gives me the keybindings \log and \Log to log the word or the large word underneath the cursor.

We use _QUOTE_ as placeholders until after we have escaped the "s in the expression we are logging.

You can create similar mappings for the other languages you use.

For my full JavaScript mapping (which can detect semicolons) see here, and for other languages see here.

Additional

Depending on your development environment, you may find it useful to add additional information to the log line. Some examples:

• In Vim, you could add the filename to your log line with <C-R>=expand('%')<CR>
• For JavaScript (in any editor) you can log the filename, line number and method name of the line where the log happened, by adding Error().stack.split('\n')[1] to the log.
• You could add // DELETEME to the end of the line, as a reminder not to commit the line.
• To avoid accidentally committing unwanted log lines, always stage commits using git add -p. Try it, you’ll thank me later.

This has changed my life. How can I ever repay you?

• Donate to the one of these charities: Rainforest Alliance, GiveWell, TheLifeYouCanSave, or EffectiveAltriusm
• Contribute a solution for other editors such as Emacs, Eclipse, NetBeans, SublimeText, …