DEV Community

Coloful Toolhub
Coloful Toolhub

Posted on

Developer Quick Fix: broken JSON, regex, HTML, and the lookup you actually need

There is no single page named Developer Quick Fix. This is a sequence through tools that already exist on Colorful Toolhub and run in the browser: a payload that will not parse, a regular expression that misses, HTML crushed onto one line, and a magic number you should not keep guessing.

Make the JSON readable before you diff it

The JSON Workbench can format, minify, escape, unescape, convert Unicode and Chinese punctuation, sort keys, inspect a tree, validate a schema, run JSONPath, compare documents, and draft models. Use that list in order:

  1. Check that it is JSON. If it is not, unescape first. Logs often wrap the payload in another string.
  2. Format only after it parses. Minify when you have to paste it back into a query or a string literal.
  3. Sort keys before a diff. Key order is not a content change.
  4. Pull one field with JSONPath instead of another chain of data.data.list[0].
  5. Treat generated models as a sketch of the shape. Rename fields before they land in the repo.

Decode \uXXXX in the workbench instead of by hand. Convert full-width quotes and commas back to ASCII before blaming the parser for a quote that is not a quote.

Regex: look up the metacharacter, then generate, then test three strings

The Regular Expression Metacharacter Reference covers escapes, classes, quantifiers, anchors, groups, lookaround, and JavaScript flags. Confirm the engine, and decide whether you need the u flag. Without it, some Unicode classes do not match what you expect.

The Regex Code Generator drafts an expression and a language-specific call from a description. It does not know whether your input contains newlines, or whether you need a full match. Before you commit it, run three samples: one hit, one miss, and one boundary you meant to exclude, such as a trailing space or a full-width symbol.

When the expression is right in a regex literal and wrong inside JSON, the extra backslash was eaten by another layer. The JavaScript Escape Sequence Reference separates JS strings, JSON strings, template literals, and regex literals.

Beautify HTML and CSS before you edit them

Do not patch a minified line. The CSS and HTML Formatter beautifies or minifies CSS, and beautifies, minifies, or escapes HTML. Beautify while debugging. Minify only when you are packaging. Escape when the snippet has to appear as text, so a <script> is not parsed as an element.

For a real table, the HTML Table Generator turns rows and columns into markup you can copy.

The Text Quick Tools join lines, or strip letters, CJK characters, or digits while leaving the rest. That is input cleanup, not redaction. Do not "remove digits" and call a secret safe.

Look up the constant, then write the name back

The Developer Cheat Sheet Reference covers Android Manifest permissions, editor shortcuts, User-Agent examples, and HTML, CSS, JavaScript, and DOM. Narrower tables are faster when you already know the question:

These are references, not the spec. Recheck permissions and key codes against the SDK you ship.

One order, so you do not change three layers at once

  1. Parse the payload, sort keys, and keep a copy.
  2. If the failure is a match, check metacharacters and escape layers, draft with the generator, and test three strings.
  3. If the failure is layout, beautify, then edit.
  4. If the failure is a magic number, look it up and put the constant name in the code.

General utilities: Developer General Utilities. Formatting: Frontend Devtools. Sheets: Tool Aggregation Nav.

Top comments (0)