Item logo image for ComponentLocator

ComponentLocator

Item media 5 (screenshot) for ComponentLocator
Item media 1 (screenshot) for ComponentLocator
Item media 2 (screenshot) for ComponentLocator
Item media 3 (screenshot) for ComponentLocator
Item media 4 (screenshot) for ComponentLocator
Item media 5 (screenshot) for ComponentLocator
Item media 1 (screenshot) for ComponentLocator
Item media 1 (screenshot) for ComponentLocator
Item media 2 (screenshot) for ComponentLocator
Item media 3 (screenshot) for ComponentLocator
Item media 4 (screenshot) for ComponentLocator
Item media 5 (screenshot) for ComponentLocator

Overview

Alt-click any element in your dev app to open its component source in your editor. Auto-detects Next.js, React, Vue, Svelte, Astro.

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

Details

  • Version
    1.1.6
  • Updated
    July 20, 2026
  • Offered by
    Fortunato De Angelis
  • Size
    37.82KiB
  • Languages
    English
  • Developer
    Email
    deangelis.fortunato@me.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

Related

InstaVue - debug VueJS app in an instant

5.0

InstaVue just like a x-ray for VueJS application, allows you to see components and its data in just one click. Even in production.

React code finder

4.2

Chrome extension for React Developer

Local UI Source Inspector

5.0

Inspect local Vite UI source, matched CSS, and JS listeners, then copy context for Codex or open files in VS Code.

React Inspector

3.3

The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily.

Agentation Vue

5.0

Turn UI annotations into coding-agent instructions. Click any element, add a note, and paste into any AI tool.

React + State Inspector

5.0

Inspect React (v15+) components visually and view/edit Redux and React Query state live from a DevTools panel.

Inspector Lab - DevTools

5.0

A movable in-page DevTools window for any browser, even iPad: DOM Inspector, Elements, Console, Network, Sources, Cookies, Storage.

StyleGrab — Inspect & Copy CSS

5.0

Hover any element, copy its CSS as CSS, Tailwind, JSX, styled-components, Vue or Svelte. 100% local. Zero data collection.

LocatorLabs — Smart Locator Generator

4.9

Generate reliable, accessibility-first element locators for test automation, right inside Chrome DevTools.

Next.js SSR DevTools

0.0

Chrome DevTools panel for inspecting Next.js SSR fetch calls.

Open Headers

5.0

Open Source DevToolkit, inside a browser extension. Modify live browser requests. Manage API Collections. Team Collaboration.

Tweakr

5.0

Stop digging through files. Hover over any element, edit it visually, and watch your source code update instantly.

InstaVue - debug VueJS app in an instant

5.0

InstaVue just like a x-ray for VueJS application, allows you to see components and its data in just one click. Even in production.

React code finder

4.2

Chrome extension for React Developer

Local UI Source Inspector

5.0

Inspect local Vite UI source, matched CSS, and JS listeners, then copy context for Codex or open files in VS Code.

React Inspector

3.3

The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily.

Agentation Vue

5.0

Turn UI annotations into coding-agent instructions. Click any element, add a note, and paste into any AI tool.

React + State Inspector

5.0

Inspect React (v15+) components visually and view/edit Redux and React Query state live from a DevTools panel.

Inspector Lab - DevTools

5.0

A movable in-page DevTools window for any browser, even iPad: DOM Inspector, Elements, Console, Network, Sources, Cookies, Storage.

StyleGrab — Inspect & Copy CSS

5.0

Hover any element, copy its CSS as CSS, Tailwind, JSX, styled-components, Vue or Svelte. 100% local. Zero data collection.

Google apps