我为什么做一个浏览器开发者工具箱？

作为开发者，电脑里经常会安装很多小工具。

例如：

• JSON 格式化；

• JSON Diff 对比；

• Base64 编解码；

• 时间戳转换；

• 正则表达式测试；

• Markdown 处理；

• 图片压缩。

这些工具单独看都很简单，但每天开发过程中经常会用到。

以前的工作流通常是：

遇到需求

↓

搜索工具

↓

安装软件

↓

处理数据

↓

关闭软件

久而久之，我开始思考：

能不能把这些高频的小工具直接放到浏览器中？

于是我开始开发 WoDeTool。

浏览器作为开发工具的新入口

现代浏览器的能力已经越来越强。

除了传统网页渲染，现在还可以通过：

• WebAssembly

• Web Worker

• WebGPU

• ONNX Runtime Web

运行越来越多复杂任务。

这意味着：

一些以前必须依赖本地软件或者服务器的功能，现在可以尝试直接在浏览器完成。

开发者工具方向

目前 WoDeTool 主要包含一些开发过程中经常使用的小工具。

例如：

JSON Formatter

日常接口调试中，经常需要查看复杂 JSON。

一个好的 JSON 格式化工具可以快速：

• 格式化数据；

• 展开/折叠节点；

• 检查结构问题。

JSON Diff

接口升级、配置文件修改时，经常需要比较两个 JSON。

JSON Diff 可以帮助快速定位：

• 字段新增；

• 字段删除；

• 内容变化。

Regex Tester

正则表达式一直是开发中的高频需求。

通过在线测试：

• 快速验证表达式；

• 查看匹配结果；

• 减少调试成本。

AI 能力进入浏览器

除了传统开发工具，我也在探索浏览器端 AI。

例如图片处理方向：

• AI 去背景；

• 图片高清化；

• OCR；

• 老照片修复。

技术方案主要研究：

• ONNX Runtime Web；

• OpenCV.js；

• WebAssembly。

相比传统服务端 AI：

浏览器端 AI 有一些优势：

隐私

部分场景可以减少文件上传。

成本

减少服务器推理压力。

体验

处理流程更加直接：

打开页面 → 上传文件 → 获取结果。

浏览器 AI 当前挑战

当然，浏览器端 AI 仍然有不少挑战。

1. 模型大小

AI 模型通常比较大。

例如图片增强模型：

效果越好，模型往往越复杂。

需要平衡：

• 模型体积；

• 加载速度；

• 推理效果。

2. 设备性能差异

用户设备差异非常明显：

• CPU 性能；

• 内存；

• 浏览器版本。

都可能影响最终体验。

3. 工具体验

技术实现只是第一步。

真正好的工具应该：

• 打开即可使用；

• 不需要学习成本；

• 快速解决问题。

关于未来

未来我会继续探索几个方向：

1. 更多开发者效率工具；

2. 浏览器端 AI 应用；

3. 文件处理工具；

4. WebAssembly 在实际项目中的应用。

我希望 WoDeTool 最终成为：

一个开发者和创作者每天都愿意打开的浏览器工具箱。

如果你也关注 Web 技术、浏览器 AI 或开发效率工具，欢迎交流。

本作品采用《CC 协议》，转载必须注明作者和本文链接