JavaScript › Reading Real Applications
Reading minified bundles and source maps
Real applications don’t ship the clean code from earlier lessons — they ship one giant minified line of mangled names. This lesson is about making that readable, and about the jackpot when an app leaks its source maps: the complete original code, comments and all. This is where reading-as-a-tester becomes practical.
You'll learn to
- Beautify minified code into something readable
- Find and use leaked source maps
- Know what to extract once it's readable
Beautify first
Minified code crams everything onto few lines with short names. Beautifying re-adds structure so you (and grep) can work with it.
# Beautify a fetched bundle:
curl -s https://site.com/app.min.js | js-beautify > app.js
# In the browser: DevTools Sources panel has a built-in
# pretty-print button (the { } icon at the bottom).
js-beautify (or the DevTools pretty-print button) reformats the code. Names stay mangled, but the structure returns — enough to trace logic and run grep with context.
The jackpot: source maps
Build tools can emit source maps — files that map the minified code back to the original source. When they’re left accessible in production, you recover everything.
Look for this comment at the end of a bundle:
//# sourceMappingURL=app.min.js.map
Then fetch that .map file. Tools like the DevTools Sources panel
(or a source-map extractor) reconstruct the ORIGINAL files:
- original variable and function names
- code comments the developers wrote
- the full folder structure of the app
Checkpoint
What does a leaked source map (.map file) give a tester that a merely beautified bundle does not?
A beautified bundle restores formatting but keeps the mangled short variable and function names and has no comments. A source map reconstructs the original source files: the real, meaningful variable and function names, the developers' code comments, and the original folder structure. It effectively turns a black-box test into a code review, because you're reading the actual source the developers wrote.
Try it yourself
On an authorised target, fetch a minified bundle and beautify it (with js-beautify or the DevTools pretty-print button). Search it for fetch( to list endpoints. Then check the end of the file for a sourceMappingURL comment — if present, that’s a source-map lead.
Key takeaways
- Beautify minified code (js-beautify or DevTools) to restore structure.
- A leaked source map reconstructs the original source — names and comments.
- Always check for sourceMappingURL comments and try the .map files.
- Grep beautified bundles for endpoints, secrets, and client-side routes.
Quick quiz
Next, using JavaScript itself — Node.js — to build the recon and analysis tools that automate this.