ELI5: what is a sourcemap

What is a source map?

A source map is like a translator that helps you read your code when it's been scrambled up. [3] When programmers send code to your browser, they often shrink it down to make it smaller and faster (like putting a big book into a tiny pocket dictionary), but that makes it really hard to read. [1]

Why do programmers use them?

Programmers write code that's easy to understand, but then they squish it down to make websites load faster. [1] A source map is a special file that says "this tiny squished part equals that readable part," so when something goes wrong, you can see the original readable version. [4]

How does a source map help you?

When you use your browser's developer tools to look for a bug, the source map shows you the original, easy-to-read code instead of the squished version. [1][4] It's like having the original blueprint instead of just seeing the final compressed building.

How do developers use them?

Developers just include the source map file (usually with a .map extension) alongside their code, and the browser automatically uses it to show readable code in the debugger. [3][4]