Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement β†’
Sign In

console-debug-pro

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

console-debug-pro - npm Package Compare versions

Comparing version
1.0.21
to
1.0.22
+1
-1
package.json
{
"name": "console-debug-pro",
"version": "1.0.21",
"version": "1.0.22",
"description": "Clickable console.log with file:line:col and VS Code snippet auto-setup",

@@ -5,0 +5,0 @@ "main": "index.js",

+67
-57

@@ -1,21 +0,10 @@

![Demo](./assets/github.png)
<img src="/assets/github.png" >
<p align="center">
<h1 align="center">Console Debug Pro πŸš€ </h1>
<h1 align="center">
<img src="https://github.com/codingyaari/console-debug-pro/blob/main/assets/npm.png" alt="console-debug-pro" width="700">
</h1>
# πŸš€ 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.
<p align="center">
An advanced debugging utility that transforms your <code>console.log</code> into clickable file links directly in your terminal.<br/>
Stop wasting time searching for your code β€” just click and go straight to the line in VS Code.
<br/>
<br/>
<a href="https://www.npmjs.com/package/console-debug-pro">NPM</a>
Β·
<a href="#">Documentation</a>
Β·
<a href="#">Demo</a>
</p>
</p>
[![NPM Version](https://img.shields.io/npm/v/console-debug-pro?style=for-the-badge)](https://www.npmjs.com/package/console-debug-pro)

@@ -25,26 +14,40 @@ [![NPM Downloads](https://img.shields.io/npm/dt/console-debug-pro?style=for-the-badge)](https://www.npmjs.com/package/console-debug-pro)

---
## πŸš€ About
Console Debug Pro automates the process of finding the origin of your <code>console.log</code> 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
## πŸ“Έ Demo Preview
Click on the line number in the terminal β†’ the file opens directly in VS Code!
![Demo](./assets/demo.gif)
![Demo](https://github.com/codingyaari/console-debug-pro/blob/main/assets/demo.gif)
____________________________________________________________________________________
## πŸ€” Why Use This Package?
Developers spend too much time hunting down the source of a `console.log`.
**Console Debug Pro** automates this process. It enriches your log output with the file name and line number, giving you a one-click path straight to the code.
This makes your debugging workflow up to **10x faster**.
_______________________________________________________________________________________
## ✨ 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.
- βœ… **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.
- βœ… **Command Shortcuts:**
- **cd** β†’ Inserts **console.log('DeBug--- line 181:', )** with line number.
- **cf** β†’ Inserts **debug.logn()** that also opens file & line number in VS Code instantly.
- βœ… **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.
- βœ… **Error-Safe** β€” If the package fails, it falls back to native `console.log` without breaking your app.
_______________________________________________________________________________________
## πŸ’» Supported Frameworks
**Frontend:** React, Vue, Angular, Svelte, Next.js, Nuxt.js, Remix

@@ -56,52 +59,59 @@ **Backend:** Node.js, Express, NestJS, Fastify, Koa, AdonisJS

_______________________________________________________________________________________
## πŸ“¦ Installation
**Using npm:**
```bash
npm install console-debug-pro --save-dev
```
_______________________________________________________________________________________
## πŸ› οΈ Usage
**πŸ› οΈ Usage:**
**1. Import it into your project**
```javascript
```bash
import debug from 'console-debug-pro';
// Or for CommonJS
const debug = require('console-debug-pro');
```
**2. Use it like console.log**
```javascript
**2. Usag it:**
It works just like a normal console.log.
```bash
// Basic usage
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.');
// 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' }
```
**3. Use Auto-Snippet in VS Code**
- Type `cs` and press **Tab** β€” inserts: `debug('DeBug--- line X:', );`
- Shortcuts table:
**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:', );
```bash
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.
```
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).
- Support for additional themes and color options.
- Snippet support for WebStorm and other IDEs.
- Add support for log levels (info, debug, trace).
_______________________________________________________________________________________
## πŸ”— Links
[![instagram](https://img.shields.io/badge/instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://instagram.com/codingyaari)
[![x](https://img.shields.io/badge/X-000000?style=for-the-badge&logo=x&logoColor=white)](https://x.com/codingyaari)
[![facebook](https://img.shields.io/badge/facebook-1877F2?style=for-the-badge&logo=facebook&logoColor=white)](https://www.facebook.com/profile.php?id=61579800007414)
[![youtube](https://img.shields.io/badge/youtube-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/@codingyaari)
[![stackoverflow](https://img.shields.io/badge/stackoverflow-F58025?style=for-the-badge&logo=stackoverflow&logoColor=white)](https://stackoverflow.com/users/31368342/codingyaari)
[![npm](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/~codingyaari)
## 🀝 Contributing

@@ -108,0 +118,0 @@ Contributions are always welcome!

Sorry, the diff of this file is not supported yet