Reading Minified JavaScript Like a Detective

Minified JS looks unreadable. It isn't. It's still JavaScript, with names shortened and whitespace removed. With pretty-print, source maps, and a few pattern-recognition tricks, you can read it like prose. This is the foundational skill for the reverse-engineering lessons.

The starting state

!function(e,t){"use strict";var n=function(){function e(t){r(this,e),this.endpoint=t.endpoint,this.apiKey=t.apiKey,this.token=null}return o(e,[{key:"login",value:function(t,n){var r=this;return fetch(this.endpoint+"/login",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email:t,password:n})}).then(function(e){return e.json()}).then(function(e){r.token=e.access_token})}},{key:"products",value:function(){var e=this;return fetch(this.endpoint+"/products",{headers:{Authorization:"Bearer "+this.token}}).then(function(t){return t.json()})}}]),e}();e.MyClient=n}(window);

After pretty-print + careful naming, this is just:

class MyClient {
  constructor(opts) {
  this.endpoint = opts.endpoint;
  this.apiKey = opts.apiKey;
  this.token = null;
  }
  async login(email, password) {
  const res = await fetch(this.endpoint + "/login", {
  method: "POST",
  headers: {"Content-Type": "application/json"},
  body: JSON.stringify({email, password})
  });
  const data = await res.json();
  this.token = data.access_token;
  }
  async products() {
  const res = await fetch(this.endpoint + "/products", {
  headers: {Authorization: `Bearer ${this.token}`}
  });
  return res.json();
  }
}
window.MyClient = MyClient;

Same code. Readable now.

Step 1, pretty-print

DevTools Sources → click the bundle → {} button at the bottom-left. The 50,000-character one-liner becomes thousands of indented lines.

Search inside (Cmd+F) for landmarks: fetch(, XMLHttpRequest, Authorization, apiKey, endpoint. Each gives you an entry point.

Step 2, source maps (if you're lucky)

Production bundles sometimes ship with source maps (.js.map files). Source maps reverse-engineer minification: variable names, original file paths, original line numbers.

In DevTools Sources, if the map is present, you'll see the original files under the "Authored" or "Webpack://" section. Read those instead of the minified output.

Site builds that ship source maps (often accidentally) include:

• Defaults of older Webpack configs.
• Some Next.js builds in production mode (if not explicitly disabled).
• Sometimes only the .map file is reachable: try https://target.example.com/static/js/main.[hash].js.map.

Step 3, recognize patterns

A few common shapes:

Webpack module runtime

!function(e){var t={};function n(r){...}n.m=e,n.c=t...}([
  function(e,t,n){"use strict";...},
  function(e,t,n){"use strict";...}...
])

The IIFE wraps a runtime + an array of modules. Each module is function(module, exports, require). Search require(123) to find module 123 in the array.

React component (minified)

var r=function(e){...}; r.displayName="MyComponent";

displayName survives minification, search for it to find React components.

axios call

n.a.create({baseURL:"/api"})
n.a.get("/products")

baseURL, .get(, .post( are giveaways. Track back to where the axios instance was constructed for headers/interceptors.

Fetch wrapper

function r(e,t){return fetch(e,t).then(function(e){return e.json()})}

Simple fetch + JSON helper.

Step 4, trace from Network to Sources

Workflow:

1. Network panel → click the request you want to understand → Initiator tab.
2. The initiator shows the call stack: dashboard.js:42 → apiClient.js:18 → fetch.
3. Click the deepest non-browser frame (apiClient.js:18).
4. You're now in Sources at the line that called fetch. Read up and down.

This is the fastest way to find where a request is built, start from the request, not from the bundle.

Step 5, breakpoints

To inspect runtime values:

1. Set a breakpoint on the line that builds the request body or sets a header.
2. Trigger the request from the UI.
3. The breakpoint fires. Inspect local variables in the Scope panel.

For dynamically computed keys/signatures, this is the only way, grep won't find values that don't exist as static strings.

Step 6, logpoints

Instead of pausing, log values:

• Right-click in the gutter → "Add logpoint" → enter 'token=' + this.token.
• Every time that line executes, the message prints to the Console.

Less disruptive than breakpoints, especially for high-frequency code paths.

Step 7, code search across files

DevTools Sources → Cmd+Opt+F (Mac) / Ctrl+Shift+F (Windows). Searches ALL loaded scripts.

Useful queries:

• apiKey, find every place the term appears.
• signature / sha256 / hmac, find crypto-related code.
• X-CSRF-Token, find CSRF handling.
• endpoint:, find object literals with endpoint definitions.

Common minifier conventions

Pattern	What it means
n.a.method(...)	Default export of a module: axios.method(...)
(0, t.foo)(...)	Avoiding this binding; usually a named export
Object.defineProperty(t, "__esModule", {...})	ES module marker
function _classCallCheck(...)	Babel-generated class polyfill
function _typeof(o) {...}	Babel runtime helper
function _objectSpread(...)	Babel object-rest helper

Recognizing Babel's runtime helpers lets you skip them and find the real logic.

Tools beyond DevTools

For deeper analysis:

• js-beautify, local CLI prettifier.
• prettier, formats prettified JS more readably.
• webcrack, partial de-bundling of Webpack output.
• humanify (and similar), ML-assisted renaming of minified variables to plausible English names. Not always accurate but a useful starting point.

For Source maps:

• source-map (npm), parse .js.map files programmatically.
• sourcemapper, extract original source files from .map archives.

A pattern recognition exercise

Given this minified line:

return n.post("/api/auth/login", {email: r, password: a}).then(function(e) { return e.data.token })

Decoded:

• n.post(...), looks like axios. n is the axios instance.
• e.data.token, axios response shape (data is the parsed body).
• The result: a function that POSTs login credentials and returns the token field.

Rename mentally: n = axios, r = email, a = password. Read aloud: "axios POST login, take response data, return token."

Practice this pattern recognition across enough bundles and you read minified code at near-real-time.

Hands-on lab

Hit /challenges/api/auth/api-key-in-js on Catalog108. Open Sources, pretty-print the relevant JS, and trace from the Network request back to where the request is constructed. Use the initiator stack. Set a breakpoint at the line that builds the request headers. Identify the API key in scope. You've now done the foundational reverse-engineering workflow that the next lesson builds on.