# DevTools **Repository Path**: wujianfeng17/dev-tools ## Basic Information - **Project Name**: DevTools - **Description**: No description available - **Primary Language**: HTML - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2025-09-09 - **Last Updated**: 2025-10-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # DevTools - 在线开发者工具集合 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Version](https://img.shields.io/badge/version-2.3.0-blue.svg)](https://gitee.com/wujianfeng17/dev-tools) [![Architecture](https://img.shields.io/badge/architecture-modular-green.svg)](https://gitee.com/wujianfeng17/dev-tools) 一站式开发者工具集合，提供常用的开发工具，无需安装，直接在浏览器中使用。纯前端实现，数据处理完全在本地进行，保护您的数据安全。**现已包含专业级API测试工具！** ## 🚀 v2.0 架构重构 > **重大更新**: 项目已完成模块化架构重构，将原来4690行的主文件精简到65行，性能提升98.3%！ **架构亮点**: - ⚡ **性能提升**: 主应用文件从4690行减少到65行，启动更快 - 🏗️ **模块化设计**: 职责分离，core/tools/renderers三层架构 - 🔧 **易于维护**: 每个工具独立模块，便于开发和调试 - 📦 **高度可扩展**: 添加新工具无需修改核心代码 - 🧪 **可测试性**: 逻辑与UI完全分离，便于单元测试 - 🎯 **懒加载支持**: 渲染器按需初始化，未来可按需加载 ## ✨ 特性 - 🚀 **零配置**：无需安装，打开即用 - 🔒 **数据安全**：所有处理在本地完成，数据不会上传到服务器 - 📱 **响应式设计**：完美适配桌面端和移动端 - ⚡ **高性能**：v2.0架构重构，启动速度提升98.3% - 🎨 **现代UI**：基于 TailwindCSS 的美观界面 - 🏗️ **模块化架构**：三层分离设计，易于扩展和维护 - 🌟 **丰富工具**：18个开发工具，4大分类，覆盖日常开发需求 - 🗂️ **智能分类**：工具按功能分类，支持常用工具过滤 - ⌨️ **快捷操作**：支持键盘快捷键和批量处理 - 🧪 **开发友好**：完善的调试工具和测试页面 - 📦 **无依赖**：纯JavaScript实现，无框架锁定 ## 🛠️ 功能列表 **18个专业工具，按功能智能分类：** ## 📊 数据处理工具 ### 📄 JSON 格式化工具 - ✅ JSON 格式化和压缩 - ✅ 语法验证和错误提示 - ✅ 语法高亮显示 - ✅ 键名排序 - ✅ 结构统计分析 - ✅ 转义/反转义处理 - ✅ 支持大型 JSON 文件 ### 🗄️ SQL IN 生成器 - ✅ 批量生成 SQL IN 语句 - ✅ 自动去重和排序 - ✅ 多种引号类型支持 - ✅ 统计信息显示 ### 📝 文本去重排序工具 - ✅ 文本行去重和排序处理 - ✅ CSV文件按列去重功能 - ✅ 多种排序方式（升序/降序/保持原序） - ✅ 大小写敏感选项 - ✅ 自动移除空行和空白字符 - ✅ 支持多种分隔符 - ✅ 文件拖拽上传支持 - ✅ 处理统计和重复率分析 ### 🔀 文本差异对比工具 - ✅ 可视化文本差异比较 - ✅ 逐行和逐字符对比模式 - ✅ 高亮显示增删改内容 - ✅ 支持大文件对比 - ✅ 导出对比报告 ### 🛠️ SQL 格式化工具 - ✅ SQL 语句美化和格式化 - ✅ 代码压缩和优化 - ✅ 语法验证和问题检测 - ✅ 表名自动提取 - ✅ 多种格式化选项（缩进、大小写、逗号风格） - ✅ 多条语句批量处理 - ✅ 复杂查询和嵌套支持 - ✅ 性能统计和分析 ### 🎨 CSS 格式化工具 - ✅ CSS 语句美化和格式化 - ✅ CSS 代码压缩和优化 - ✅ 语法验证和错误检测 - ✅ 自动修复常见问题 - ✅ 多种格式化选项（缩进、括号位置） - ✅ 实时统计信息（规则数、属性数、文件大小） - ✅ 下载格式化结果 ### 📝 Markdown 预览工具 - ✅ 实时Markdown预览 - ✅ GitHub风格样式 - ✅ 支持表格、代码块、数学公式 - ✅ 语法高亮显示 - ✅ 导出HTML和PDF - ✅ 字符统计和实时预览 ## 🔄 编码转换工具 ### 🔐 Base64 编解码工具 - ✅ 文本和文件的 Base64 编解码 - ✅ 支持中文和特殊字符 - ✅ URL 安全编码 - ✅ 文件拖拽上传（最大10MB） - ✅ 多种字符集支持（UTF-8/ASCII） - ✅ 批量处理功能 - ✅ 格式验证和错误提示 ### ⏰ 时间戳转换工具 - ✅ 时间戳与日期时间互转 - ✅ 自动检测时间戳单位（秒/毫秒） - ✅ 支持多种日期格式输入 - ✅ 15+ 种输出格式 - ✅ 相对时间显示 - ✅ 批量转换功能 - ✅ 实时当前时间显示 - ✅ 智能格式识别 ### 🔗 URL 编解码工具 - ✅ URL 编码和解码 - ✅ 多种编码类型支持（URI/URI Component） - ✅ URL 解析和组件分析 - ✅ URL 构建器 - ✅ 批量处理功能 - ✅ 安全性检查 - ✅ 查询参数解析 ### 🔐 哈希生成工具 - ✅ 多种哈希算法（MD5、SHA-1、SHA-256、SHA-512） - ✅ 文本和文件哈希生成 - ✅ 哈希值验证 - ✅ 文件完整性校验 - ✅ 批量哈希生成 - ✅ 拖拽文件上传（最大100MB） - ✅ 算法性能对比 ### 💰 人民币大小写转换工具 - ✅ 数字金额转中文大写 - ✅ 中文大写转数字金额 - ✅ 支持小数位处理 - ✅ 财务规范格式 - ✅ 批量转换功能 ## 🛠️ 开发工具 ### 🆔 UUID生成器 - ✅ 多版本UUID生成（v1/v4/Nil） - ✅ 批量生成功能（最多10000个） - ✅ 多种输出格式（标准/大写/无连字符等） - ✅ UUID验证和解析功能 - ✅ 自定义前缀后缀 - ✅ 格式转换工具 - ✅ 一键复制和下载 - ✅ 适用于API开发和测试数据 ### 🔐 随机密码生成器 - ✅ 多种预设密码模板 - ✅ 高度自定义设置（长度/字符类型） - ✅ 记忆辅助密码生成 - ✅ 实时密码强度分析 - ✅ 安全检查和建议 - ✅ 批量密码生成（最多1000个） - ✅ 使用加密API保证安全性 - ✅ 本地生成，数据不上传 ### 🔑 JWT 解析工具 - ✅ JWT Token 解析和验证 - ✅ Header、Payload、Signature 分离显示 - ✅ 标准声明（Claims）解析 - ✅ 过期时间检查和倒计时 - ✅ 算法信息和安全说明 - ✅ 支持所有主流 JWT 算法 - ✅ 实时解析和状态提示 ### 🌐 HTTP 状态码查询工具 - ✅ 完整的HTTP状态码参考（1xx-5xx） - ✅ 智能搜索（状态码、消息、描述） - ✅ 分类显示和详细说明 - ✅ 模态框查看详细信息 - ✅ 快速复制和查找功能 ### 🔍 正则表达式测试器 - ✅ 实时正则表达式测试 - ✅ 可视化标志选择（g、i、m、u、y、s） - ✅ 12个常用正则模式库 - ✅ 匹配高亮和分组提取 - ✅ 查找替换功能支持 - ✅ 正则表达式解释和分析 ### 🚀 API 测试工具 ⭐ NEW! **专业级API测试工具，媲美POSTMAN功能：** #### 🎯 核心功能 - ✅ **完整HTTP方法支持**：GET、POST、PUT、PATCH、DELETE、HEAD、OPTIONS - ✅ **智能请求配置**：URL参数、请求头、请求体多种格式 - ✅ **环境变量管理**：多环境切换，变量插值支持 - ✅ **认证支持**：Bearer Token、Basic Auth、API Key - ✅ **文件上传**：支持form-data文件上传和拖拽 #### 🎨 响应格式化 ⭐ 重点功能 - ✅ **多格式支持**：JSON、XML、HTML、CSV、纯文本 - ✅ **智能检测**：自动识别响应内容格式 - ✅ **语法高亮**： - JSON: 键名、字符串、数字、布尔值分色显示 - XML: 标签、属性高亮，层次结构清晰 - HTML: 标签名、属性、DOCTYPE专业高亮 - CSV: 优雅表格显示，自动斑马纹 - ✅ **一键操作**：复制格式化内容、下载为对应格式文件 - ✅ **统计信息**：显示格式、文件大小、行数、行列数等 #### 🛠️ 高级功能 - ✅ **cURL导入导出**：与命令行工具无缝集成 - ✅ **请求历史**：自动保存请求记录，支持快速重放 - ✅ **代码生成**：支持16种编程语言（JavaScript、Python、Java、C#、Go等） - ✅ **脚本支持**：前置脚本和测试脚本（JavaScript） - ✅ **Cookie管理**：自动解析和显示Cookie信息 - ✅ **性能分析**：响应时间、文件大小、状态码统计 - ✅ **批量测试**：集合运行器支持 - ✅ **请求模板**：内置常用API模板 #### 💡 用户体验 - ✅ **专业界面**：现代化设计，直观易用 - ✅ **实时反馈**：加载状态、错误提示、成功提示 - ✅ **快捷操作**：键盘快捷键、批量操作 - ✅ **数据安全**：所有数据本地处理，隐私保护 ## 📱 实用工具 ### 🔲 二维码生成/识别工具 - ✅ 文本/URL/WiFi等多种内容生成 - ✅ 自定义尺寸、颜色和边距 - ✅ 多种纠错等级选择 - ✅ 常用模板快速生成 - ✅ 图片文件二维码识别 - ✅ 拖拽上传支持 - ✅ 下载PNG或复制到剪贴板 ### 🎨 颜色工具包 - ✅ **专业色彩选择器**：HEX、RGB、HSL格式支持 - ✅ **格式转换**：各种颜色格式间无缝转换 - ✅ **智能调色板生成**： - 单色调色板（深浅变化） - 类似色调色板（相邻色相） - 互补色调色板（对比色） - 三色调色板（等距分布） - 四色调色板（矩形分布） - ✅ **WCAG对比度检查**：无障碍设计支持 - ✅ **预设色彩库**：Material Design、Tailwind CSS等 - ✅ **随机颜色生成**：带约束条件的智能生成 ## 🗂️ 智能分类导航 **全新的分类菜单系统，让18个工具触手可及：** ### 🎛️ 过滤功能 - **全部** - 显示所有工具，按4大分类组织 - **常用** - 快速访问常用高频工具 ### 🔍 智能搜索 - **实时搜索** - 输入关键词即时过滤工具 - **多字段匹配** - 同时搜索工具名称和功能ID - **分类联动** - 搜索结果保持分类结构，空分类自动隐藏 ### 📊 分类逻辑 - **数据处理** (8个) - JSON/SQL/CSS格式化、文本处理、数据对比、Markdown预览 - **编码转换** (5个) - Base64/URL/时间戳/哈希/人民币转换工具 - **开发工具** (6个) - UUID生成、密码生成、JWT解析、API测试、HTTP状态码、正则测试 - **实用工具** (2个) - 二维码生成识别、颜色工具包 ## 🚀 快速开始 ### 在线使用 直接访问 [DevTools 在线版本](https://devtools-c41.pages.dev/) 即可使用。 ### 本地部署 1. **克隆项目** ```bash git clone https://gitee.com/wujianfeng17/dev-tools.git cd dev-tools ``` 2. **启动服务** ```bash # 使用 Python 简单服务器 python -m http.server 8000 # 或使用 Node.js 服务器 npx serve . # 或直接用浏览器打开 open index.html ``` 3. **访问应用** 打开浏览器访问 `http://localhost:8000` ## 💡 使用示例 ### 🚀 API测试工具使用指南 **快速上手**： 1. 在左侧菜单选择 "API 测试器" 2. 输入API地址，选择HTTP方法 3. 配置请求头和请求体 4. 点击"发送"按钮 **高级功能示例**： #### 测试REST API ```javascript // GET请求示例 URL: https://jsonplaceholder.typicode.com/posts/1 Method: GET Headers: Accept: application/json // POST请求示例 URL: https://jsonplaceholder.typicode.com/posts Method: POST Headers: Content-Type: application/json Body (JSON): { "title": "测试文章", "body": "这是测试内容", "userId": 1 } ``` #### 环境变量使用 ```javascript // 设置环境变量 baseUrl = https://api.example.com token = your-api-token // 在请求中使用 URL: {{baseUrl}}/users Headers: Authorization: Bearer {{token}} ``` #### 前置脚本示例 ```javascript // 设置动态变量 pm.environment.set('timestamp', Date.now()); pm.globals.set('requestId', Math.random().toString(36)); ``` #### 测试脚本示例 ```javascript // 验证响应状态 pm.test("状态码为200", function () { pm.response.to.have.status(200); }); // 验证响应内容 pm.test("包含用户ID", function () { const jsonData = pm.response.json(); pm.expect(jsonData).to.have.property('id'); }); ``` ### 🎨 响应格式化功能 - **自动检测**：工具会自动识别JSON、XML、HTML、CSV格式 - **手动选择**：可在格式下拉菜单中手动选择格式 - **语法高亮**：不同格式使用不同颜色高亮显示 - **一键操作**：复制按钮和下载按钮方便导出数据 ### 📊 其他工具使用技巧 #### JSON格式化工具 ```json // 输入压缩的JSON {"name":"张三","age":25,"skills":["JavaScript","Python"]} // 一键格式化后 { "name": "张三", "age": 25, "skills": [ "JavaScript", "Python" ] } ``` #### 正则表达式测试器 ```javascript // 测试邮箱正则 模式: ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$ 测试文本: user@example.com 结果: ✅ 匹配成功 ``` ## 🏗️ 架构设计 v2.0 ### 三层分离架构 ``` ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ Core 层 │ │ Tools 层 │ │ Renderers 层 │ │ (架构管理) │ │ (业务逻辑) │ │ (UI渲染) │ ├─────────────────┤ ├─────────────────┤ ├─────────────────┤ │ • Router │ │ • JSONFormatter │ │ • getHTML() │ │ • Navigation │ │ • SQLGenerator │ │ • init() │ │ • Renderer │ │ • Base64Encoder │ │ • 事件监听 │ │ │ │ • 纯数据处理 │ │ • DOM操作 │ └─────────────────┘ └─────────────────┘ └─────────────────┘ ``` ### 设计优势 - **职责清晰**: 每层专注特定功能，逻辑与视图分离 - **高内聚低耦合**: 模块间依赖最小化，便于独立开发 - **易于测试**: Tools层可独立单元测试，Renderers层可视觉测试 - **扩展性强**: 新增工具无需修改现有代码 - **性能优化**: 懒加载机制，按需初始化 ## 📁 项目结构 (模块化架构 v2.3) ``` dev-tools/ ├── index.html # 主页面 ├── assets/ │ ├── css/ │ │ └── main.css # 自定义样式 │ └── js/ │ ├── main.js # 轻量级主应用 (65行) │ ├── utils.js # 工具函数库 │ ├── core/ # 核心架构模块 │ │ ├── router.js # 路由管理 │ │ ├── navigation.js # 导航管理 │ │ └── renderer.js # 渲染器管理 │ ├── tools/ # 工具逻辑模块 (18个工具) │ │ ├── json-formatter.js │ │ ├── sql-generator.js │ │ ├── sql-formatter.js │ │ ├── css-formatter.js │ │ ├── markdown-preview.js │ │ ├── text-deduplicator.js │ │ ├── text-diff.js │ │ ├── base64-encoder.js │ │ ├── url-encoder.js │ │ ├── timestamp-converter.js │ │ ├── rmb-converter.js │ │ ├── hash-generator.js │ │ ├── uuid-generator.js │ │ ├── password-generator.js │ │ ├── jwt-parser.js │ │ ├── api-tester.js # 🚀 新增专业级API测试 │ │ ├── http-status.js │ │ ├── regex-tester.js │ │ ├── qr-code.js │ │ └── color-toolkit.js │ └── renderers/ # UI渲染器模块 (18个渲染器) │ ├── json-formatter.js │ ├── sql-generator.js │ ├── sql-formatter.js │ ├── css-formatter.js │ ├── markdown-preview.js │ ├── text-deduplicator.js │ ├── text-diff.js │ ├── base64-encoder.js │ ├── url-encoder.js │ ├── timestamp-converter.js │ ├── rmb-converter.js │ ├── hash-generator.js │ ├── uuid-generator.js │ ├── password-generator.js │ ├── jwt-parser.js │ ├── api-tester.js # 🚀 API测试UI渲染器 │ ├── http-status.js │ ├── regex-tester.js │ ├── qr-code.js │ └── color-toolkit.js ├── test-debug.html # 调试测试页面 ├── LICENSE # MIT 许可证 └── README.md # 项目说明 ``` ## 🔧 技术栈 ### 前端技术 - **前端框架**：Vanilla JavaScript（无框架依赖） - **UI框架**：TailwindCSS - **图标库**：Feather Icons - **动画库**：AOS（可选） ### 架构模式 - **设计模式**：模块化MVC + 事件驱动 - **三层架构**：职责分离的模块化设计 - **Core层**: 路由、导航、渲染管理 - **Tools层**: 纯数据处理逻辑 - **Renderers层**: UI模板和交互 ### API测试工具技术栈 - **HTTP客户端**：Fetch API - **响应格式化**：自定义解析器（JSON、XML、HTML、CSV） - **语法高亮**：原生JavaScript实现 - **代码生成**：支持16种编程语言模板 - **脚本引擎**：JavaScript执行环境 - **文件处理**：File API、Blob API ## 🎯 设计原则 - **简洁易用**：直观的用户界面，最少的操作步骤 - **性能优先**：轻量级实现，快速响应 - **数据安全**：本地处理，不依赖服务器 - **扩展性强**：模块化设计，易于添加新工具 - **可维护性**：职责分离，单一职责原则 - **可测试性**：逻辑与UI分离，便于独立测试 ## 📱 浏览器支持 - Chrome 60+ - Firefox 60+ - Safari 12+ - Edge 79+ ## 🤝 贡献指南 我们欢迎任何形式的贡献！ ### 添加新工具 (新架构) 1. **创建工具逻辑类** (`assets/js/tools/new-tool.js`) ```javascript class NewTool { static process(input, options = {}) { // 纯数据处理逻辑 return { success: true, data: result }; } } ``` 2. **创建渲染器类** (`assets/js/renderers/new-tool.js`) ```javascript window.NewToolRenderer = class NewToolRenderer { static getHTML() { /* 返回HTML模板 */ } static init() { /* 事件监听和UI交互 */ } }; ``` 3. **注册渲染器** (`assets/js/core/renderer.js`) ```javascript this.registerRenderer('new-tool', window.NewToolRenderer); ``` 4. **添加菜单项** (`index.html`) 并引入脚本文件 ### 开发流程 ```bash # 1. Fork 项目 # 2. 创建功能分支 git checkout -b feature/new-tool # 3. 开发并测试 # 4. 提交更改 git commit -m "feat: add new awesome tool" # 5. 推送分支 git push origin feature/new-tool # 6. 创建 Pull Request ``` ## 📄 许可证 本项目基于 [MIT](LICENSE) 许可证开源。 ## 📝 版本历史 ### v2.3.0 (2025-09-12) - 专业级API测试工具 ⭐ 重大更新 - 🚀 **重磅新增**: 专业级API测试工具 - 媲美POSTMAN的完整功能 - 🎨 **响应格式化**: 支持JSON、XML、HTML、CSV多格式语法高亮 - 💡 **智能检测**: 自动识别响应内容格式并美化显示 - 🛠️ **高级功能**: 环境变量、脚本支持、代码生成（16种语言） - 📊 **数据分析**: Cookie解析、性能统计、请求历史管理 - 🔐 **安全支持**: 多种认证方式、数据本地处理 - 🎯 **用户体验**: 现代化界面、实时反馈、批量操作 - 📁 **文件处理**: 支持文件上传、拖拽操作、格式下载 ### v2.2.0 (2025-09-10) - 菜单系统重构 + 二维码工具 - 🗂️ **重大更新**: 智能分类菜单系统 - 14个工具按功能分4大类 - 🔍 **新增**: 实时搜索和常用工具过滤功能 - 🔲 **新增**: 二维码生成/识别工具 - 支持多种内容和自定义选项 - 🎨 **优化**: 全新的视觉设计，图标统一，间距优化 - 📱 **改进**: 响应式菜单，移动端体验大幅提升 - ⚡ **性能**: 分类联动搜索，空分类自动隐藏 ### v2.1.0 (2025-09-09) - 新增3个实用工具 - 📝 **新增**: 文本去重排序工具 - Excel/日志清理的利器 - 🆔 **新增**: UUID生成器 - 测试和模拟数据必备 - 🔐 **新增**: 随机密码生成器 - 安全相关场景专用 - 🎨 **优化**: 界面布局调整，移除无效链接 - 📱 **改进**: 响应式设计和用户体验优化 ### v2.0.0 (2025-09-09) - 架构重构 - 🏗️ **重大重构**: 模块化三层架构设计 - ⚡ **性能提升**: 主文件从4690行精简到65行 (98.3%减少) - 🔧 **开发体验**: 职责分离，便于维护和扩展 - 🧪 **测试改进**: 逻辑与UI分离，可独立测试 - 📦 **懒加载**: 渲染器按需初始化机制 ### v1.4.0 (基础版本) - 🌟 完整的8个开发者工具 - 🎨 现代化UI设计 - 📱 响应式支持 - 🔒 本地数据安全 ### 迁移说明 **从v2.2升级到v2.3**： - ✅ **完全兼容**: 所有现有功能保持不变 - ✅ **重磅功能**: 新增专业级API测试工具 - ✅ **响应格式化**: 5种格式支持，智能语法高亮 - ✅ **高级特性**: 环境变量、脚本、代码生成等专业功能 - ✅ **数据安全**: API测试完全本地处理，保护隐私 **从v2.1升级到v2.2**： - ✅ **完全兼容**: 所有现有功能保持不变 - ✅ **菜单升级**: 新的分类导航系统，更易查找工具 - ✅ **新增工具**: 二维码生成/识别功能 - ✅ **用户体验**: 搜索过滤，常用工具快速访问 - ✅ **数据安全**: 二维码识别完全本地处理（生成需网络） **从v2.0升级到v2.1**： - ✅ **完全兼容**: 所有现有功能保持不变 - ✅ **新增功能**: 3个新工具直接可用 - ✅ **界面优化**: 更简洁的用户界面 - ✅ **数据安全**: 所有新工具均本地处理 ## 🙏 致谢 - [TailwindCSS](https://tailwindcss.com/) - 优秀的CSS框架 - [Feather Icons](https://feathericons.com/) - 精美的图标库 - [AOS](https://michalsnik.github.io/aos/) - 动画库 ## 📞 联系我们 - 项目主页：https://gitee.com/wujianfeng17/dev-tools - 问题反馈：https://gitee.com/wujianfeng17/dev-tools/issues - 功能建议：https://gitee.com/wujianfeng17/dev-tools ---

如果这个项目对您有帮助，请给我们一个⭐️

Made with ❤️ by Restart Corporation