🚀 Console Debug Pro — VS Code Extension
Supercharge your debugging in VS Code!
This extension lets you instantly insert smart, colorful, and clickable console and debug statements with just a few keystrokes.
Stop wasting time finding the source of your logs — jump directly to the file and line number with a click.
📸 Demo Preview
Click on the log link in your terminal or use snippet shortcuts like cf or cd to instantly insert smart debug lines!
🤔 What Does This Extension Do?
Console Debug Pro (VS Code Extension) is a productivity booster that gives developers:
- Smart debugging shortcuts (
cf, cd)
- Automatic log insertion with file name and line number
- Colored console output
- Clickable paths that open directly in VS Code!
Now you can focus on logic, not on searching where your log came from.
✨ Features
✅ Quick Snippet Shortcuts
cf → Inserts debug.log()cd → Inserts console.log('🚀DeBug--- line 181:', )
✅ Clickable Logs — Click on file paths in the terminal to open the exact file + line in VS Code
✅ Colored Output — File path in yellow, line number in blue
✅ Short Path Mode — Shows only the folder and file name, not full directory path
✅ Cross-Platform — Works on Windows, macOS, and Linux
✅ Zero Configuration — Works instantly after install
✅ Lightweight & Safe — No performance impact, no extra dependencies
✅ Clickable Logs — Open files and line numbers from your terminal directly into VS Code.
✅ Clickable File Paths — Open files in VS Code at the exact line & column.
✅ Short Path Mode — Shows only the last folder and file name instead of long paths
✅ Auto Snippet Installation — Instantly insert a console.log with file and line number by typing cs.
✅ Colored Output — Path in yellow, line number in blue for better readability.
✅ Universal Compatibility — Works with Node.js, React, Vue, Angular, Next.js, Express, and all major frameworks.
✅ Ultra-Lightweight — Only in size, adding no overhead to your project.
✅ Customizable — Change the log prefix to fit your preferences.
💻 Supported Frameworks
Frontend: React, Vue, Angular, Svelte, Next.js, Nuxt.js, Remix
Backend: Node.js, Express, NestJS, Fastify, Koa, AdonisJS
Full-Stack: Meteor, Blitz.js, Redwood.js
🧠 How It Works
1️⃣ Snippet Shortcuts
Just type:
cf → expands to debug.log($1);cd → expands to console.log('🚀DeBug--- line ${TM_LINE_NUMBER}:', $1);
Then press Enter / Tab to insert the log.
🛠️ Usage:
2️⃣ Debug Log Functionality
If you use the optional npm library console-debug-pro,
then the debug.log() statements become clickable — opening the file and line directly in VS Code!
const debug = require("console-debug-pro");
debug.log("User data:", user);
// 🚀DeBug---> controllers/user.js --> 27:5 User data: { name: "John" }
// Short usage
console.log('DeBug--- line 181:','This is my message.' );
// Output: DeBug--->174:1 This is my message.
// With variables
const user = { id: 1, name: 'John' };
debug.log('User object:', user);
// Output: DeBug---> controllers/postController.js --> 174:1 User object: { id: 1, name: 'John' }
// Type 'cf' and press Enter
debug.log("API response:", response);
// Or type 'cd' and press Enter
console.log('🚀DeBug--- line 45:', data);
3. Use the Auto-Snippet in VS Code (The Magic ✨)
It works just like a normal console.log.
- Type cs and press Tab.
- It will automatically insert: debug('DeBug--- line X:', );
Shortcut Description
`cd` Inserts `console.log('DeBug--- line 181:', )` with line number.
`cf` Inserts `debug.logn()` that also opens file & line number in VS Code instantly.
🧑💻 Author
🤝 Contributing
Contributions are always welcome!
