close

DEV Community

Fix Quotes
Fix Quotes

Posted on

I got tired of leaving Chrome just to read a minified file

There is a tiny part of Chrome that I have always liked: right-click a page, choose View page source, and suddenly the HTML is at least readable enough to inspect.

Then I click a linked JavaScript or CSS file and run into the other version of the web: one enormous line of minified code. No structure, no breathing room, no useful way to find the thing I was looking for.

My usual detour used to be predictable:

  1. Copy the file.
  2. Find an online unminifier.
  3. Paste it there.
  4. Copy the result into something that gives me syntax colours and folding.
  5. Try to remember what I was actually investigating.

Yes, I know I can open VS Code. I do that when I am editing, debugging a project, or working with a local checkout. But when I am already looking at a file in the browser, I often just want to read it quickly without leaving the tab.

That is why I built CodePrettify.

I wanted the browser to be the place where I read browser files

CodePrettify is a browser extension and Windows app that turns supported raw files into a local, read-only workspace. The browser extension recognises supported resources by URL or HTTP content type, then replaces the plain raw-text view with a formatted one. Ordinary HTML pages are deliberately left alone.

For a minified JavaScript bundle, that means proper indentation, syntax highlighting, folding, line numbers, search, a minimap, and a switch back to the exact original text whenever I need it.

A minified JavaScript bundle turned into readable, syntax-highlighted code with folding and a minimap.

The key word is read. Formatting, searching, validating, comparing, and inspecting do not edit the source file. In the extension, I am looking at the file that is already in the tab, only with a useful viewing layer on top.

JavaScript was the start, not the whole point

The original annoyance was JavaScript and CSS. Both are common, both are often minified, and both are awkward to inspect when the browser gives me raw text.

But the browser gap is larger than that:

  • JSON responses are usually just a dense wall of data.
  • JSONC, JSON Lines, YAML, and TOML configurations are not exactly pleasant to inspect in a raw tab.
  • XML, RSS, and Atom have inconsistent browser treatment, especially when I want to switch between a safe rendered view and the actual source.
  • Markdown is better read as a document, while still keeping the raw file one click away.

CodePrettify handles JavaScript, TypeScript, CSS, JSON and JSONC, JSON Lines, YAML, TOML, XML, RSS/Atom, and Markdown in the extension. The Windows app adds local HTML and CSV workflows too.

For markup, the viewer uses a Rendered / Source choice. For code and data, it uses Prettified / Raw. I wanted the original to remain close, not disappear behind a transformation.

JSON made the simple viewer grow up

Once a JSON response is formatted, the next thought is usually: “Where is the one field I care about?”

That became JSON paths, folding, full-text and regex search, go-to-line, table view, schema validation, document statistics, and a way to inspect a value without losing my place. From there, the tool naturally grew into comparison, repair, transformation, code generation, and a diagram view.

The document workspace keeps file-specific actions and general tools together without moving the current file out of view.

The JSON tools still run locally. I can turn a real sample into TypeScript, Zod, C#, Java, Kotlin, Python/Pydantic, Go, Rust, Swift, Dart, or JSON Schema without pasting that data into a web form.

CodePrettify turns a JSON document into a connected diagram that can be searched, inspected, and exported locally.

I also wanted to deal with the files that are almost JSON

A lot of “JSON” is not quite JSON. It has a trailing comma, single quotes, a comment, a missing bracket, or was copied from a log in pieces.

The JSON Repair & Transform tool is for that uncomfortable middle ground. It tries to produce bounded, representable JSON, records the changes it made, and shows the result rather than quietly pretending the input was fine. When the data cannot be repaired safely, it says so.

JSON Repair & Transform shows the repaired document and records each change instead of hiding it.

That same preference shows up elsewhere: a semantic JSON compare ignores formatting and object-key order when I need to see real data changes; the security scan can flag hard-coded secrets and endpoints in a bundle without sending the code away; and the JavaScript playground runs in a sandboxed worker with networking disabled.

Local means local

Copying a script or response into an online tool is often harmless. It is also a habit I did not want to depend on, especially when I am inspecting a customer response, a token-shaped value, a configuration, or a bundle I have not understood yet.

CodePrettify keeps formatting, validation, conversion, JSON-to-code generation, repair, diagrams, search, comparison, security scanning, regex processing, and the playground on the device.

The intentional exception is the HTTP Client: it sends a request directly to the URL I choose only when I press Send. It is not proxied through CodePrettify. In the rare case of a badly decoded legacy JavaScript or TypeScript document, the extension can re-request the exact URL already open to recover valid text; it does not upload the document to FixQuotes.

Security Scan flags likely secrets and endpoints locally, with source-line links to the finding.

This is not trying to replace VS Code

VS Code is still where I go to edit, run a project, follow references across a repository, and do serious development work.

CodePrettify is for the shorter path: I am already in Chrome, I am already looking at a raw file, and I need it to be readable now.

That might be a minified JavaScript bundle behind a button I am debugging, a CSS file that is impossible to scan, an XML feed, a JSON response, a local configuration file, or Markdown documentation. I should not have to bounce through three tools before I can understand it.

If that sounds familiar, CodePrettify is available for Chrome, Edge, and as a Windows app. The full manual goes into every supported format and tool.

There are also short walkthroughs of the browser extension and the Windows app.

Top comments (0)