butterfly/kb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
9e5bb17288
kb/data/developer.mozilla.org/en-US/docs/Glossary/Source_map-0.md

12 KiB
Raw Blame History

title chunk source category tags date_saved instance
Source map - Glossary | MDN 1/3 https://developer.mozilla.org/en-US/docs/Glossary/Source_map reference web, html, css, javascript, documentation 2026-05-05T05:45:43.514013+00:00 kb-cron

MDN HTML HTML: Markup language

HTML reference

HTML guides

Markup languages

CSS CSS: Styling language

CSS reference

CSS guides

Layout cookbook

JavaScriptJS JavaScript: Scripting language

JS reference

JS guides

Web APIs Web APIs: Programming interfaces

Web API reference

Web API guides

All All web technology

Technologies

Topics

Learn Learn web development

Frontend developer course

Learn HTML

Learn CSS

Learn JavaScript

Tools Discover our tools

About Get to know MDN better

Blog

  1. Glossary
  2. Source map

Source map

A source map is a JSON file format that maps between minified or transformed code received by the browser and its original unmodified form, allowing the original code to be reconstructed and used when debugging. Code executed by the browser is often transformed in some way from the original source created by a developer. There are several reasons for this:

  • To make delivering code from the server more efficient by combining and minifying source files.
  • To support older browsers by transforming modern features into older equivalents.
  • To use languages that browsers don't support, like TypeScript or Sass.

In these situations, debugging the original source is more intuitive than the source in the transformed state that the browser has downloaded. Browsers detect a source map via the SourceMap HTTP header for a resource, or a sourceMappingURL annotation in the generated code.

In this article

Example

For example, consider this SCSS syntax of Sass: During the build process, the SCSS is transformed into CSS. A source map file index.css.map is generated and linked to from the CSS in a comment at the end: This map file contains not only mappings between the original SCSS and the generated CSS but also the original SCSS source code in encoded form. It's ignored by the browser's CSS parser but used by browser's DevTools: The source map allows the browser's DevTools to link to specific lines in the original SCSS file and display the source code: Firefox DevTools focused on the li element in the DOM inspector. The style panel shows transformed CSS without nesting and a link to the third line of the index.scss file. Firefox DevTools with the index.scss file opened in the style editor. The editor is focused on the source code's third line in SCSS format with nesting.

See also