Element Dev

Element Dev turns your browser into a component inspector. Click any element on the page and Element Dev tells you exactly which file, line, and component rendered it — no DevTools digging, no guessing. ✨ What you can do • Click an element to see its source file, line number, column, and the rendering component name. • Inspect the full component stack — see how a deep element was built up by nested components. • Switch to the Element Tree view to copy the ancestors, the selected subtree, or the entire page DOM as accessible snapshots. • Copy the file path with one click — paste it into your editor's "Go to file" and you're there. • Copy the element's screenshot directly to your clipboard for sharing in PRs and chat. • Copy the full element info (selector, outer HTML, dimensions, computed CSS) for debugging or test fixtures. 🎯 How it works 1. Press the shortcut Ctrl+Shift+E (macOS: Cmd+Shift+E), or click the toolbar icon. 2. Hover — Element Dev highlights the element under your cursor with a dashed orange outline. 3. Click — a floating panel appears next to the element with the source file and component stack. 4. Switch tabs in the panel between Source Stack and Element Tree as needed. 5. Press Esc to dismiss the panel. Press Esc at any time to exit selection mode. 🧩 Framework support Works in development mode for: • React (incl. React 18/19, Next.js dev server) • Vue 3 (incl. Nuxt) • Svelte • Solid • Preact Element Dev reads the framework's dev-mode metadata (component fiber, VNode __file, etc.) to trace the element back to its source. It does not work in production builds because the debug metadata is stripped. 🛡️ Privacy • Does not collect, store, or transmit any user data. • Does not read or modify page content outside the explicit selection you click. • The activeTab permission is used only when you trigger the extension; no background tracking. • Open source — read the code, audit it, and contribute. ⌨️ Keyboard shortcuts • Ctrl+Shift+E / Cmd+Shift+E — Start element selection • Esc — Exit selection / close panel You can rebind the shortcut in chrome://extensions/shortcuts. 🌐 Internationalization • English (default fallback) • 简体中文 Built for front-end developers who live in the browser, not in their editor.