dtools - Web 开发者工具

# 🛠️ dtools - Web 开发者工具

## 标题

**dtools - 强大的 Web 开发者工具浏览器扩展**

## 介绍

dtools 是一款功能强大的浏览器扩展，专为 Web 开发者设计，集成了多种实用的开发调试工具、性能监控指标和技术栈自动检测功能。无论您是在开发、调试还是优化网站，dtools 都能为您提供全方位的支持。

### 核心功能

**📄 页面信息分析**
- 快速查看页面的完整 URL 信息（协议、主机名、路径、查询参数、哈希）
- 自动提取 Meta 标签信息（描述、关键词、作者、视口设置等）
- 支持 Open Graph 和 Twitter Card 元数据解析
- 提供图片统计和标题结构分析
- 详细的 DOM 结构统计信息

**🔍 全面技术栈分析**
- 广泛的前端技术支持：自动检测页面所使用的各类技术，涵盖主流开发框架、UI组件库、工具函数库等。
- 深度集成内容识别：准确识别内容管理系统（CMS）、数据分析工具及内容分发网络（CDN）的使用情况。
- 清晰的架构洞察：不仅列出技术名称，更提供详细的DOM结构统计分析，帮助开发者快速理解应用架构。
- 打包工具检测：当下最流行的web develop打包工具分析。

**📊 性能指标监控**
- 核心 Web Vitals 指标：LCP（最大内容渲染）、FID（首次输入延迟）、CLS（累积布局偏移）、FCP（首次内容渲染）
- 网络性能分析：TTFB（首字节时间）、DNS 查询时间、TCP 连接时间、SSL 握手时间、请求/响应时间
- DOM 性能指标：DOM 交互时间、DOM 完成时间、DOM 处理时间、资源加载时间、页面完全加载时间
- 自动性能评分系统（优秀/待改进/较差）

**💻 设备信息查看**
- 操作系统和浏览器详细信息
- 屏幕分辨率和视口尺寸
- User Agent 字符串解析
- 网络状态、内存、CPU 核心数
- 语言、时区、平台信息

**🗜️ 图片压缩工具**
- 支持多种图片格式
- 批量处理功能
- 可调节压缩设置
- 最大尺寸和尺寸限制
- Web Worker 支持，提升性能

**💾 存储管理**
- 存储分析：LocalStorage、SessionStorage、Cookies 概览
- 存储查看器：查看、编辑、删除 LocalStorage 和 SessionStorage 项
- Cookie 查看器：查看、编辑、删除 Cookie，提供详细信息

**🔧 API 客户端**
- 内置 Postman 风格的 API 测试工具
- 支持多种 HTTP 方法（GET、POST、PUT、DELETE 等）
- 自定义请求头和请求体
- 响应查看和格式化
- 请求历史记录

**🛠️ 实用工具集**
包含 14+ 种开发者实用工具：
- URL 编解码
- Base64 编解码
- JWT 令牌解析和验证
- JSON 格式化和美化
- 哈希计算（MD5、SHA1、SHA256、SHA512）
- UUID 生成器
- Lorem Ipsum 文本生成器
- Meta 标签生成器
- Unix 时间戳转换器
- 颜色选择器和转换器
- CSS box-shadow 生成器
- 正则表达式测试器
- User Agent 解析器
- 二维码生成器

**⚙️ 其他特性**
- 多语言支持：中文、英文、日文
- 打赏支持：支持开发者持续改进
- 设置功能：可自定义语言偏好
- 标签页状态持久化：记住最后活动的标签页

### 使用场景

- **前端开发调试**：快速查看页面信息、检测技术栈、分析 DOM 结构
- **性能优化**：监控核心 Web Vitals 指标，识别性能瓶颈
- **API 测试**：快速测试接口，无需切换工具
- **日常开发**：使用内置工具集提高开发效率
- **学习研究**：了解网站使用的技术栈和架构

dtools 致力于为 Web 开发者提供一站式开发工具解决方案，让开发更高效、调试更便捷。