Console Random Color

A VS Code extension that inserts console.log statements with random background colors for better visibility in browser developer tools.

Features

• Random Color Generation: Each inserted console.log gets a unique background color from a predefined palette
• Smart Text Handling:
  • With selected text: Uses the selected variable name in the log statement
  • Without selection: Inserts a snippet with placeholders for quick editing
• Styled Output: Logs include padding, white text, and clean CSS styling
• Keyboard Shortcut: Quick insertion with Ctrl+Shift+Alt+L (Windows/Linux) or Cmd+Shift+Option+L (macOS)

Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
3. Search for "console-random-color"
4. Click Install

Manual Installation

1. Download the .vsix file from releases
2. In VS Code, go to Extensions view
3. Click "..." menu → "Install from VSIX..."
4. Select the downloaded file

Usage

Command Palette

1. Select text (optional) - the variable you want to log
2. Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
3. Type "Insert Console Log with Random Color"
4. Press Enter

Keyboard Shortcut

1. Select text (optional)
2. Press Ctrl+Shift+Alt+L (Windows/Linux) or Cmd+Shift+Option+L (macOS)

Examples

With selected text userData:

console.log('%c userData: ', 'background:#b643b6;color:white;padding:5px 10px;', userData);

Without selection (inserts placeholders):

console.log('%c  >> ', 'background:#a28004;color:white;padding:5px 10px;', );
// Cursor positioned at first placeholder

Extension Settings

This extension does not currently contribute any settings.

Release Notes

See CHANGELOG.md for version history and updates.

Contributing

Feel free to submit issues and pull requests on the

• GitHub
• Telegram

License

This extension is licensed under the MIT License.

Enjoy more visible console logs!