Minified JavaScript Debugging: Beautify First, Then Check What Changed

Production Error: Line 1, Column 47823

A user reports a JavaScript error in production. The console shows the stack trace pointing to app.min.js line 1, column 47823. The source map is not deployed to production (and should not be). Your first move: beautify the minified file, then figure out what changed between the working version and the broken one.

Use OpsCheck JavaScript Minifier to beautify production JS back to readable form. Then use OpsCheck Hash Generator to compare checksums between builds.

From Minified to Debuggable

# Beautify a minified file for reading
# Many online tools exist, but the CLI approach:
npx prettier --write app.min.js 2>/dev/null || true

# Or use a dedicated beautifier:
npx js-beautify app.min.js -o app.readable.js

# Find the error location in the beautified version
grep -n "functionThatThrows" app.readable.js

# Compare with the source version
diff <(npx js-beautify app.min.js) <(cat app.js | npx js-beautify --stdin)

What Changed Between Builds

# Check if the file was altered after minification
sha256sum app.min.js
# Compare with the build output hash from CI

# Check file size — unexpected size change hints at the problem
wc -c app.js app.min.js
# Expected: minified should be significantly smaller
# If they are the same size, minification did not run

# Check if source map URL is present (should not be in production)
grep "sourceMappingURL" app.min.js
# If present and your source maps are not deployed, that is fine
# If the source map URL IS deployed, remove it

Real-World Scenario

A deployment replaced app.min.js with a new build. Users started reporting "cannot read property 'map' of undefined" in production. The source code had no .map() call on an undefined variable — the minifier had renamed a function parameter, and the UglifyJS name mangling collided with a variable from an inline script in the HTML. The minified file was identical size to the previous working version, suggesting no structural change, but the checksum differed. Diffing the beautified versions revealed the variable renaming collision. The fix was adding the variable name to the minifier's reserved list.

The OpsCheck HTTP Headers confirmed the production server was serving the new file (ETag matched the new checksum) and not a cached version.

# Verify the deployed file matches what you built
curl -s https://example.com/js/app.min.js | sha256sum
# Compare with: sha256sum dist/app.min.js

Debugging Checklist

• Beautify first — do not try to read minified JS directly
• Compare checksums with the build artifact to confirm which version is deployed
• Diff the beautified old and new versions to find what changed
• Check for name mangling collisions with inline scripts or third-party libraries
• Verify the HTTP response headers: is the file being cached? Is the ETag correct?
• Use OpsCheck JS Minifier to reproduce the minification step and compare output