console-debug-pro

Console Debug Pro 🚀

An advanced debugging utility that transforms your console.log into clickable file links directly in your terminal.
Stop wasting time searching for your code — just click and go straight to the line in VS Code.

NPM · Documentation · Demo

🚀 About

Console Debug Pro automates the process of finding the origin of your console.log statements by adding file names and line numbers as clickable links right in your terminal. This makes your debugging workflow up to 10x faster.

📸 Demo

Click on the line number in the terminal → the file opens directly in VS Code!

✨ Features

• Clickable Logs — Open files and line numbers from your terminal directly in VS Code.
• Short Path Mode — Shows only the last folder and file name.
• Auto Snippet Installation — Insert a console.log with file & line number by typing cs.
• Colored Output — Path in yellow, line number in blue.
• Command Shortcuts:
  • cd → Inserts console.log('DeBug--- line 181:', ) with line number.
  • cf → Inserts debug.logn() that also opens file & line number instantly.
• Universal Compatibility — Works with Node.js, React, Vue, Angular, Next.js, Express, etc.
• Ultra-Lightweight — No performance overhead.
• Customizable — Change the log prefix to fit your style.
• Error-Safe — Falls back to native console.log if something goes wrong.

💻 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

📦 Installation

npm install console-debug-pro --save-dev

🛠️ Usage

1. Import it into your project

import debug from 'console-debug-pro';
// Or for CommonJS
const debug = require('console-debug-pro');

2. Use it like console.log

debug.log('This is my message.');
// Output: DeBug---> controllers/postController.js --> 174:1 This is my message.

console.log('DeBug--- line 181:', 'This is my message.');
// Output: DeBug--->174:1 This is my message.

const user = { id: 1, name: 'John' };
debug.log('User object:', user);
// Output: DeBug---> controllers/postController.js --> 174:1 User object: { id: 1, name: 'John' }

3. Use Auto-Snippet in VS Code

• Type cs and press Tab — inserts: debug('DeBug--- line X:', );
• Shortcuts table:

Shortcut    Description
cd          Inserts console.log with line number
cf          Inserts debug.logn() that opens file in VS Code

🗺️ Roadmap

• Support for additional themes and color options.
• Snippet support for WebStorm.
• Add support for log levels (info, debug, trace).

🔗 Links

🤝 Contributing

Contributions are always welcome!

• If you'd like to make improvements, please create a Pull Request. For any bugs or feature requests, please create an Issue.

• GitHub: Samyy-decod

🧑‍💻 Author

• GitHub: codingyaari