分享一个在浏览器里查看 JSON 日志和接口返回的小工具

[acrazing]

多年前做过一个 Chrome 插件 Log Viewer ，用来在浏览器里看 JSON 日志和源码：

https://www.v2ex.com/t/1098346

最近有了 Coding AI ，顺手把它强行优化了一波，加了一些自己一直想要的功能，并改名叫 RawLens 。

它现在最核心的特点是：能比较好地格式化并高亮嵌套 JSON ，比如这种：

{ "message": "checkout failed", "context": "{\"orderId\":\"A1024\",\"payment\":{\"status\":\"timeout\",\"retry\":3}}" }

外层是 JSON ，但里面某些字段又塞了一段转义后的 JSON 字符串。很多 formatter 只会把外层排版好，里面那段还是字符串，排查问题时看起来还是很累。

RawLens 会继续尝试识别这些 JSON-looking string ，把里面那层也展开出来。并且能将 \n, \t 也换成换行和缩进展示出来，查错误调用栈的时候特别有用。

另外，它支持多种 JSON 来源：

• 选中的文本
• 鼠标所在的 DOM 节点
• 剪贴板
• 当前 URL / raw 页面
• 当前页面 HTML / source

其中剪贴板入口我自己用得最多：复制一段日志或 payload ，在任意 Chrome tab 里连续按两次 p 就能查看，不用再打开特定网站或编辑器。

这次还加了历史记录功能，存在 IndexedDB 里。不小心关掉弹窗后，也可以从右侧 History 面板找回刚才看过的内容。

使用方式都是双击快捷键：

• vv：把选中文本或鼠标所在 DOM 节点按 JSON 格式展示
• pp：把剪贴板内容按 JSON 格式展示
• hh：格式化展示当前页面 HTML
• cc：格式化展示当前页面源码
• xx：把选中文本或鼠标所在 DOM 节点按 ANSI 日志格式展示

格式化和 History 都在浏览器本地完成，不上传日志内容。

欢迎体验、评论和建议。

Chrome Web Store：

https://chromewebstore.google.com/detail/rawlens/lbnkfmnolbefifdccejjijdgdipnfaib

GitHub：

https://github.com/RawLens/rawlens

官网和 demo：

https://rawlens.github.io/rawlens/