我用纯前端写了50个开发者工具：经验总结

我总是在访问同类型的网站。想要一个 JSON 格式化工具或者 YAML 验证器，搜到一个，进去却发现页面里塞满了广告，加载要四秒钟，还让我点两次同意 Cookie。工具本身没问题，但周围的一切糟透了。

于是花了几个月，我自己做了一套。50 个工具，全部免费，全部在浏览器里完整运行。不需要后端，不需要账号，不追踪用户。这就是我学到的东西。

唯一规则：全部客户端运行

项目一开始，我给自己定了一条约束：每个工具都必须能在没有服务器的情况下工作。你粘贴数据，处理在浏览器里完成，不会发送到任何地方。

这既是出于隐私考虑——用我的 JSON 格式化工具时，你的 JSON 数据永远不会离开你的电脑。没有服务器来记录它，因为压根就没有服务器。对于开发者粘贴的令牌、配置或 API 响应来说，这一点很重要。

但这条约束也让整个项目得以实现。没有后端就没有托管账单，没有数据库要保护，没有 API 密钥要轮换，也没有服务器要维护。整个网站就是 GitHub Pages 上的静态文件，运行成本为零，无论是一个人用还是一千个人用，都能正常工作。

客户端实际上能做什么

比我预期的多得多。现代浏览器 API 已经足够强大，大多数开发者工具根本不需要服务器。

哈希是我没想到的。Web Crypto API 原生支持 SHA-256 和 SHA-512，所以我的哈希生成器就是几行调用 crypto.subtle.digest 的代码，不需要任何库。

UUID 生成只需要调用 crypto.randomUUID。Base64 通过 btoa 和 atob 内置支持。剪贴板、文件下载、通过 canvas 调整图片大小，都是原生能力。我的图片压缩工具用 canvas 元素来缩放和重新压缩照片，全程不上传任何东西。

对于浏览器自身无法完成的少数功能，我只引入了一个小型库。YAML 解析用了 js-yaml。二维码生成用了一个极小的生成库。就这样，50 个工具的依赖就这些。

踩坑的部分

二维码折腾了三次。前两个选的库的 CDN 构建要么坏了、要么迁移了，花了一晚上看浏览器控制台对我抛 404，最后才找到一个能正常加载且 API 合理的。学到的教训：锁定版本，不要信任 latest 标签。

客户端图片压缩比较麻烦。如果不注意，canvas 会很乐意给你一个比原图还大的 PNG，因为 PNG 是无损格式，重新编码会引入额外开销。我不得不在那种情况下检测并告知用户文件已经是最优的，而不是假装帮他们省了空间。

整个项目用的是纯 HTML、CSS 和原生 JavaScript。每个工具一个 HTML 文件。不需要构建步骤，不需要 npm install，不需要打包器。

对于这样的项目，这是正确的选择。每个工具自包含且小巧。如果我想修复正则测试器，就打开一个文件，改了，然后推送。代码和我之间没有任何工具链。几年后某个框架已经迭代了，这些文件依然能打开并完全按今天的方式运行。

有些工具我自己也在用

YAML 验证器是我最常打开的工具，通常是在 apply Kubernetes manifest 之前检查一下。它验证语法并显示解析后的 JSON，让我能确认结构是否正确。

SQL 格式化工具用来清理应用日志里输出的一行式查询。

diff 对比工具和正则测试器也是每天都在用。

全部 50 个工具都在 aftabkh4n.github.io，完整源码在 GitHub 上。

大概是吧。无服务器规则开始听起来很受限，结果却成了让这个项目活下来的东西。简单的代码，零托管成本，还有一个不需要撒谎的隐私故事。

如果你在做小型工具，先试试纯浏览器版本。你能不用后端做到的事，会超出你的预期。最坏情况是你碰到了墙，之后再加服务器，但我从来没遇到过。