写在前面:之前写过 网站收集,里面收藏了不少在线工具站。日常开发里 JSON 格式化、Base64、时间戳转换这类操作太频繁了,但每次都要打开不同网站,有的还带广告.于是自己做了一个纯前端的工具箱,欢迎使用。
项目地址
这是个啥
Browser Tool 是一个纯前端的开发者工具集,目前内置 30+ 个小工具,按分类收纳在侧边栏里。绝大多数计算、转换、哈希都在浏览器本地完成(Web Crypto / DOM API),不经过后端;只有少数工具需要联网,比如 IP 查询、.gitignore 模板拉取。
和网上那些「一个大杂烩页面塞满 iframe」的工具站不太一样,这个项目:
- 隐私优先 — JWT 解码、AES 加解密、哈希计算都在本地跑,敏感数据不用上传到别人的服务器
- 模块化 — 每个工具独立组件,注册表统一管理,加新工具不用改路由
- 开箱即用 — 打开网页就能用,不用装插件、不用注册
工具一览
目前按 8 个分类 组织,后续会持续补充(看自己需要用到哪些)。
| 分类 | 工具 |
|---|---|
| 编码转换 | Base64 编解码、URL 编解码、HTML 实体、Data URI 转文件 |
| 格式化 | JSON 格式化/压缩/校验、Markdown 实时预览 |
| 生成器 | UUID、随机密码、二维码 |
| 加密哈希 | SHA-256、MD5、JWT 解码/生成、AES-256-GCM 加解密 |
| 文本处理 | 命名风格转换、文本对比、文本统计 |
| 日期时间 | Unix 时间戳转换、Cron 表达式解析与生成 |
| 开发调试 | 正则测试、颜色格式转换、cURL 转代码、.gitignore 生成、IP 查询 |
| 图片处理 | 尺寸缩放、转 PNG/JPG/WebP/AVIF/Favicon |
日常开发里用得最多的几个:
- JSON 格式化 — 接口调试、日志排查必备
- Unix 时间戳 — 后端返回的时间戳一眼看不懂,转一下省事
- JWT 解码器 — 本地解析 Header 和 Payload,调 OAuth / 登录问题时很方便
- 命名风格转换 —
camelCase↔snake_case↔kebab-case,写 API 文档时经常要用 - cURL 转换器 — 把 cURL 命令转成 Go、Python、JavaScript 等语言的请求代码
- .gitignore 生成器 — 按语言/框架搜索选择模板,新项目初始化快一步
技术栈
项目本身也是用比较新的前端栈写的:
- React 19 + TypeScript
- Vite 8
- Tailwind CSS 4
- React Router 7
- Lucide Icons
纯静态站点,pnpm run build 之后 dist/ 直接部署,挂到子路径也支持(改 .env 里的 VITE_BASE_PATH 即可)。
本地跑起来
npm install -g pnpm
pnpm install
pnpm run dev # 默认 http://localhost:5173
pnpm run build # 构建产物输出到 dist/
pnpm run preview # 本地预览,默认 http://localhost:4173端口想改的话,编辑 vite.config.ts 或在命令行加 --port:
pnpm run dev -- --port 3000
pnpm run dev -- --host 0.0.0.0 --port 3000