DEV Community

svpg
svpg

Posted on

Advanced Formatting for Messy JSON from Anywhere in Chrome

#webdev #javascript #chrome #debugging

Messy JSON rarely lives in a clean file. It shows up inside API error pages, copied debug output, selected text, DOM elements, raw responses, and clipboard snippets.

It also often contains JSON inside JSON string fields:

{"foo":"{\"bar\":1}"}
Enter fullscreen mode Exit fullscreen mode

A normal JSON formatter usually makes the outer object readable, but the useful part is still trapped inside an escaped string:

{
  "foo": "{\"bar\":1}"
}
Enter fullscreen mode Exit fullscreen mode

RawLens is an open-source Chrome extension for advanced formatting of messy JSON from anywhere in the browser. It detects JSON-looking string fields and pretty-prints them as structured data, so the nested value becomes readable instead of staying a giant escaped string.

Conceptually, the example becomes much closer to this:

{
  "foo": {
    "bar": 1
  }
}
Enter fullscreen mode Exit fullscreen mode

The other core feature is speed. You do not have to move the content into a separate formatter first. RawLens can inspect the exact thing you are looking at:

  • selected text
  • a hovered page element
  • clipboard content
  • current page source or page HTML
  • raw pages opened directly in Chrome

That makes it useful for API responses, embedded log payloads, copied production errors, and web pages where only one selected blob matters.

It also supports ANSI logs, HTML, CSS, YAML, JavaScript, diffs, and other source-like text. Those formats are useful extra coverage, but the main feature is fast inspection of selection/element/clipboard content plus nested JSON string formatting.

RawLens runs locally in the browser. It does not upload logs to a server and does not collect log data.

Chrome Web Store:
https://chromewebstore.google.com/detail/rawlens/lbnkfmnolbefifdccejjijdgdipnfaib

GitHub:
https://github.com/RawLens/rawlens

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

Feedback is especially welcome from people who regularly deal with escaped or nested JSON in logs, selected page text, page elements, or copied debug output.

Top comments (0)