Element Dev

在浏览器中获取任意 DOM 元素的源文件位置

Element Dev 把你的浏览器变成组件检查器。点击页面上的任意元素，它会立刻告诉你：是哪个文件、哪一行、哪个组件渲染了它 —— 不必再翻 DevTools，不必再靠猜。 ✨ 核心功能 • 点击元素，即可查看对应的源码文件、行号、列号以及渲染该元素的组件名。 • 查看完整的组件调用栈（Source Stack），清晰呈现深层元素的嵌套渲染链路。 • 切换到「元素树」视图（Element Tree），一键复制祖先结构、所选子树或整页 DOM 的可访问性快照。 • 一键复制文件路径，粘贴到编辑器的「跳转到文件」即可直达源码。 • 一键复制元素截图到剪贴板，方便在 PR、群聊中分享。 • 复制元素完整信息（选择器、外层 HTML、尺寸、计算后的 CSS），便于调试或生成测试夹具。 🎯 使用方法 1. 按下快捷键 Ctrl+Shift+E（macOS：Cmd+Shift+E），或点击工具栏图标。 2. 悬停 —— Element Dev 会用橙色虚线框高亮光标下的元素。 3. 单击 —— 元素旁弹出悬浮面板，展示源文件与组件调用栈。 4. 在面板中自由切换「源码栈」与「元素树」两个视图。 5. 按 Esc 关闭面板。 随时按 Esc 即可退出选择模式。 🧩 框架支持（开发模式） • React（含 React 18/19、Next.js 开发服务器） • Vue 3（含 Nuxt） • Svelte • Solid • Preact Element Dev 通过读取框架开发模式的元数据（React Fiber、Vue VNode 的 __file 等）来追溯元素来源。生产构建中这些调试元数据会被移除，因此插件在生产环境不会生效。 🛡️ 隐私 • 不收集、不存储、不上传任何用户数据。 • 仅在你主动触发时读取页面，且只读取你点击的那一个元素的相关信息。 • 仅使用 activeTab 权限，不会在后台持续跟踪。 • 完全开源，欢迎审阅与贡献。 ⌨️ 快捷键 • Ctrl+Shift+E / Cmd+Shift+E —— 开始元素选择 • Esc —— 退出选择 / 关闭面板 可在 chrome://extensions/shortcuts 重新绑定。 🌐 国际化 • English • 简体中文 为热爱在浏览器里调试的前端工程师而做。