Skip to content

Latest commit

 

History

History
100 lines (72 loc) · 3.52 KB

README.md

File metadata and controls

100 lines (72 loc) · 3.52 KB

VarLens 🔍 - Debug Smarter, Code Faster

VarLens is a powerful Visual Studio Code extension that transforms your debugging experience by providing variable inspection and persistent state tracking across debugging sessions.

🎥 Demo

Watch VarLens in action:

VarLens Demo

🤝 Sharing Debug States Demo

See how to share debug states with your team:

VarLens Sharing Demo

🌟 Features

1. Smart Variable Inspection

  • Hover Intelligence: Simply hover over any variable to instantly see its value
  • Context-Aware: Understands variable scope and maintains accurate values across different code blocks
  • Rich Visualization: View complex objects and arrays in a formatted JSON structure
  • Complete Parameter Tracking: Capture and inspect function parameters across all scopes

2. Advanced Variable Inspector

  • Interactive JSON Viewer: Click the 🔍 icon to open a dedicated panel with a full-featured JSON editor
  • Side-by-Side View: Inspect variables in a separate panel while keeping your code in view
  • Tree Navigation: Easily explore nested objects and arrays with collapsible tree view

3. Debug Session Memory

  • Persistent State: Variables values are cached and preserved across debugging sessions
  • Scope Recognition: Maintains variable values with respect to their scope chains
  • Automatic Tracking: No configuration needed - just debug as usual!

4. Share Debug States

  • Export Debug States: Save your debug session data to share with team members
  • Import Debug States: Load debug states from other developers
  • Cross-Project Support: Use debug data across different projects

🚀 Getting Started

  1. Install the extension from VS Code Marketplace
  2. Start a debug session in your JavaScript/TypeScript project
  3. Add breakpoints where you want to capture variable states
  4. Once the debug session ends, variable values are automatically cached
  5. Hover over variables to see their values, even after the debug session

💡 Usage Example

function calculateTotal(items, taxRate = 0.1) {  // Both parameters are now tracked!
    const total = items.reduce((sum, item) => sum + item.price, 0);
    const tax = total * taxRate;  // Hover over 'total', 'tax', or 'taxRate' to see values!
    return total + tax;
}

🔧 Supported Languages

  • JavaScript
  • TypeScript

🎯 Use Cases

  1. Debugging Complex Objects

    • Hover over variables to quickly peek at values
    • Use the inspector for detailed exploration of large objects

  2. State Tracking

    • Track variable values across different function calls
    • Understand how values change throughout your code

  3. Code Review

    • Review code with actual runtime values
    • Understand variable states without running the debugger

⚙️ Requirements

  • Visual Studio Code version 1.96.0 or higher
  • Node.js debugging support enabled

📝 Notes

  • Variable values are cached in a .varlens file in your workspace
  • Cache is automatically cleaned up when needed
  • Supports both simple and complex data types

🤝 Contributing

We welcome contributions! Feel free to:

  • Report bugs
  • Suggest features
  • Submit pull requests

📬 Support & Feedback

📄 License

Proprietary License

Made with ❤️ by Ubaid Manzoor