Overview
Features
Settings
Motivation
When it comes to fast and efficient debugging, developers often reach a crossroads: Should you configure and step through a debugger or insert log messages to trace your code's behavior? While debuggers are powerful and provide in-depth information, they can sometimes be an overkill for simple debugging tasks and can slow down your development process. On the other hand, log messages offer a quick and direct way to see what's happening in your code, particularly for minor bugs or during the early stages of development.
Enter Turbo Console Log, a powerful Visual Studio Code extension, designed specifically for JavaScript and TypeScript. This tool transforms the simplicity of console logging into a streamlined, automated process, turning it into an even more powerful ally in your debugging toolkit.
No more manual typing of console log messages to track variable changes. With Turbo Console Log, all it takes is a selection or a hover over the variable in question, a press of a few keys (ctrl + alt + L for Windows) or (ctrl + option + L for Mac), and presto! An informative log message is automatically inserted on the next line. Especially when debugging multiple variables simultaneously, Turbo Console Log's multi-cursor support proves to be a game-changer, significantly saving your time.
But Turbo Console Log offers more than just inserting log messages. It provides features to comment, uncomment, or delete all log messages with simple shortcuts, alongside extensive customization options. This ensures the extension fits seamlessly into your JavaScript or TypeScript development workflow.
Join a thriving community of JavaScript and TypeScript developers leveraging Turbo Console Log to supercharge their debugging process. Guided by user feedback and a commitment to excellence, Turbo Console Log continues to evolve, aiming to meet your debugging needs more effectively.
So, elevate your debugging game with Turbo Console Log—your essential companion for efficient and effective JavaScript and TypeScript code debugging. Experience the simplicity of logging fused with the power of automation today!
Statistics
Our growth and user acquisition data highlight the effectiveness and utility of Turbo Console Log for developers.
Total Acquisitions: Till date, we've seen an acquisition of 1 092 258 unique users who've added Turbo Console Log to their VS Code extensions, underscoring its popularity and wide acceptance.
Most Recent Total: 100 027 users have joined our community in the last 90 days alone, signalling the rapidly growing interest in our extension.
Our conversion funnel indicates a remarkable conversion rate, suggesting a very high interest and satisfaction level among developers who visit our page and subsequently decide to use Turbo Console Log, the above chart shows the conversion of page views to acquisitions, providing a graphical representation of our growth story. Turbo Console Log's journey till now has been exhilarating, and we are committed to ensuring that this upward trend continues by constantly improving and evolving our extension to meet your needs.
Remember to review the extension in the marketplace to help us understand your experience and continue to improve our services. Your feedback fuels our growth and helps us to make Turbo Console Log even better for you.
Insert a log message
This is one of the fundamental features of the Turbo Console Log extension. To insert a log message, you simply have to select the variable you want to debug or hover over it. The selection can be manual, and this will always override the hover selection. Once you've selected the variable, pressing ctrl + alt + L (Windows) or ctrl + option + L (Mac) will automatically insert a log message in the line following the selected variable.
Example:
Comment inserted log messages
To quickly comment all log messages inserted by Turbo Console Log from your current document, simply press alt + shift + c (Windows) or or option + shift + c (Mac). This feature is useful when you need to disable log messages temporarily without deleting them.
Example:
Uncomment log messages
If you have previously commented out the log messages and want to enable them again, use alt + shift + u (Windows) or option + shift + u (Mac). This command will uncomment all log messages inserted by Turbo Console Log in your current document.
Example:
Delete log messages
Turbo Console Log also provides an easy way to clean up your code by deleting all the log messages it inserted. By pressing alt + shift + d (Windows) or option + shift + d (Mac), all log messages inserted by the extension from the current document will be deleted. This is useful when you've finished debugging and want to remove all the log messages to maintain clean, readable code.
Example:
Correct log messages
The correctAllLogMessages command ensures that all previously inserted log messages remain accurate by updating their file name and line number. This is particularly useful when code is moved or refactored, preventing outdated log references.
To use this command, open the Command Palette(Ctrl + Shift + P on Windows orCmd + Shift + P on Mac), then search forTurbo Console Log: Correct All Log Messagesand execute it. Alternatively, you can use the shortcut:
Option + Shift + X (Mac) orAlt + Shift + X (Windows).
Example:
Custom Prefix
This setting allows you to specify a custom prefix for the log messages inserted by the Turbo Console Log extension. The prefix is placed at the beginning of each log message, helping you identify log statements inserted by the extension, making them more distinguishable in your console.
By default, the prefix is set to the rocket emoji (🚀).
Usage
To modify the prefix setting:
Navigate to the settings in VS Code: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for "Turbo Console Log" and find the logMessagePrefix setting. Enter your desired prefix string into the input field.
In your code:
After setting the prefix, when you select a variable and use the Turbo Console Log key command, a log statement will be inserted into your code with your specified prefix. For example, if you have set the prefix to 👊, the inserted log message would look something like this:
console.log('👊 ~ SelectedVariable:', SelectedVariable);The logMessagePrefix is especially useful to differentiate your debug log messages from regular console logs or logs inserted by other team members.
Custom Suffix
Want your logs to have a distinct ending note? The logMessageSuffix setting is your solution. This attribute lets you add a bespoke touch to your log messages. It appends a custom suffix to each message generated by the Turbo Console Log extension, offering an extra layer of customization.
Usage
Changing the Suffix:
Personalizing the suffix is a breeze. Head to your VS Code settings via File → Preferences → Settings (or Code → Preferences → Settings on macOS). Then, in the search bar, key in "Turbo Console Log". Find the logMessageSuffix setting and type in your preferred suffix. Navigate to the settings in VS Code: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for "Turbo Console Log" and find the logMessageSuffix setting. Enter your desired prefix string into the input field.
Experience in Code:
After you've tailored your suffix, it comes into play each time you generate a log message with Turbo Console Log. For instance, if "EndLog" is your chosen suffix, your log statement will appear as follows:
console.log('🚀 ~ SelectedVariable EndLog', SelectedVariable);Using logMessageSuffix breathes personality into your logs. It's especially beneficial when you're navigating through large-scale projects or collaborating on a shared codebase. With a unique suffix, your debug messages stand out from the crowd. Should you leave this setting untouched, the suffix defaults to a colon (:).
Log Function Type
The logType setting allows you to define the type of log function used in your automated log messages. You can adjust this setting to use various logging methods such as "log", "warn", "error", "debug", or "table" based on your debugging needs.
Usage
To modify the Log Type setting:
Go to the settings in VS Code: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for "Turbo Console Log" and find the logType setting. Choose your desired logging method from the dropdown menu.
In your code:
Once you've adjusted your log type, Turbo Console Log will use your selected log function in the log messages it creates. For example, if you have selected "warn" as your log type, the inserted log message might resemble this:
console.warn('🚀 ~ SelectedVariable:', SelectedVariable);The logType setting grants you a more flexible approach to logging, letting you select the function that best aligns with your current debugging scenario. Whether you need simple logs, warnings, errors, debug information, or even tabular data, Turbo Console Log has got you covered!
Log Function Name
The logFunction setting gives you the ability to specify a custom log function to use instead of the default console.log. This is especially helpful when you have a specific logging utility function in your project that you'd like to use for these automated log messages.
Usage
To modify the Log Function setting:
Head to the settings in VS Code: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for "Turbo Console Log" and find the logFunction setting. Enter the name of your custom log function into the input field.
In your code:
After setting the function name, when you use the Turbo Console Log command, it will insert your custom log function in the generated log statements. For instance, if you've defined a function called "myCustomLogger", the inserted log message would look like this:
myCustomLogger('🚀 ~ SelectedVariable:', SelectedVariable);The logFunction setting is particularly useful when you need to use a project-specific logging utility function for your automated log messages. Keep in mind that if no function name is specified, the default "console.log" will be used.
Custom delimiter
The delimiterInsideMessage setting offers you the flexibility to choose a custom delimiter that separates different elements within the log message, like the filename, line number, class, function, and variable.
Usage
To modify the Custom Delimiter setting:
Navigate to VS Code settings: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for "Turbo Console Log" and locate the delimiterInsideMessage setting. Enter the character(s) you'd like to use as a delimiter into the input field.
In your code:
Once you've defined the delimiter, it will be used in the inserted log messages. For example, if you've set the delimiter to " - ", the log message would appear as follows:
console.log('🚀 - SelectedVariable:', SelectedVariable);The delimiterInsideMessage setting is a powerful tool that allows you to customize the log messages to suit your coding style or the project's conventions. Remember, if no delimiter is provided, the default one is '~'.
Custom quote
Turbo Console Log offers the possibility to choose the type of quote to use in your log messages with the quote setting. This feature enables a smoother integration with your current coding style or project's conventions.
Usage
To modify the Custom Quote setting:
Navigate to VS Code settings: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for "Turbo Console Log" and locate the quote setting. Choose the preferred type of quote (double quotes, single quotes, or backtick) from the dropdown menu.
In your code:
Once you've chosen the quote type, it will be reflected in your log messages. For instance, if you select single quotes, the log message would look like this:
console.log('🚀 ~ SelectedVariable:', 'SelectedVariable');The quote setting provides additional customization options, allowing you to ensure that the log messages generated by Turbo Console Log align with your codebase;'s style and formatting guidelines. The default quote type is the double quote (").
Use semicolon
The addSemicolonInTheEnd setting allows you to control whether Turbo Console Log appends a semicolon at the end of the inserted log message. This feature helps to adhere to your personal coding style or your project's style guide.
Usage
To modify the Use Semicolon setting:
Go to the VS Code settings: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for "Turbo Console Log" and locate the addSemicolonInTheEnd setting. Switch the toggle to your desired state.
In your code:
After setting the semicolon usage, when you use the Turbo Console Log key command, the log statement inserted into your code will reflect this setting. For example, if the semicolon setting is enabled, the inserted log message would look something like this:
console.log('🚀 ~ SelectedVariable:', SelectedVariable);By customizing the addSemicolonInTheEnd setting, you can ensure that the log messages generated by Turbo Console Log conform to your coding conventions. The default for this setting is true, meaning that a semicolon will be appended at the end of the log message.
Enclosing class
The insertEnclosingClass setting gives you the ability to include the enclosing class name in the inserted log message. This feature can be incredibly beneficial for quickly discerning the context of the log message without having to track the code execution path.
Usage
To modify the Enclosing Class setting:
Navigate to VS Code settings: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for "Turbo Console Log" and locate the insertEnclosingClass setting. Switch the toggle to your desired state.
In your code:
Once enabled, the Turbo Console Log extension will include the enclosing class name in the inserted log messages. For instance, if you're logging a variable within a class named 'Calculator', the inserted log message would look something like this:
console.log('🚀 ~ Calculator → SelectedVariable:', SelectedVariable);Utilizing the insertEnclosingClass setting can greatly enhance your debugging experience by providing additional context to your log messages. This setting is enabled by default.
Enclosing function
The insertEnclosingFunction setting lets you include the enclosing function name in the log message generated by the Turbo Console Log extension. This can be quite useful for quickly understanding the context of a particular log message, especially in larger codebases with numerous functions.
Usage
To modify the Enclosing Function setting:
Navigate to the settings in VS Code: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for "Turbo Console Log" and find the insertEnclosingFunction setting. Switch the toggle to your preferred state.
In your code:
Once this feature is enabled, the Turbo Console Log extension will automatically include the enclosing function's name in the log message. For instance, if you're logging a variable within a function named 'calculate', the resulting log message might look something like this:
console.log('🚀 ~ calculate → SelectedVariable:', SelectedVariable);The insertEnclosingFunction setting can greatly enhance your debugging efficiency by providing more context for each log message. This setting is enabled by default.
Include file name and line number
The includeFileNameAndLineNum option is a powerful feature that enables you to include the file name and line number of the log message. This can be especially useful when debugging complex codebases, making it easier to trace the origin of specific log messages.
Usage
To modify the Include File Name and Line Number setting:
Navigate to the settings in VS Code: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for "Turbo Console Log" and locate the includeFileNameAndLineNum setting. Switch the toggle to your preferred state.
In your code:
When enabled, the Turbo Console Log extension will include the file name and line number where the log message is generated in the log output. For instance, if you log a variable within 'myComponent.js' at line 42, the output log message would look like this:
console.log('🚀 ~ file: myComponent.js:42 → SelectedVariable:', SelectedVariable);The includeFileNameAndLineNum setting can significantly improve your debugging process by making it much easier to locate the source of each log message. This setting is disabled by default.
Include file name
The includeFilename setting allows you to include the file name in log messages, helping you quickly identify the source of logs. This setting is useful for debugging complex projects where multiple files generate logs, making it easier to trace their origins.
Usage
To enable the Include Filename setting:
Go to VS Code settings: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for includeFilename and toggle it on.
In your code:
Once enabled, Turbo Console Log will add the file name to log messages. Example output:
console.log('🚀 ~ myComponent.js → SelectedVariable:', SelectedVariable);The includeFilename setting enhances debugging by showing the file where logs originate. This setting is disabled by default.
Include line num
The includeLineNum setting allows you to include the line number in log messages, making it easier to pinpoint the exact location of each log message. This is especially useful for debugging complex codebases, Providing accurate tracking of log locations for efficient debugging.
Usage
To enable the Include Line Number setting:
Go to VS Code settings: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for includeLineNum and toggle it on.
In your code:
Once enabled, Turbo Console Log will append the line number to log messages. Example output:
console.log('🚀 ~ :42 → SelectedVariable:', SelectedVariable);Enabling includeLineNum improves debugging by displaying the exact line number where logs are generated. This setting is disabled by default.
Wrap log message
The wrapLogMessage setting is designed to control the formatting of your log messages. When this option is enabled, the Turbo Console Log extension wraps each log message with special separator lines, providing a more distinct visualization.
Usage
To modify the Wrap Log Message setting:
Navigate to the settings in VS Code: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for "Turbo Console Log" and find the wrapLogMessage setting. Switch the toggle to your preferred state.
In your code:
When enabled, each Turbo Console Log output will be wrapped between separator lines for better distinction. For example, if you have a variable named docNavItem, the output log message would look something like this:
console.log('🚀 ~ ----------------------------🚀');
console.log('🚀 ~ docNavItem:', docNavItem);
console.log('🚀 ~ ----------------------------🚀');This setting can make your logs more distinguishable, especially when you're examining numerous log messages. It is disabled by default, providing you with the flexibility to decide whether or not to use it.
Line before log message
The insertLineBeforeLog setting allows you to control the space around your log messages. When enabled, it inserts a new line before each log message, providing extra clarity and separation in your console output.
Usage
To modify the Insert Line Before Log setting:
Navigate to the settings in VS Code: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for "Turbo Console Log" and find the insertLineBeforeLog setting. Switch the toggle to your preferred state.
In your code:
When enabled, Turbo Console Log will insert a blank line before each log statement. This option helps to visually distinguish each Turbo Console Log message in your console output.
console.log('🚀 ~ variableName:', variableName);This setting can help in managing console clutter, especially in cases where you are debugging multiple variables or tracking the flow of data through various parts of your application. The Insert Line Before Log setting is disabled by default.
Line after log message
The insertLineAfterLog setting allows you to control the space around your log messages. When enabled, it inserts a new line after each log message, providing extra clarity and separation in your console output.
Usage
To modify the Insert Line After Log setting:
Navigate to the settings in VS Code: File → Preferences → Settings (or Code → Preferences → Settings on Mac). Search for "Turbo Console Log" and find the insertLineAfterLog setting. Switch the toggle to your preferred state.
In your code:
When enabled, Turbo Console Log will insert a blank line after each log statement. This option helps to visually distinguish each Turbo Console Log message in your console output.
console.log('🚀 ~ variableName:', variableName);
This setting can help in managing console clutter, especially in cases where you are debugging multiple variables or tracking the flow of data through various parts of your application. The Insert Line After Log setting is disabled by default.