我为自己构建了一个调试工具包——使用我的Claude朋友制作，与你分享

Source: Dev.to

问题

我在生产环境中调试的时间很多——奇怪的 JSON 响应、看起来不对的 token、毫无意义的时间戳、需要验证的哈希。
每次的流程都是一样的：在 Google 上搜索 “base64 decode online”，把敏感的生产数据粘贴到某个随机网站，得到答案后继续。总觉得不对。

于是我做了 Stingr —— 一个专门为调试时真正需要的功能准备的工具箱。所有功能都在浏览器中运行，数据不会被发送到任何地方。我和 Claude（是的，那位 AI——我们已经是朋友了 🤖❤️）一起完成的，想把它分享出来，看看能否帮到你。

我在凌晨 2 点真的会用的工具

JSON 树视图

我构建的第一个也是使用最频繁的工具。当生产 API 返回庞大的嵌套响应时，我可以按层级展开/折叠，搜索特定字段，固定我经常查看的路径，并运行 JSONPath 查询（例如 $.data.users[*].errors）来精准获取所需内容。

JSON 比较

“为什么 staging 返回的数据和 prod 不一样？” 粘贴两个 JSON 负载即可得到差异。它足够智能，能够识别数组项的移动，而不是把所有内容都标记为删除 + 新增。

JWT 解码器

“这个 token 应该包含 admin 权限吗？” 粘贴 token，即可立即看到 header、payload 和过期时间。

Base64 / URL 解码器

某些 API 返回了编码后的内容，我需要快速查看内部是什么——在浏览器中即时解码。

时间戳转换器

“这个 1708531200 是秒还是毫秒？实际对应的时间是什么？” 将时间戳转换为可读的日期。

哈希生成与校验

快速生成 SHA‑256 校验和、HMAC 验证以及文件完整性检查。

键名大小写转换器

后端返回 user_name，前端却需要 userName？一键转换所有 JSON 键名。

总共大约有 40 个工具——包括格式化器、正则测试器、cron 解析器、文本差异、生成器等——但上面这些是我的日常必备。

为什么全部在客户端

在调试生产环境时，我处理的是真实的用户数据。我不想让这些数据经过别人的服务器。Stingr 完全在浏览器中运行——打开 Network 面板，你会看到 零请求。哈希运算使用 Web Crypto API，其他功能全部基于原生 JavaScript。

构建方式

• 框架： React + Vite
• 依赖： 共四个，毫无花哨

我是为了解决自己的痛点而构建它的，Claude 帮我比单独完成快了很多。它是一个开源项目：

• 站点：
• GitHub: