DevTools Tips: What are source maps?

Sofia Emelianova
Sofia Emelianova

Source maps let you keep your code readable and debuggable even after you've combined and minified it, without impacting performance.

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.

Many tools can generate source maps to accompany your code.

A source map.

Chrome DevTools reads both the deployed code and source maps and lets you debug your code as you normally would, even with breakpoints.

Using breakpoints in DevTools in an authored source file.

To better understand how source maps work, check out the source maps visualizer.

Additionally, source maps can have extensions. If you build tools and frameworks, consider supporting them. Check out this Case Study: Better Angular Debugging with DevTools, where the DevTools Team and Angular improved the debugging experience in DevTools by supporting the x_google_ignoreList extension.

To learn more, see: