--- title: "Source map - Glossary | MDN" chunk: 1/3 source: "https://developer.mozilla.org/en-US/docs/Glossary/Source_map" category: "reference" tags: "web, html, css, javascript, documentation" date_saved: "2026-05-05T05:45:43.514013+00:00" instance: "kb-cron" --- * [Skip to main content](https://developer.mozilla.org/en-US/docs/Glossary/Source_map#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Glossary/Source_map#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides") Web API guides * [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) * [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) * [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API) * [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API) * [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) All [All web technology](https://developer.mozilla.org/en-US/docs/Web) Technologies * [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) * [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) * [URI](https://developer.mozilla.org/en-US/docs/Web/URI) * [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions) * [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) * [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver) * [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references") Topics * [Media](https://developer.mozilla.org/en-US/docs/Web/Media) * [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance) * [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy) * [Security](https://developer.mozilla.org/en-US/docs/Web/Security) * [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) Learn [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) Frontend developer course * [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) * [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) * [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/) * [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar) Learn HTML * [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) Learn CSS * [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics) * [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout) Learn JavaScript * [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting) Tools Discover our tools * [Playground](https://developer.mozilla.org/en-US/play) * [HTTP Observatory](https://developer.mozilla.org/en-US/observatory) * [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator) * [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator) * [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator) * [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter) * [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer) * [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator) About Get to know MDN better * [About MDN](https://developer.mozilla.org/en-US/about) * [Advertise with us](https://developer.mozilla.org/en-US/advertising) * [Community](https://developer.mozilla.org/en-US/community) * [MDN on GitHub](https://github.com/mdn) [Blog](https://developer.mozilla.org/en-US/blog/) 1. [Glossary](https://developer.mozilla.org/en-US/docs/Glossary) 2. [Source map](https://developer.mozilla.org/en-US/docs/Glossary/Source_map) # Source map A **source map** is a [JSON](https://developer.mozilla.org/en-US/docs/Glossary/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](https://developer.mozilla.org/en-US/docs/Glossary/TypeScript) or [Sass](https://sass-lang.com/). 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`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/SourceMap) HTTP header for a resource, or a `sourceMappingURL` annotation in the generated code. ## In this article * [Example](https://developer.mozilla.org/en-US/docs/Glossary/Source_map#example) * [See also](https://developer.mozilla.org/en-US/docs/Glossary/Source_map#see_also) ## [Example](https://developer.mozilla.org/en-US/docs/Glossary/Source_map#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.](https://developer.mozilla.org/en-US/docs/Glossary/Source_map/inspector.png) ![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.](https://developer.mozilla.org/en-US/docs/Glossary/Source_map/style-editor.png) ## [See also](https://developer.mozilla.org/en-US/docs/Glossary/Source_map#see_also) * [Source map format specification](https://tc39.es/ecma426/2024/) * HTTP [`SourceMap`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/SourceMap) response header * [Firefox Developer Tools: using a source map](https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/use_a_source_map/index.html)