Local UI Source Inspector

About

Local UI Source Inspector helps frontend developers jump from a local Vite page to the source code behind the selected UI.

Turn on Inspect Mode, hover or click an element on localhost, and the extension shows the source context for that UI area: component or tag name, file path, line, column, rendered size, matched CSS rules, and JavaScript listener locations when available.

The extension is designed for local development workflows. It works with a companion Vite plugin that injects source metadata only while the dev server is running. Your source files are not modified, and production builds are not affected.

Main features:
- Inspect UI elements on localhost, 127.0.0.1, or [::1]
- Highlight and pin selected elements
- Add multiple selected elements with Shift/Ctrl click
- Show React component or HTML tag source location
- Show matched CSS rules from separate CSS files
- Show JavaScript listener source locations when available
- Copy selected source context
- Copy a structured prompt for Codex with layout, styles, matched CSS, and listener context
- Open the selected source location in VS Code
- Includes English and Vietnamese UI text

Project support:
- React/Vite projects
- Vite projects using separate HTML, CSS, and JavaScript files
- Local development pages served from localhost

Setup requires installing vite-plugin-react-source-locator in the target Vite project and restarting the dev server. The extension popup includes copy-ready setup snippets for React/Vite and plain HTML/CSS/JS Vite projects.