console-debug-pro
Advanced tools
+1
-1
| { | ||
| "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 @@ | ||
|  | ||
| <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> | ||
| [](https://www.npmjs.com/package/console-debug-pro) | ||
@@ -25,26 +14,40 @@ [](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! | ||
|  | ||
|  | ||
| ____________________________________________________________________________________ | ||
| ## π€ 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 | ||
| [](https://instagram.com/codingyaari) | ||
| [](https://x.com/codingyaari) | ||
| [](https://www.facebook.com/profile.php?id=61579800007414) | ||
| [](https://www.youtube.com/@codingyaari) | ||
| [](https://stackoverflow.com/users/31368342/codingyaari) | ||
| [](https://www.npmjs.com/~codingyaari) | ||
| ## π€ Contributing | ||
@@ -108,0 +118,0 @@ Contributions are always welcome! |
Sorry, the diff of this file is not supported yet
122
8.93%5098613
-0.3%8
-11.11%