ComponentLocator

Click straight from your running app to your code.

Hold Alt (Option on Mac) while hovering yoement under the cursor is highlighted withits component name and source file. Alt+click opens that file in your editor at the exact line.

WORKS WITH YOUR FRAMEWORK — AUTOMATICALLY ComponentLocator detects how your app was ategy, with zero configuration:

✔ Next.js — App Router and Pages Router, W8 & 19, Server Components (labeled with a"server" badge) ✔ React without Next.js — Vite, Create Rea ✔ Vue 2 & 3 — exact line/column when vite-plugin-vue-inspector or Vue DevTools is present ✔ Svelte 3/4/5 and SvelteKit — exact line/ ✔ Astro — .astro templates and framework islands

WHY THIS EXTENSION Tools built on React's old _debugSource fit 19 and Next.js App Router. This extension reads React 19's new owner stacks (_debugStack) and resolves original source positions through the dev serveown source-map endpoints (Next.js) or the Vite) — and uses each framework's nativedev metadata for Vue, Svelte and Astro.

HOW IT OPENS YOUR EDITOR By default it auto-detects the dev server't.js, Vue CLI, Nuxt, Create React App) —the same mechanism as the framework's error overlay — so it respects your REACT_EDITOR / EDITOR environment variable. Or configure a custom URL schemef, or JetBrains IDEs.

PRIVACY & SCOPE Runs only on localhost / 127.0.0.1 development servers. No data is collected, stored remotely, or transmitted anywhere. Development use only: production.

USAGE

1. Run your app's dev server (next dev, vite, npm run dev…)
2. Open http://localhost:<port>
3. Hold Alt and hover — Alt+click to open the source