← Lessons

quiz vs the machine

Gold1330

Frontend

The Source Maps

Map minified production code back to your original source so debugging stays readable.

4 min read · core · beat Gold to climb

Mapping built code to source

A source map is a file that maps positions in your built, minified output back to the original source code. After bundling, transpiling, and minifying, production code looks nothing like what you wrote, so an error at line one column five thousand is meaningless without a map.

  • The build produces both the output file and a matching map.
  • The map links each generated position to an original file, line, and column.
  • Devtools use it to show your real code and readable stack traces.

Using them safely

Source maps make debugging production possible without shipping unminified code to every user.

  • Browsers load a map only when devtools are open.
  • A comment or header tells the browser where the map lives.
  • You can host maps privately or upload them to an error tracker.

The caveat is exposure. A public source map can reveal your original source to anyone, so for closed code teams keep maps off the public path and feed them only to monitoring tools. Either way, they turn cryptic minified errors into traces you can act on.

Key idea

A source map links minified output back to your original files, lines, and columns so devtools and error trackers show readable stack traces, but a public map exposes source, so closed teams keep maps private.

Check yourself

Answer to earn rating on the learn ladder.

1. What does a source map do?

2. What is a risk of exposing source maps publicly?