Name: Make Console Logging in VS Code 10x Easier with Turbo Console Log
Uploaded: 2019-09-03T18:21:55-05:00
Description: The Turbo Console Log extension lets us quickly add console.log statements with additional data, which makes debugging your code easier.

Use VSCode Dimmer to Highlight Code when Teaching

Write Better Comments in VS Code

Make Console Logging in VS Code 10x Easier with Turbo Console Log

VS Code Extensions

The Turbo Console Log extension lets us quickly add console.log statements with additional data, which makes debugging your code easier.

https://app.egghead.io/api/v1/lessons/vs-code-make-console-logging-in-vs-code-10x-easier-with-turbo-console-log/subtitles

Steven Mercatante: [00:01] Start by searching for turbo console log and install it. I've got a demo file here with some test variables, a test function, and a test class. The easiest way to use turbo console logger is to log individual variables.

[00:20] Select the variable, and then hit CTRL+ALT+L. You see that a console log statement is automatically added for us. It includes the name of the variable, the variable itself, and this TCL prefix, which stands for turbo console logger.

[00:37] We can also log multiple variables at once. We select both of these, and again hit CTRL+ALT+L. We instantly have our log statements. A cool feature of this extension is that it can also tell you the name of the function or the class that contains the variable that you're logging. Let's test it on the greet function.

[01:03] You'll notice that we still have the TCL prefix, but the log also tells us the function that was this called from and the variable name itself. We can do the same thing for the class properties. Select both of them, and again, hit CTRL+ALT+L. This time, we have the TCL prefix, the name of the class, the name of the method, and then finally, the name of the property itself.

[01:29] This is great for debugging, but at some point, all these messages do become noisy. You can comment all of them out at once by pressing ALT+SHIFT+C. You can uncomment these by using ALT+SHIFT+U. You can also delete all of them using ALT+SHIFT+D.

[01:49] You can also change the prefix from TCL to whatever you want by going into the settings. Look for turbo console log-log message prefix and change this to whatever you want. I'll use three hashes. Come back to our demo file, and select some variables. You'll notice here that we've got our custom prefix.

Make Console Logging in VS Code 10x Easier with Turbo Console Log

Share this video with your friends

Course

VS Code Extensions