5 Browser-Based Dev Tools You Can Build in Under 100 Lines

Every developer has that moment: you need a quick JSON formatter, a regex tester, or a base64 decoder — and you end up on some sketchy third-party site that logs your data. Here are 5 tools you can build yourself in plain vanilla JS, each under 100 lines. All five are live at profiterole-blog/tools if you want to see them in action first. 1. JSON Formatter What it does: Takes ugly, minified JSON and pretty-prints it with indentation. Why it's useful: Debugging API responses is painful when everything is on one line. A local formatter means no copy-pasting sensitive payloads to external sites. function formatJSON () { const input = document . getElementById ( ' input ' ). value ; const output = document . getElementById ( ' output ' ); try { const parsed = JSON . parse ( input ); output . textContent = JSON . stringify ( parsed , null , 2 ); output . style . color = '' ; } catch ( e ) { output . textContent = ' Invalid JSON: ' + e . message ; output . style . color = ' red ' ; } } // HT