![Sofia Emelianova](https://web.dev/images/authors/sofiayem.jpg) Sofia Emelianova [GitHub](https://github.com/sofiayem)

<br />

[Source maps](https://web.dev/articles/source-maps) let you keep your code readable and debuggable even after you've combined and minified it, without impacting performance.

[Video](https://www.youtube.com/watch?v=FIYkjjFYvoI)

When using various transpilers, minifiers, and bundlers, the code you deploy differs from the code you author. To improve network performance, these tools compress the code into a single line, remove unnecessary characters, and shorten variables.

![Minified code and the original one.](https://developer.chrome.com/static/blog/devtools-tips-23/image/minified-code-the-origin-fa7defd8c54a8.png)

[Many tools](https://developer.chrome.com/docs/devtools/javascript/source-maps.md.txt#use_a_supported_preprocessor) can generate source maps to accompany your code.

![A source map.](https://developer.chrome.com/static/blog/devtools-tips-23/image/a-source-map-23de980e03181.png)

Chrome DevTools reads both the deployed code and source maps and lets you [debug your code](https://developer.chrome.com/docs/devtools/javascript/source-maps.md.txt#debugging_with_source_maps) as you normally would, even with [breakpoints](https://developer.chrome.com/docs/devtools/javascript/breakpoints.md.txt).

![Using breakpoints in DevTools in an authored source file.](https://developer.chrome.com/static/blog/devtools-tips-23/image/using-breakpoints-devtoo-42c1c7275a819.png)

To better understand how source maps work, check out the [source maps visualizer](https://sokra.github.io/source-map-visualization/).

Additionally, source maps can have [extensions](https://sourcemaps.info/spec.html#h.ghqpj1ytqjbm). If you build tools and frameworks, consider supporting them. Check out this [Case Study: Better Angular Debugging with DevTools](https://developer.chrome.com/blog/devtools-better-angular-debugging.md.txt), where the DevTools Team and Angular improved the debugging experience in DevTools by supporting the [`x_google_ignoreList` extension](https://developer.chrome.com/articles/x-google-ignore-list).

To learn more, see:

- [Introduction to JavaScript Source Maps](https://developer.chrome.com/blog/sourcemaps.md.txt)
- [What are source maps?](https://web.dev/articles/source-maps)
- [Debug your original code instead of deployed with source maps](https://developer.chrome.com/docs/devtools/javascript/source-maps.md.txt)