QuickLog

Fast debug logging for JavaScript/TypeScript: select variables or expressions and insert logs under the current line.

All logs inserted by QuickLog are visually highlighted in the editor and tagged with a special marker (default: // ql), allowing for easy identification and bulk removal.

Features & Usage

1. Insert Log (Fast Path)

Inserts a log using the last used type (defaults to console.log).

1. Select a variable or place the cursor on a word.
2. Press Ctrl+Shift+L (macOS: Cmd+Shift+L).

2. Pick Log Type

Choose a specific log type (log, warn, error, table, dir, trace, debug).

1. Select a variable.
2. Press Ctrl+Alt+L (macOS: Cmd+Alt+L).
3. Select the desired type from the dropdown.

3. Code Actions (Quick Fix)

You can also use the native VS Code "Lightbulb" menu:

1. Select text.
2. Press Ctrl+. (or Cmd+.).
3. Select "QuickLog: console.log(...)" or other variants.

4. Remove All Logs

Instantly delete all log lines in the current file that match the QuickLog marker.

• Command: QuickLog: Remove all logs in file

5. Toggle Visibility (Dim Logs)

If the logs are distracting, you can visually "dim" them (reduce opacity) without deleting them.

• Command: QuickLog: Toggle Log Visibility (Dim/Show)
• Shortcut: Ctrl+Alt+V

6. Cycle Log Type

Quickly switch the stored "last used" log type (e.g., from log to warn to error) without opening the menu.

• Command: QuickLog: Cycle log type

Examples

Variable Logging

Before:

const isSelected = event.target.checked;

After (with default // ql marker):

const isSelected = event.target.checked;
console.log('IS_SELECTED', event.target.checked); // ql

Expression Logging

QuickLog tries to smartly parse assignments. Selection: const total = price * qty; Result: console.log('TOTAL', total); // ql

Multi-cursor Support

Place multiple cursors on different variables and run the insert command. QuickLog will generate log lines for all of them simultaneously.

Configuration

You can customize QuickLog in your VS Code settings.json:

Commands List