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

热门

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

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

工具 冲突 快捷键 检测 解决

热门

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

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

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

最新

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

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

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

最新

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

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

CSS CSS 压缩 在线 空白

最新

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

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

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

最新

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

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

GraphQL GraphQL 可视化 构建 查询

最新

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

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

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

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

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

并发 大小 并发 线程池 计算

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

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

开发工具 DOM 性能 重排 重绘

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

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

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

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

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

开发工具 HTML 代码 测试 预览

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

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

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

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

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

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

热门

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

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

API HTTP 方法 测试 请求

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

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

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

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

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

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

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

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

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

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

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

安全 JavaScript 代码 保护 混淆

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

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

HTML AMP HTML 校验 规范

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

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

CSS CSS @scope 作用域 隔离

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

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

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

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

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

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

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

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

开发工具 README 模板 生成 项目

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

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

HTML Emmet HTML 缩写 语法

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

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

Git gitignore 构建 模板 项目

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

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

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

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

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

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

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

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

开发工具 API 权限 模拟 请求

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

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

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

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

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

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

动画帧率分析器 - requestAnimationFrame 监控

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

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

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

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

可视化 PlantUML 图表 编码 解码

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

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

CSS CSS Flexbox 可视化 布局

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

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

HTML HTML5 约束 表单 验证

热门

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

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

Git Git 冲突 合并 模拟

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

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

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

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

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

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

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

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

开发工具 cURL Fetch JavaScript 转换

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

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

API API Postman 测试 集合

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

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

GraphQL GraphQL Schema 关系图 可视化

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

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

API API OpenAPI YAML 校验

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

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

API JSON URL Webhook 测试

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

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

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

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

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

PWA PWA Service Worker 查看 缓存

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

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

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

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

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

API gRPC-Web 协议 测试 请求

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

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

安全 JWT 签名 调试 验证

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

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

CSS CSS 3D 变换 旋转 透视

热门

Webpack 打包分析器 - stats.json 可视化

上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。

开发工具 Webpack 体积 打包分析 模块

事件监听器查看器 - 获取指定元素绑定事件

选择 DOM 元素，列出通过 addEventListener 绑定的所有事件及其类型和监听器（可用时）。

开发工具 JavaScript 事件监听 元素 调试

正则替换捕获组测试器 - $1/$2 引用预览

编写正则表达式并指定替换模式（如 '$1-$2'），实时查看文本替换结果，支持命名捕获组。

开发工具 捕获组 替换 正则 测试

structuredClone 深度克隆测试器 - 对象对比

输入复杂对象，使用 structuredClone 进行深拷贝，并对比原始对象与克隆体，展示可拷贝类型。

JavaScript structuredClone 克隆 对象 深度

全平台 Favicon 生成器 - 适配 iOS/Android/Windows

上传图标，一键生成适用于各种设备和浏览器的 favicon 及 manifest 图标集，包含 HTML 代码。

图标 Android Favicon iOS 图标

Zstandard 压缩浏览器演示 - WASM 版本

利用编译为 WASM 的 Zstd 库在浏览器中压缩解压数据，展示比 Brotli 更快的压缩速度。

压缩 WASM Zstandard Zstd 压缩

Origin Trial 令牌解析与测试器 - 新特性试用

验证 Origin Trial 令牌的有效性与作用域，显示令牌启用的实验功能列表及过期时间。

开发工具 Origin Trial 令牌 实验 特性

Contact Picker API 属性选择器 - 获取联系人信息

通过浏览器原生界面选择联系人，获取姓名、电话、邮箱等字段，用于分享或填写表单。

API演示 API Contact Picker 分享 联系人

requestIdleCallback 任务调度演示 - 空闲时间利用

模拟在主线程繁忙时插入低优先级任务，观察 requestIdleCallback 如何将任务推迟到空闲周期执行。

开发工具 requestIdleCallback 性能 空闲 调度

Reporting API 错误仪表板 - CSP/拦截报告收集

模拟接收浏览器发送的 CSP 违规、网络错误等报告，格式化为可读卡片，了解前端监控最佳实践。

开发工具 CSP Reporting API 监控 错误报告

Storage Buckets API 实验室 - 分区存储策略

创建多个存储桶，分别设置持久化与配额策略，管理不同业务数据的存储优先级与驱逐顺序。

存储 API IndexedDB Storage Buckets 存储

Web OTP API 验证演示 - 短信动态码自动填入

模拟接收包含一次性密码的短信，展示 navigator.credentials.get({otp}) 如何自动提取 OTP 并填入表单。

安全 Web OTP 登录 短信 验证