Pretty Log

A VS Code extension for quickly adding styled console.log statements to your code with distinctive emoji markers. Make your debugging more visual and organized! And No more staring into the cluttered log output to find that one variable, use JSON formatting to add proper indentation to your logs.

Usage

1. Select or place the cursor near any variable or expression in your code.
2. Use one of the keyboard shortcuts:
   • Press alt + / (or option + / on Mac) for basic logging.
   • Press alt + ' (or option + ' on Mac) for JSON formatted log outputs. Useful for arrays and nested objects.
   • Press alt + 1 for Debug log.
   • Press alt + 2 for Error log.

Preview

Screenshots

Why Pretty Log?

✅ JSON Formatting: Beautiful JSON output with proper indentation for arrays and objects.

✅ Visual Markers: Easily spot your logs with distinctive emoji markers.

✅ Source Tracking: Quickly locate the source of logs with file names and line numbers.

✅ Code Friendly: Preserves your code's indentation and formatting.

✅ Quick Access: Simple keyboard shortcuts for different logging styles.

✅ Customizable Output: Choose what to display in your logs!

Features

• Quick console.log insertion with distinctive emoji markers 🧑‍💻 🛑
• File name and line number tracking for easy debugging
• JSON.stringify formatting with proper indentation
• Preserves your code's indentation
• Quick Logging shortcuts:
  • alt + / : Basic console.log with filename and line no, and emoji markers
  • alt + ' : JSON.stringify with formatting, helpful to view nested data.

Customization

You can customize the log output by choosing whether to include the variable name, file name, and line number in your logs or not. By default all the options will be enabled.

1. Open the VS Code Settings:
   • Press Cmd + Shift + P (Mac) or Ctrl + Shift + P (Windows/Linux).
   • Type "Preferences: Open Settings (UI)" and select it.
2. In the search bar, type "Pretty Log".
3. Select the options you like

Example 1: Basic Logging

// Your code
const user = { name: 'John', age: 30 };
user  // <- have the cursor anywhere in the word and press alt + /


console.log('🧑‍💻app.js:2=>', user, '<===🛑');
// Output in your console: 
🧑‍💻app.js:2=> { name: 'John', age: 30 } <===🛑

Example 2: JSON Stringified Logging

// Your code
const user = { name: 'John', age: 30 };
user  // <- select this and press alt + '


console.log('🧑‍💻app.js:2=>', JSON.stringify(user, null, 2), '<===🛑');
// Output in your console
/*

🧑‍💻app.js:2=> {
  "name": "John",
  "age": 30
} <===🛑

*/

Example 3: Debug Logging

// Your code
const isAuthenticated = false;
isAuthenticated  // <- have the cursor anywhere in the word and press alt + 1


console.debug('🐞 DEBUG app.js:2👉', isAuthenticated, '👈 🛑');
// Output in your console: 
🐞 DEBUG app.js:2👉 false 👈 🛑

Example 4: Error Logging

const errorMessage = "Invalid user credentials";
errorMessage  // <- have the cursor anywhere in the word and press alt + 2


console.error('❌ ERROR app.js:2👉', errorMessage, '👈 🛑');
// Output in your console: 
❌ ERROR app.js:2👉 Invalid user credentials 👈 🛑