开发者工具箱 - 常用开发辅助工具集合

1

CSS 光标样式预览工具 - 所有内置光标效果展示

列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。

参考 CSS 光标 参考 预览

1

画中画文档演示 - Document Picture-in-Picture API

打开一个始终置顶的小窗口，在其中显示自定义内容（例如笔记/时钟），实验新API。

开发工具 API 演示 画中画

1

文本乱码修复器 - 检测编码错误并尝试恢复

粘贴乱码文本，自动检测可能的编码混淆（如UTF-8读GBK），并尝试还原正确文字。

开发工具 乱码 修复 编码

1

大文本文件分段读取器 - FileReader分块

使用FileReader.slice逐段读取大型文本文件的前几行或随机位置，避免内存溢出。

开发工具 分段 文件 读取

1

Mermaid图表在线编辑 - 文本转流程图

编写Mermaid语法，实时预览流程图、时序图、甘特图，并可导出SVG。

可视化 Mermaid 图表 编辑器

1

文本相似度计算器 - 余弦相似度

输入两段英文文本，通过词频向量计算余弦相似度，衡量内容相近程度。

开发工具 余弦 文本 相似度

1

全尺寸Favicon生成 - 多平台图标包

上传主图，同时生成32x32、180x180等平台所需的所有favicon尺寸和manifest。

开发工具 Favicon 全尺寸 生成

1

递归树可视化 - 斐波那契/阶乘调用图

输入参数运行递归函数（如斐波那契），绘制递归调用树结构，理解重复计算。

开发工具 可视化 教育 递归

1

数学表达式解析器 - 字符串公式求值

输入数学表达式（如 sin(45)+3^2 ），安全解析并计算数值结果。

开发工具 数学 表达式 解析

1

精灵图分割器 - 将合图拆成单帧小图

上传合并的精灵图，设定行数和列数，自动裁切为单独的小图并打包下载。

图像工具 分割 提取 精灵图

1

JSON压缩工具 - 在线精简JSON数据

将格式化的JSON压缩为单行字符串，去除所有无意义空白，便于网络传输。

优化工具 JSON 优化 压缩

1

JavaScript混淆压缩工具 - 在线代码保护

对JavaScript代码进行变量重命名、字符串加密等混淆处理，增加阅读难度，保护客户端逻辑。

安全工具 JS 加密 混淆

0

快捷键冲突检测与解决方案 - 输入组合查看占用

输入一组快捷键，检测在主流操作系统和浏览器中是否已被系统或软件占用。

工具 冲突 快捷键 检测 解决

0

NPM 包下载量趋势图 - 按周/月/年展示热门包

输入包名，获取其近一年的周下载量数据并绘制折线图，分析流行度趋势。

开发工具 NPM 下载量 图表 趋势

0

Web Performance API 浏览器 - 查看所有时间指标

展示 navigation timing、resource timing 等所有性能条目，并解释各指标含义。

开发工具 Performance API 指标 时间 浏览器

0

CSS 代码在线压缩工具 - 移除空白与注释

粘贴 CSS 代码，一键移除所有冗余空格、注释和分号，快速压缩体积。

CSS CSS 压缩 在线 空白

0

.env 文件对比合并器 - 找出缺失与差异变量

上传两个 .env 文件，高亮仅在其中一个文件中存在的变量，快速同步环境配置。

开发工具 .env 合并 对比 环境变量

0

GraphQL 查询可视化构建器 - 勾选字段生成 Query

从 Schema 中浏览类型，勾选所需字段和嵌套，实时生成 GraphQL 查询语句。

GraphQL GraphQL 可视化 构建 查询

0

远程触控手势模拟器 - 在移动端模拟鼠标事件

在手机触摸屏上操作，生成对应的鼠标事件日志，用于测试网页的触控兼容性。

开发工具 手势 模拟 触控 远程

0

线程池大小优化计算器 - CPU 核心与 IO 时间

根据 CPU 核心数、IO 等待时间比例，推荐最佳线程池大小。

并发 大小 并发 线程池 计算

0

DOM 重排/重绘触发器测试 - 性能影响可视化

执行各种属性修改，可视化显示哪些操作触发回流或重绘，帮助编写高性能代码。

开发工具 DOM 性能 重排 重绘

0

Web Components 生命周期浏览器 - 查看回调执行

创建一个测试自定义元素，记录并展示 connectedCallback, attributeChangedCallback 等执行顺序。

前端 Web Components 生命周期 自定义元素 调试

0

HTML 输出测试器 - 即时预览代码片段

输入 HTML/CSS/JS 代码，在隔离沙箱中即时渲染，支持控制台捕获。

开发工具 HTML 代码 测试 预览

0

ICU 消息格式测试器 - 复数/性别/选择格式化

编写 ICU MessageFormat 字符串并输入参数，预览格式化后的结果，支持复数、选择等。

国际化 ICU 国际化 复数 格式化

0

SSML 语音合成测试器 - 控制语调语速停顿

编写 SSML 标签，使用浏览器语音合成引擎朗读，测试 break、prosody、emphasis 等效果。

开发工具 SSML 测试 语调 语音合成

0

HTTP 方法测试器 - GET/POST/PUT/DELETE 等演示

向指定 URL 发送不同 HTTP 方法的请求，显示响应状态码、头部和主体，学习 RESTful API。

API HTTP 方法 测试 请求

0

开源许可证选择向导 - 回答几个问题推荐许可证

通过回答关于允许商业使用、保留署名、传染性等问题，推荐合适的开源许可证。

开发工具 向导 开源 许可证 选择

0

响应式视图小书签 - 一键切换常见设备尺寸

生成一个小书签脚本，点击后可在当前页面快速切换 iPhone/Android/平板等设备的视口尺寸。

开发工具 书签 切换 响应式 视口

0

前端混沌工程模拟 - 故障注入演示

在页面中手动触发 JS 错误、网络延迟、API 失败等，观察前端异常处理机制是否健全。

开发工具 故障 模拟 注入 混沌工程

0

JavaScript 代码混淆器 - 轻量级混淆与反混淆

对 JS 代码进行变量名缩短、字符串加密等简单混淆，并尝试反混淆格式化。

安全 JavaScript 代码 保护 混淆

0

AMP HTML 校验器 - 实时检查 AMP 规范

编写或粘贴 AMP HTML 代码，实时校验是否符合 AMP 规范并显示错误。

HTML AMP HTML 校验 规范

0

CSS @scope 规则演示 - 作用域样式隔离

演示新的 CSS @scope 规则如何限定样式作用范围，对比传统 BEM 和 CSS Modules。

CSS CSS @scope 作用域 隔离

0

权限注册表浏览器 - 查看所有 API 权限状态

查询 Permissions API 中所有已知权限（如摄像头、地理位置）的当前状态和变更事件。

开发工具 API 权限 查询 注册表

0

开源许可证文本查看与对比器 - 并排阅读

选择两种开源许可证，并排显示全文，高亮关键差异条款，帮助选择合适许可证。

开发工具 对比 开源 法律 许可证

0

README 模板在线构建器 - 快速生成项目自述文件

填写项目名称、描述、安装步骤等，实时预览并生成完整的 Markdown 格式 README。

开发工具 README 模板 生成 项目

0

Emmet 缩写语法浏览器 - 编写并预览展开

输入 Emmet 缩写，实时显示展开后的 HTML 结构，学习高级 Emmet 技巧。

HTML Emmet HTML 缩写 语法

0

.gitignore 构建器 - 按语言/框架选择模板

勾选项目使用的语言和框架，合并生成完整的 .gitignore 文件内容。

Git gitignore 构建 模板 项目

0

User-Agent 切换器 - 模拟不同设备请求头

选择预定义的桌面/移动端 User-Agent 字符串，查看并复制，用于测试或伪装。

开发工具 User-Agent 切换 模拟 设备

0

假地址生成器增强版 - 符合当地格式

选择国家，生成符合当地格式的随机假地址，包括街道、城市、邮编和电话号码。

开发工具 假地址 数据 测试 隐私

0

权限请求模拟器 - 测试各种 API 权限提示

模拟调用地理位置、通知、摄像头等 API 时的权限请求流程，查看权限状态变化。

开发工具 API 权限 模拟 请求

0

本地代码片段管理器 - 高亮/分类/搜索

保存常用代码片段，支持语法高亮显示、标签分类和全文搜索，数据存于 IndexedDB。

开发工具 代码片段 本地 管理 高亮

0

前端错误监控面板 - 捕获并展示 JS 异常

监听全局错误事件和未处理的 Promise 拒绝，在仪表板上展示错误堆栈和发生次数。

开发工具 异常 日志 监控 错误

0

动画帧率分析器 - requestAnimationFrame 监控

显示当前页面动画的实时 FPS 图表，检测掉帧和卡顿，辅助性能优化。

开发工具 动画 帧率 性能 监控

0

PlantUML 编码解码器 - 在线生成图表链接

输入 PlantUML 文本，编码为可嵌入图片的 URL 或解码已有的 PlantUML 链接查看源码。

可视化 PlantUML 图表 编码 解码

0

Flexbox 高级演练场 - 所有属性可视化控制

通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。

CSS CSS Flexbox 可视化 布局

0

表单验证演练场 - HTML5 Constraint API 演示

展示各种 HTML5 验证属性（required, pattern, min, max 等）和自定义验证消息的效果。

HTML HTML5 约束 表单 验证

0

Git 合并冲突模拟解决器 - 练习解决冲突

模拟两个分支修改同一文件产生的冲突标记，在编辑器中手动解决并提交，学习冲突处理。

Git Git 冲突 合并 模拟

0

二进制文件十六进制查看器 - 上传文件检查字节

上传任何文件，以十六进制和 ASCII 对照形式显示文件字节内容，适合简单分析文件头。

分析 二进制 十六进制 文件 查看器

0

占位图服务模拟器 - 本地生成指定尺寸图片

通过 Canvas 生成任意宽高的占位图，显示尺寸文字，可复制 Base64 或使用 Blob URL 模拟服务。

开发工具 占位图 原型 图片 模拟

0

cURL 命令转 Fetch 代码 - 自动解析与生成

粘贴 cURL 命令，自动解析参数、头部和数据，生成对应的 Fetch API JavaScript 代码。

开发工具 cURL Fetch JavaScript 转换

0

轻量级 API 集合运行器 - 导入 Postman Collection 运行

导入 Postman Collection JSON 文件，按顺序执行请求并显示响应，模拟简单的自动化测试。

API API Postman 测试 集合

0

GraphQL Schema 关系图浏览器 - 类型图谱展示

输入 GraphQL Schema SDL，生成交互式的关系图谱，展示类型、字段及关联。

GraphQL GraphQL Schema 关系图 可视化

0

OpenAPI/YAML 规范校验器 - 实时检查与错误提示

编写 OpenAPI 3.x YAML 定义，实时校验结构是否正确，高亮错误位置，辅助 API 设计。

API API OpenAPI YAML 校验

0

Webhook URL 测试器 - 自定义发送 JSON 并查看日志

向指定 Webhook URL 发送自定义 JSON 负载，查看响应状态码和内容，记录发送历史。

API JSON URL Webhook 测试

0

基于模式的模拟数据生成器 - 自定义字段与规则

定义字段名称和类型（姓名、邮箱、数字范围等），批量生成符合规则的 JSON 模拟数据。

开发工具 API 模拟数据 测试 生成

0

Service Worker 缓存内容查看器 - 查看缓存条目

显示当前注册的 Service Worker 所管理的 Cache Storage，查看缓存文件列表及大小。

PWA PWA Service Worker 查看 缓存

0

有限状态机设计器 - 拖拽绘制状态转换图

拖放创建状态和转换，标注事件与动作，导出为图片或 JSON 定义，用于软件设计。

开发工具 FSM 图形 状态机 设计

0

gRPC-Web 请求构建器 - 服务调用与响应查看

输入服务地址与方法，构造 gRPC-Web 请求，查看二进制帧与反序列化后的响应消息。

API gRPC-Web 协议 测试 请求

0

JWT 调试器增强版 - 签名验证与有效期检查

解码 JWT 三部分，验证签名（若提供密钥），检查过期时间并高亮，支持修改负载重新生成。

安全 JWT 签名 调试 验证

0

CSS 3D 变换沙盒 - 平移旋转缩放与透视

独立控制 perspective、rotateX/Y/Z、translateZ 等，实时查看3D卡片或立方体效果。

CSS CSS 3D 变换 旋转 透视