Source maps are files that map the transformed JavaScript back to the original source files, such as TypeScript or JSX, so developers can see the exact line that produced an error while debugging in the browser. They are generated during the build process and referenced by a comment at the end of the compiled script.
Also called: sourcemap
Why it matters
Without source maps, debugging a live site can become a time‑consuming hunt through minified code, leading to longer fix cycles and higher maintenance costs for the client. With them, developers locate and resolve issues quickly, keeping the site stable and reducing the risk of downtime.
How it works
When a bundler like Webpack or Vite processes the code, it creates a .map file that records the correspondence between each line of the original source and the generated bundle. The compiled JavaScript includes a comment such as //# sourceMappingURL=app.js.map, which browsers read to load the map and display the original source in devtools.
The mistake people make
A common mistake is publishing source map files to production, which can expose proprietary source code and reveal internal logic to anyone inspecting the site. This not only poses a security risk but also makes it easier for competitors to copy the implementation.
