Pro Console Logger 🚀

Ninja-fast, Quokka-smart inline logging for VS Code. > The ultimate free tool to visualize your console.log output in real-time.

Pro Console Logger transforms your debugging workflow. Forget checking the terminal or browser console 50 times a minute. We bring the output directly into your editor, next to your code. It's like having the power of Console Ninja or Quokka.js, but lightweight, free, and built for speed.

Real-time Console Ninja Style Logging

⚡ Why Use Pro Console Logger?

If you are tired of context switching between your code and your terminal, this extension is for you.

Better than console.log: See the value instantly without leaving the line you are editing.
Ninja Speed: Optimized for performance. It won't slow down your VS Code like heavier extensions.
Premium UI: Features a "Glass Chip" design that looks native to VS Code, supporting both Dark and Light themes automatically.
Zero Configuration: Just install and save your file. The logs appear like magic.

🚀 Key Features

1. Real-Time Inline Logging

As soon as you save your file (Ctrl+S), the extension executes your code and projects the output right next to the line number.

Supports console.log, console.warn, console.error, and console.info.
Handles Objects and Arrays intelligently (with JSON preview).

2. Smart Error Handling

Don't let bugs hide.

Errors (✖) are highlighted in Red with a distinct gutter icon.
Warnings (⚠) appear in Amber to catch your attention.
Info (ℹ) logs use a subtle Blue to keep your workspace clean.

3. "Glass Chip" Design

We don't just dump text. We render logs inside a beautiful, semi-transparent "chip" that respects your theme's color palette. It feels like a built-in feature of VS Code.

🏁 Getting Started

Install the extension.
Open any .js or .ts file.

Write some code:

const user = { name: "Salek", role: "Developer" };
console.log(user);

Save the file. 5. Look to the right! 👉 [ ➜ {"name":"Salek","role":"Developer"} ]

⚙️ Configuration

Customize the look and feel to match your coding style in VS Code Settings:

Setting	Default	Description
`consoleLogger.enable`	`true`	Turn the extension on/off globally.
`consoleLogger.fontSize`	`0.85em`	Adjust the text size of the inline logs.
`consoleLogger.opacity`	`0.6`	Make the logs subtle or bold.
`consoleLogger.showBackground`	`true`	Toggle the "Glass Chip" background style.

❓ FAQ

Q: Is this similar to Console Ninja? A: Yes! It provides similar inline logging capabilities but focuses on being lightweight and completely free for the essential features you use every day.

Q: Does it work with TypeScript? A: Absolutely. It supports both JavaScript and TypeScript out of the box.

Q: How do I clear the logs? A: You can run the command Console Logger: Clear Logs or simply delete the console statement and save.

⌨️ Shortcuts

Toggle Logging: Ctrl+Alt+L (Windows/Linux) / Cmd+Alt+L (Mac)
Refresh Logs: Ctrl+Shift+L (Windows/Linux) / Cmd+Shift+L (Mac)

🤝 Contributing & Support

Found a bug? Want to add a feature? Check out the GitHub Repository.

Developed with ❤️ by Salek Masud Parvez (parvez.dev)