DevTools Tips hero logo

DevTools Tips: What are source maps?

Published on

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:

Published on Improve article


CSS text-wrap: balance


From Web SQL to SQLite Wasm: the database migration guide

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.