Glossary · Web Development

Source Map

A source map is a file that maps minified or compiled JavaScript or CSS back to the original source, so developer tools can show readable code and line numbers.

Updated October 6, 2026

A source map is a JSON file, usually ending in .map, that records how each position in generated code corresponds to the original source file and line. Browsers load it when developer tools are open.

Why it matters

Production code is minified and bundled, so a stack trace like app.js:1:48213 is useless. With a source map, error tools and the browser show the original filename and line. Source maps can expose your unminified code if published publicly, so some teams upload them only to their error tracker.

Example

The last line of a bundle points to its map:

//# sourceMappingURL=app-3f9a1c.js.map

The map contains fields such as version, sources and mappings, the last being an encoded string of position data.

Common mistakes

  • Deploying maps publicly when the source is meant to stay private.
  • Forgetting to upload maps to the error-monitoring service, so reports stay unreadable.
  • Assuming maps slow visitors. They load only with developer tools open.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

Keep reading

Error fix · Developer errorsNode.js "JavaScript heap out of memory" Fix and DiagnosisFix "FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory". Raise --max-old-space-size, find leaks and tune builds and containers.4 min readGlossary · Web DevelopmentAngularAngular is a TypeScript-based web application framework from Google that provides components, routing, forms and dependency injection in one package.Glossary · Web DevelopmentBootstrapBootstrap is a widely used front-end framework of prebuilt CSS components, a grid system and optional JavaScript for building responsive sites quickly.Glossary · Web DevelopmentCSS Box ModelThe CSS box model describes how every element is a rectangle made of content, padding, border and margin, which together determine its size and spacing.Guide · Hosting & CDNCDN Explained: What It Does, When You Need One, and How Caching WorksUnderstand how a content delivery network works, which headers control caching, what origin shield does, when a CDN helps or hurts, and how to verify it is working.7 min readGuide · Hosting & CDNCloudflare Cache Rules and Purge: What Gets Cached and How to Clear ItHow Cloudflare decides what to cache, how to read cf-cache-status, build cache rules, set TTLs, and purge by URL, tag, prefix or everything without hurting performance.7 min read

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.