Element Dev

About

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
• 简体中文

为热爱在浏览器里调试的前端工程师而做。