前端日常的 10 个在线工具——能省下装一堆 App 的麻烦
不是"2026 你必须知道的 10 个工具"那种水文。是我自己——一个写了几年前端的人——每天在浏览器里反复打开的那批东西。每个都说清楚什么时候用它最划算。
前端这行的怪现状：你电脑里装的桌面工具一年用不到三次，但浏览器里一直开着的几个标签倒是从 9 点用到 9 点。我整理了下自己最近一个月使用频率最高的 10 个在线工具——按真实场景排序，不按字母。
所有工具都在 DevUtils 上有现成版本，纯浏览器运行，数据不上传。不喜欢这个站换别家也行，反正常识是不要在线上传敏感 JSON / 密码到来历不明的工具站。
1. JSON 格式化（一天用 20 次）
JSON 格式化
最常见场景：后端返回的压缩 JSON，肉眼根本读不了。
调接口排错的核心工具。除了基本格式化，重点看错误定位——好工具会精确告诉你 Unexpected token at line 23, col 7。如果你经常被大整数精度坑过，配合读 JSON 的 10 个坑。
2. Base64 编解码
Base64 编解码
JWT、Data URL、API 认证头——绕不开的 33% 体积膨胀。
不要在控制台手敲 btoa() / atob()——它们处理 Unicode 字符会报 InvalidCharacterError。在线工具会自动 UTF-8 编码。原理细节看 Base64 教程。
3. JWT 解码器
JWT 解码
调登录/权限接口的标配。
JWT 是三段 base64 用点拼起来。这工具会把 header / payload / signature 拆开高亮显示，exp / iat 这种时间戳字段会自动转人话日期。提醒：不要把生产 token 贴到不明工具站——可以本地解码的就别上传。
4. 正则测试器
5. 时间戳转换
时间戳转换
前后端联调的高频痛点：你毫秒级我秒级。
1716340000 到底是秒还是毫秒？看长度——10 位就是秒，13 位就是毫秒。在线工具会两个都给你转出来对照看。Java 后端默认 System.currentTimeMillis() 返毫秒，Go 默认 time.Now().Unix() 返秒——这就是事故源头。
6. URL 编解码
URL 编解码
中文参数 + 重定向 URL 永远的痛。
容易踩的坑：encodeURI 和 encodeURIComponent 不一样——前者不会 encode :/?#，所以 URL 参数得用后者。还有些后端把 + 当空格解析，所以 %2B 才是字面的加号。
7. JSON 转 TypeScript
JSON → TS 类型
接到新接口 → 复制响应样例 → 一秒生成 interface。
本站新增的工具。粘贴一段 JSON 响应，自动推导嵌套 interface、识别可选字段、合并数组里不同 shape 的元素为 union。手写这些 type 太累，但又不能不写——TS 项目 typo 一个字段名能让你少睡两小时。
8. 颜色转换器
HEX / RGB / HSL 互转
设计稿给的 HEX，CSS 里要写 HSL，Canvas 又只认 RGB。
除了三种格式互转，好的工具会显示对比度（WCAG AA / AAA），帮你判断这个色是否能用在文字上。
9. 文本差异对比
10. CSS 渐变 / Box Shadow 可视化
CSS 渐变 · Box Shadow
写 CSS 不如调 CSS——调到合适就复制走。
渐变要调角度、color stop 位置、是否 conic-gradient；阴影要调 offset、blur、spread、inset。这些都是肉眼盯着改一个参数 看一次效果的事——可视化工具直接拖滑块，比反复保存刷新快得多。
个人偏好：用不上传服务器的在线工具。所有的 JSON / Base64 / 哈希 / JWT 操作完全可以在浏览器本地用 JS 完成，没有任何必要把数据传到后端。DevUtils 上的工具都是这么做的。
顺手买不上的几个
有些场景在线工具不够好用，还是得装本地：
- 大文件 JSON（>50MB）：用
jq命令行，浏览器会卡死 - 正则进阶：复杂 PCRE 正则用 regex101，提供详细分解说明
- 抓包/Mock：Charles、Proxyman、mitmproxy——在线工具替代不了