ConsoleSense 🔍

Real-time console.log preview and intelligent debugging assistant for Visual Studio Code

Stop switching between your editor and browser console. ConsoleSense brings console output directly into your code editor with intelligent hover previews, inline output visualization, and smart navigation features.

✨ Features

🎯 Hover Preview

Hover over any console.log() statement to instantly see what it will output - actually evaluated, not just variable names!

const name = "Alice";
const age = 25;
console.log(name + " is " + age); // Hover → Shows: "Alice is 25" ✅

👻 Inline Ghost Text

Enable inline previews to see evaluated results right next to your console statements as you type.

const score = 85;
console.log(score * 1.2); // → 102 (appears as ghost text)

🎯 Go To Definition

Click on variables inside console.log statements to jump directly to their declarations - no intermediate menus!

const user = { name: "Bob" }; // ← Jumps here
console.log(user); // Cmd+Click "user"

📊 Console Table Visualizer

Hover over console.table() to see beautiful formatted tables, or open a full webview panel.

const users = [
  { name: "Alice", age: 25, role: "Developer" },
  { name: "Bob", age: 30, role: "Designer" }
];
console.table(users); // Hover → See formatted table!

📺 Live Console Panel

View all console statements in your current file in a sidebar panel with real-time evaluated output.

• Click any entry to jump to that line
• See evaluated output for each log
• Updates automatically as you type
• Color-coded by console method

📊 Workspace Statistics

Analyze your entire project to find and manage console statements.

• See which files have the most console statements
• Export statistics to CSV
• Visual breakdown by console method
• One-click navigation to files

🧹 Smart Analysis

• Duplicate Detection: Identifies repeated console.log statements
• Empty Log Warning: Flags console.logs with no content
• Production Code Alerts: Warns about logs in production paths
• Quick Cleanup: Remove all console statements with one command

🚀 Installation

From Source (Development)

1. Clone and setup:

git clone https://github.com/raredevv/console-sense.git
cd console-sense
npm install

2. Install type definitions:

npm install --save-dev @types/babel__traverse @types/babel__core

3. Compile TypeScript:

npm run compile

4. Run in VS Code:

• Press F5 to open Extension Development Host
• Open a JavaScript/TypeScript file
• Hover over console.log statements to see previews!

From VSIX Package

1. Package the extension:

npm install -g @vscode/vsce
vsce package

2. Install in VS Code:

• Go to Extensions view (Cmd+Shift+X / Ctrl+Shift+X)
• Click ... → Install from VSIX
• Select console-sense-0.0.1.vsix

⚙️ Configuration

Open VS Code Settings (Cmd+, / Ctrl+,) and search for "ConsoleSense":

🎮 Commands

Access via Command Palette (Cmd+Shift+P / Ctrl+Shift+P):

💡 Usage Examples

Basic Evaluation

// ✅ Variables resolved correctly
const greeting = "Hello World";
console.log(greeting); // Hover → "Hello World"

// ✅ Expressions actually evaluated
const price = 29.99;
console.log(price * 2); // Hover → 59.98 (NOT "price * 2")

// ✅ Template literals work
const name = "Alice";
console.log(`Hello ${name}!`); // Hover → "Hello Alice!"

Objects and Arrays

// ✅ Object inspection
const user = { name: "Alice", age: 30 };
console.log(user); // Hover → { name: "Alice", age: 30 }

// ✅ Array operations
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // Hover → 5
console.log(numbers[0] * 10); // Hover → 10

Complex Expressions

const items = [
  { name: "Book", price: 20 },
  { name: "Pen", price: 5 }
];

console.log(items[0].name); // Hover → "Book"
console.log(items[0].price * 2); // Hover → 40

🔧 How It Works

ConsoleSense uses several technologies:

1. @babel/parser - Parses JavaScript/TypeScript code into an AST
2. @babel/traverse - Traverses AST to find console statements
3. vm2 - Safely evaluates expressions in a sandboxed environment
4. VS Code API - Provides hover, decoration, and navigation features

What Works ✅

• Simple variables: const x = 5; console.log(x);
• Objects and arrays: const obj = {a: 1}; console.log(obj);
• Expressions: console.log(x + y * 2);
• Array/object access: console.log(arr[0], obj.name);
• Template literals: console.log(`Hello ${name}`);
• Mathematical operations: console.log(Math.max(1, 2, 3));
• Boolean logic: console.log(true && false);

What Doesn't Work ❌

• Imported variables: import {x} from './file';
• API responses: fetch().then(r => console.log(r));
• Async operations: await somePromise
• Functions with side effects
• Browser/Node globals: console.log(window, process)

📈 Performance

• Hover: Instant response
• Inline Preview: 500ms debounce for smooth editing
• Live Console: Updates every 500ms
• Workspace Scan: Processes ~100 files/second
• Memory: <50MB for typical projects

🐛 Troubleshooting

Variables showing as undefined

Solution: Make sure variables are declared BEFORE the console.log statement in the same file.

console.table() not detected

Solution: Ensure proper syntax: console.table(variable) - avoid complex expressions.

Go-to-definition not working

Solution: The variable must be declared in the same file (imported variables not supported yet).

🔮 Future Features

• [ ] Multi-file Analysis: Track variables across imports
• [ ] TypeScript Type Inference: Show type information
• [ ] AI Explanations: Natural language explanations of logs
• [ ] Smart Suggestions: Recommend better logging practices
• [ ] Performance Metrics: Track console.log performance impact
• [ ] Breakpoint Integration: Set breakpoints from console panel
• [ ] Custom Themes: Customize colors and styles

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

MIT License - see LICENSE file for details

🙏 Acknowledgments

• Built with TypeScript
• Powered by @babel/parser
• Sandboxed execution via vm2
• Made for Visual Studio Code

📞 Support

Found a bug? Have a feature request?

• 🐛 Report Issues
• 💡 Request Features
• 📖 Documentation
• ⭐ Star on GitHub

🎯 Quick Start

1. Install the extension
2. Open a JS/TS file
3. Hover over a console.log → See the magic! ✨
4. Press Cmd+Shift+P → Try "Toggle Inline Preview"
5. Check the sidebar → Find "Live Console" panel

Happy Debugging! 🚀

Made with ❤️ for developers who love clean, efficient debugging