VarLens is a powerful Visual Studio Code extension that transforms your debugging experience by providing variable inspection and persistent state tracking across debugging sessions. 🚀
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
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:
🤝 Sharing Debug States Demo
See how to share debug states with your team:
🌟 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
Install the extension from VS Code Marketplace
Start a debug session in your JavaScript/TypeScript project
Add breakpoints where you want to capture variable states
Once the debug session ends, variable values are automatically cached
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
Debugging Complex Objects
Hover over variables to quickly peek at values
Use the inspector for detailed exploration of large objects
State Tracking
Track variable values across different function calls
Understand how values change throughout your code
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
