How to download JavaScript sourcemaps from a website

Background

Sourcemaps exist because error trackers, debuggers and developer tools need a way to map minified production JavaScript back to readable original source. When an exception fires in production, Sentry, Datadog or Bugsnag need to show you `UserProfile.tsx:42` instead of `a.js:1:17293`. That translation layer requires the sourcemap file, which is a JSON document containing — among other things — the original path of every source file that was bundled and, optionally, the full original contents of those files. When a build tool like webpack, Vite, Rollup or esbuild includes `sourcesContent` in the map (the default for every major bundler), shipping a sourcemap to production means shipping the source code embedded inside the map. Most teams know this in the abstract and still ship them publicly — because uploading maps separately to a third-party error tracker is extra friction, because the security impact feels small compared to the debugging value, because hosting platforms like Vercel and Netlify emit maps by default without a second thought. The practical effect is that a very large portion of the modern web ships its source alongside its bundle. This guide covers how to find those maps, download them, and put the original project tree back together.

Why this matters

Reading a production frontend's actual source is a completely different experience from reading its minified bundle. Minified code tells you the runtime behavior; the source tells you the architecture, the component decomposition, the naming conventions, the commented-out experiments, the TODO notes. For learning from production code this is the difference between reading a transcript and reading a novel. For security research it's the difference between guessing at an endpoint and reading the route table. For competitive analysis it's the difference between 'they use React' and 'they use React 18.2 with an interesting router pattern and a specific state-management approach'.

Prerequisites

• Chrome DevTools familiarity — especially the Network panel.
• `curl` or a similar HTTP client for direct file fetches.
• Node.js if you want to script the reconstruction step.
• Disk space — production sourcemaps routinely exceed 20 MB each, and a full site can accumulate 100-500 MB across bundles.

Step-by-step

1. 1

   Open DevTools and find a bundle

   Open DevTools (F12), go to the Network tab, filter by 'JS', and reload. Pick a reasonable-sized script — something like `main-<hash>.js` or `_app-<hash>.js`. Avoid the smallest chunks (likely lazy-loaded routes with minimal content) and the vendor bundle on the first pass — you want the application's own code if you can identify it.

   Tip: In Next.js apps, the most interesting application code lives in `/_next/static/chunks/pages/` (Pages Router) or `/_next/static/chunks/app/` (App Router). Start there.

2. 2

   Look for the `SourceMap` response header

   Click the script request. In Headers → Response, look for `SourceMap:` or `X-SourceMap:`. If it's there, that's the URL of the map file — resolve it relative to the script. Headers are the cheapest possible indicator because the server explicitly advertises the map's location.

   Tip: If the header value is a relative URL, resolve it against the directory of the script, not the HTML page. `/assets/main-abc.js` with header `main-abc.js.map` becomes `/assets/main-abc.js.map`.

3. 3

   Fall back to the sourceMappingURL comment

   If there's no header, download the script itself ('Response' tab → 'Save as' in newer Chrome, or fetch via `curl`), and look at the very last line. It'll often be `//# sourceMappingURL=main-<hash>.js.map`. That's the map URL, relative to the script. Prepend the script's directory to get the absolute URL.

   curl -s 'https://example.com/assets/main-abc.js' | tail -c 200

   Tip: For large scripts, use a Range request to download only the last few KB: `curl -H 'Range: bytes=-4096' ...`. That's what Sourcemap Explorer does internally to keep bandwidth low.

4. 4

   Fetch the map file

   Request the map URL directly with curl or in the browser. You'll get a JSON blob with `version`, `sources`, `sourcesContent`, `names` and `mappings` fields. The `sources[]` array is the list of original file paths; `sourcesContent[]` is their original text, matched by index.

   curl -s 'https://example.com/assets/main-abc.js.map' -o main-abc.js.map
   jq '.sources | length' main-abc.js.map

5. 5

   Reconstruct the tree

   A minimal script: for each `sources[i]`, normalize the path (strip `webpack://`, `ng://`, `rollup://` prefixes, decode URI, drop `?query#hash`, collapse `.` / `..`) and write `sourcesContent[i]` to that path on disk. Skip webpack synthetic modules (paths containing ` lazy `, ` sync `, `!`, `|`, `(webpack)`). This is 40-60 lines of Node.js.

   const map = require('./main-abc.js.map');
   map.sources.forEach((src, i) => {
     if (!map.sourcesContent?.[i]) return;
     if (/[!|]|\(webpack\)/.test(src)) return;
     const clean = src.replace(/^webpack:\/*/, '').split(/[?#]/)[0];
     require('fs').mkdirSync(require('path').dirname(clean), { recursive: true });
     require('fs').writeFileSync(clean, map.sourcesContent[i]);
   });

6. 6

   Let Sourcemap Explorer do it across the whole site

   The extension handles all of the above across every bundle a page loads, deduplicates shared modules across chunks, skips webpack synthetics, reconstructs the tree correctly when the same path shows up with different content in different bundles, and exports a single `.zip` with the full project tree. No scripting required. A single-map recovery is a ten-minute manual job; a whole-site recovery across 20 bundles would take hours of scripting to get right.

Real-world example

Alternative methods

Troubleshooting

Caveats

What to do next

Once you have the reconstructed source tree, the follow-up questions are usually: how do I find the exact version of every library (see 'find the exact version of an npm package'), which files are author code vs vendored code, and what can I actually learn from reading it. The extract-package-json guide gives you the authoritative per-library version list from any sourcemap.

FAQ

Related