UX Meter is a developer productivity tool that bridges your React applications running on localhost with your VS Code editor. It allows you to instantly open and edit source files directly from your Chrome browser — streamlining your workflow when debugging or improving user interfaces.
🚀 Features
Browser-to-Editor Bridge: Opens the corresponding source file in VS Code with one click from within Chrome.
Localhost Integration: Works seamlessly with locally hosted React projects (localhost:*).
Real-time Connection: Uses WebSocket communication between the browser and your local environment.
Dev-Friendly Setup: Designed for developers debugging and tuning UX/UI directly in the browser.
Lightweight & Secure: No external services or telemetry — runs fully on your local machine.
🧩 How It Works
UX Meter creates a WebSocket connection between the browser extension and a small local server.
When interacting with elements in your running React app, UX Meter maps DOM elements or components to their source files.
With one click, the file automatically opens in VS Code at the exact line of code.
This tight local integration eliminates the need for manual file lookups, helping you iterate on UI design and functionality faster.
🏗️ Version History
0.0.1
Initial release of UX Meter – WebSocket Edition.
Basic browser–VS Code communication bridge.
Support for localhost React setups.
🧠 Roadmap
Element-to-source mapping via React Fiber tree.
Line and column targeting for precise navigation.
Integration with live-reload or hot module replacement (HMR).
Visual overlay to show mapped elements in-browser.
