🔍 网页元素调试工具

一个强大的网页调试工具，可以在任何网页上实时查看元素信息、鼠标位置和样式属性。

✨ 功能特性

• 🎯 鼠标悬停高亮：鼠标移动到元素上时自动高亮显示
• 📊 实时信息面板：显示元素标签、ID、类名、尺寸、位置、样式等详细信息
• 📍 鼠标位置追踪：实时显示当前鼠标的 X、Y 坐标
• 🚀 可拖动面板：信息面板可以自由拖动到任意位置
• 🎨 美观界面：渐变色设计，现代化 UI
• 💾 即插即用：无需安装，直接在浏览器控制台运行

🚀 快速开始

方法一：远程加载（最简单 ⭐）

在任意网页的浏览器控制台（F12）中粘贴以下代码并执行：

(function() {
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/web-element-inspector@latest/dist/element-inspector-console.js';
  script.onload = () => console.log('🎉 调试工具加载完成！');
  script.onerror = () => console.error('❌ 调试工具加载失败，请检查 URL 是否正确');
  document.head.appendChild(script);
})();

使用步骤：

1. 打开任意网页，按 F12 打开控制台
2. 粘贴上面的代码并回车执行
3. 等待加载完成后即可使用

便捷技巧：

你可以将上述代码保存为浏览器书签（Bookmarklet），一键启动：

javascript:(function(){const s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/web-element-inspector@latest/dist/element-inspector-console.js';s.onload=()=>console.log('🎉 调试工具加载完成！');s.onerror=()=>console.error('❌ 加载失败');document.head.appendChild(s);})();

创建书签步骤：

1. 在浏览器中创建新书签
2. 名称填写：🔍 调试工具
3. URL 填写上面的代码
4. 保存后，在任意网页点击该书签即可启动工具

自定义部署：

如果你想部署到自己的服务器：

1. 运行 npm run build 构建项目
2. 将 dist/element-inspector-console.js 上传到你的服务器
3. 将上面代码中的 URL 替换为你的服务器地址

方法二：本地文件加载

如果你下载了项目文件到本地：

1. 打开任意网页
2. 按 F12 打开浏览器开发者工具
3. 切换到 Console（控制台）标签
4. 复制 dist/element-inspector-console.js 文件的全部内容
5. 粘贴到控制台并按回车执行

📖 使用说明

启动工具

执行脚本后，工具会自动启动：

// 脚本会自动执行，无需手动调用
// 控制台会显示：✅ 调试工具已启动

查看元素信息

• 移动鼠标到页面上的任何元素
• 元素会自动高亮显示（蓝色边框和半透明背景）
• 右上角的悬浮面板会显示详细信息：
  • 📍 鼠标位置（X, Y 坐标）
  • 🏷️ 元素标签名
  • 📝 文本内容（如果元素包含文本）
  • 🆔 元素 ID
  • 🎨 CSS 类名
  • 📐 尺寸和位置（宽度、高度、left、top）
  • 🎭 样式信息（颜色、背景、字体、显示方式）
  • 🗂️ DOM 路径

拖动面板

• 点击面板顶部的标题栏（🔍 元素调试工具）
• 按住鼠标左键并拖动
• 松开鼠标完成拖动

关闭工具

有两种方式关闭工具：

1. 点击关闭按钮：点击面板右上角的 × 按钮
2. 控制台命令：在控制台执行以下命令

__elementInspector.destroy()

📁 文件说明

web-element-inspector/
├── dist/
│   ├── element-inspector.js           # 编译后的 JavaScript
│   └── element-inspector-console.js   # 可在控制台直接运行的版本（推荐上传到服务器）
├── src/
│   └── element-inspector.ts           # TypeScript 源码
├── package.json                # 项目配置
├── tsconfig.json               # TypeScript 配置
└── README.md                   # 说明文档

🎯 使用场景

• 前端开发调试
• 页面布局分析
• CSS 样式检查
• DOM 结构学习
• 网页元素定位
• 响应式设计测试

💡 技巧提示

1. 快速重启：如果工具出现异常，在控制台重新粘贴代码即可
2. 多次运行：重复执行脚本会自动销毁旧实例并创建新实例
3. 全局访问：工具实例保存在 window.__elementInspector，可以随时调用
4. 兼容性：支持所有现代浏览器（Chrome、Firefox、Safari、Edge 等）

🔧 开发

如果你想修改源码并重新编译：

pnpm install

pnpm run build

pnpm run dev

pnpm run preview

构建输出

运行 pnpm run build 后会在 dist/ 目录生成以下文件：

• element-inspector.js - 标准构建版本
• element-inspector-console.js - 控制台可直接运行版本

📝 技术实现

• 纯原生 JavaScript：无依赖，轻量级
• 事件驱动：高效的事件监听机制
• DOM 操作：动态创建和管理 UI 元素
• CSS-in-JS：内联样式，无需外部 CSS 文件
• 响应式设计：自适应不同屏幕尺寸

🌟 特点

• ✅ 零依赖
• ✅ 体积小（压缩后仅 ~5KB）
• ✅ 即插即用
• ✅ 高性能
• ✅ 美观的 UI
• ✅ 完整的功能

📄 许可证

MIT License

享受调试吧！ 🎉