JSON 差異視覺化(deep diff)
貼兩份 JSON,即時看到 deep diff:新增、移除、變更分顏色高亮,陣列 by index 比對,可一鍵複製 diff 報告。完全在瀏覽器內處理。
新增 1移除 0變更 4不變 2
| 路徑 | 左值 | 右值 |
|---|---|---|
| ~$ | {"name":"Alice","age":30,"tags":["a","b"]} | {"name":"Alice","age":31,"tags":["a","c"],"active":true} |
| ~$.age | 30 | 31 |
| ~$.tags | ["a","b"] | ["a","c"] |
| ~$.tags[1] | "b" | "c" |
| +$.active | true |
›如何使用
- 左 貼舊版 JSON,右 貼新版 JSON(空字串視為
null)。 - 右側 diff 表格即時更新,+ 綠色是新增、− 紅色是移除、~ 琥珀色是變更。
- 上方統計列顯示四種變化的數量,可勾選 顯示不變的欄位 看完整結構。
- 按 複製 diff 報告 拿純文字版,可貼進 PR description、Linear、Slack。
Tips
- 路徑用 JSONPath 風格 —
$.user.tags[0]直觀好讀,可直接貼進 jq / lodash get / Postman 取值。 - 陣列是 by index 比對(LCS 太貴) — 如果你只調整順序,會被看成全 changed;預先排序再 diff 比較準。
- 型別變化 例如從
{}變成1算 changed(不深入比較)。 - 對標 jsondiff.com:他們要看廣告,我們純函式 + 純前端,沒有任何上傳。
💡 整個 diff 在瀏覽器內跑,不上傳。適合比對 production / staging API 差異、config 審查、回歸測試 baseline。