ComponentLocator ์ ์์: Fortunato De Angelis
Alt-click any element in your dev app to open its component source in your editor. Auto-detects Next.js, React, Vue, Svelte, Astro.
Androidโข์ฉ Firefox์์ ์ฌ์ฉ ๊ฐ๋ฅAndroidโข์ฉ Firefox์์ ์ฌ์ฉ ๊ฐ๋ฅ
Android์ฉ Firefox์์ ์ด ํ์ฅ ๊ธฐ๋ฅ์ ์ด๋ ค๋ฉด QR ์ฝ๋๋ฅผ ์ค์บํ์ธ์
ํ์ฅ ๋ฉํ ๋ฐ์ดํฐ
์คํฌ๋ฆฐ์ท
์ ๋ณด
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
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
๋ฆฌ๋ทฐ์ด 0๋ช
์ด 0์ ์ผ๋ก ํ๊ฐํจ
๊ถํ ๋ฐ ๋ฐ์ดํฐ
ํ์ ๊ถํ:
- localhost์์ ์ฌ์ฉ์์ ๋ฐ์ดํฐ์ ์ ๊ทผ
- 127.0.0.1์์ ์ฌ์ฉ์์ ๋ฐ์ดํฐ์ ์ ๊ทผ
- 0.0.0.0์์ ์ฌ์ฉ์์ ๋ฐ์ดํฐ์ ์ ๊ทผ
๋ฐ์ดํฐ ์์ง:
- ๊ฐ๋ฐ์๋ ์ด ํ์ฅ ๊ธฐ๋ฅ์ด ๋ฐ์ดํฐ ์์ง์ ์๊ตฌํ์ง ์๋๋ค๊ณ ๋ฐํ๊ณ ์์ต๋๋ค.
์ถ๊ฐ ์ ๋ณด
- ๋ถ๊ฐ ๊ธฐ๋ฅ ๋งํฌ
- ๋ฒ์
- 1.1.5
- ํฌ๊ธฐ
- 41.9 KB
- ๋ง์ง๋ง ์ ๋ฐ์ดํธ
- 4์ผ ์ (2026๋ 7์ 15์ผ)
- ๊ด๋ จ ์นดํ ๊ณ ๋ฆฌ
- ๋ผ์ด์ ์ค
- All Rights Reserved
- ๋ฒ์ ๋ชฉ๋ก
- ๋ชจ์์ง์ ์ถ๊ฐ