web-element-inspector/README.md

Web Element Inspector - 网页元素检查器，支持鼠标悬停高亮和实时查看元素信息

# 🔍 网页元素调试工具

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

## ✨ 功能特性

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

## 🚀 快速开始

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

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

```javascript
(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
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. 粘贴到控制台并按回车执行

## 📖 使用说明

### 启动工具

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

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

### 查看元素信息

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

### 拖动面板

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

### 关闭工具

有两种方式关闭工具：

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

```javascript
__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 等）

## 🔧 开发

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

```bash
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

---

**享受调试吧！** 🎉