我构建了一个隐私优先的基于浏览器的 Dev Tools 集合

Source: Dev.to

包含内容

目前共有 10 个工具：

• JSON Formatter – 格式化、压缩（minify）并进行语法高亮验证
• Base64 Codec – 支持完整 Unicode 的编码/解码
• URL Encoder/Decoder – 用于查询字符串和 URI 组件的编码/解码
• Hash Generator – 通过 Web Crypto API 生成 SHA‑1、SHA‑256、SHA‑384、SHA‑512
• Timestamp Converter – 将 Unix 时间戳转换为可读日期，或反向转换
• Color Picker – 在 HEX、RGB、HSL 之间相互转换
• Markdown Preview – 实时渲染，支持 GitHub Flavored Markdown
• Regex Tester – 实时匹配，带捕获组高亮和标志切换
• JWT Decoder – 在本地解码头部和负载，绝不将令牌发送到任何地方
• Text Diff – 支持文件上传的行内和并排视图

为什么客户端处理很重要

想想你每天使用的工具。你的 JWT 令牌里可能包含用户数据。你的 JSON 负载可能携带 API 密钥。你的 Base64 字符串可能编码了敏感信息。

使用 Toolphin 时，所有处理都在浏览器标签页的 JavaScript 中完成。根本没有后端可以泄露数据。你可以自行验证——打开 Network（网络）面板观察，什么都不会被发送。

技术栈

• Next.js 16 + App Router 与静态站点生成
• TypeScript 提供类型安全
• Tailwind CSS + shadcn/ui 构建 UI
• Vitest + React Testing Library 用于单元测试
• Playwright 用于 E2E 测试（桌面端 + 移动端）
• Vercel 托管

我满意的技术决策

• Web Crypto API 进行哈希 – 无需额外的加密库，浏览器原生的 crypto.subtle.digest() 已能快速完成 SHA 系列哈希。
• 基于正则的语法高亮 – 对 JSON Formatter，我实现了一个轻量的正则高亮器，而不是引入 Prism 或 Highlight.js 等重量级库。针对单一语言，这已经足够。
• 本地字体 – 使用 geist npm 包代替 Google Fonts，省去每次页面加载的外部网络请求。
• 无闪烁的暗色模式 – 在 “ 中的内联脚本读取 localStorage 并在 React hydrate 之前设置主题类，从而避免在启用暗色模式时出现白屏。

我的收获

• SEO 从第一天起就很重要。 每个工具页面都有独立的 title、meta description、Open Graph 标签以及 JSON‑LD 结构化数据。自动生成的 sitemap 会根据工具注册表生成。这个应该在项目起步时就做好，而不是事后补上。
• "use client" 应该像手术刀，而不是大锤。 在 Next.js 中，只有交互性的叶子组件需要声明为 client 组件。保持 wrapper 和 layout 为 server 组件可以让其余部分保持服务器渲染。
• 测试能省时。 每个工具都有单元测试和 E2E 测试。虽然看起来是额外负担，但在我重构共享组件时，它捕获了多次回归。

接下来

我正在持续添加新工具。我的待办列表中有：

• Lorem ipsum 生成器
• CSS 单位转换器
• Cron 表达式解析器
• UUID 生成器
• HTML 实体编码器

如果你有想要的工具，欢迎在评论区告诉我。

快来看看： toolphin.dev