DevTools Tips: What are source maps?

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.

Many tools can generate source maps to accompany your code.

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

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:

• Introduction to JavaScript Source Maps
• What are source maps?
• Debug your original code instead of deployed with source maps