Browser Tool — 我做了个浏览器工具箱


写在前面:之前写过 网站收集,里面收藏了不少在线工具站。日常开发里 JSON 格式化、Base64、时间戳转换这类操作太频繁了,但每次都要打开不同网站,有的还带广告.于是自己做了一个纯前端的工具箱,欢迎使用。

项目地址

这是个啥

Browser Tool 是一个纯前端的开发者工具集,目前内置 30+ 个小工具,按分类收纳在侧边栏里。绝大多数计算、转换、哈希都在浏览器本地完成(Web Crypto / DOM API),不经过后端;只有少数工具需要联网,比如 IP 查询、.gitignore 模板拉取。

和网上那些「一个大杂烩页面塞满 iframe」的工具站不太一样,这个项目:

  1. 隐私优先 — JWT 解码、AES 加解密、哈希计算都在本地跑,敏感数据不用上传到别人的服务器
  2. 模块化 — 每个工具独立组件,注册表统一管理,加新工具不用改路由
  3. 开箱即用 — 打开网页就能用,不用装插件、不用注册

工具一览

目前按 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 / 登录问题时很方便
  • 命名风格转换camelCasesnake_casekebab-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

小结


  目录