Map preprocessed code to source code
Keep your client-side code readable and debuggable even after you combine, minify, or compile it. Use source maps to map your source code to your compiled code.
- Use Source Maps to map minified code to source code. You are then able to read and debug compiled code in the original source.
- Only use pre-processors capable of producing Source Maps.
- Verify that your web server is able to serve Source Maps.
Get started with preprocessors
Use a supported preprocessor
Use a minifier that is capable of creating source maps. For an extended view, navigate to Source maps: languages, tools and other info wiki page.
The following types of preprocessors are commonly used in combination with Source Maps:
- Transpilers (Babel, Traceur)
- Compilers (Closure Compiler, TypeScript, CoffeeScript, Dart)
- Minifiers (UglifyJS)
Source Maps in DevTools Sources tool
Source Maps from preprocessors cause DevTools to load your original files in addition to your minified ones. You then use the originals to set breakpoints and step through code. Meanwhile, Microsoft Edge is actually running your minified code. The running of the code gives you the illusion of running a development site in production.
Enable Source Maps in settings
Source Maps are enabled by default, but if you want to double-check or enable them; first open DevTools, choose Customize and control DevTools (
Debugging with Source Maps
When debugging your code and Source Maps enabled, Source Maps show in two places:
- In the console (the link to source should be the original file, not the generated one)
- When stepping through code (the links in the call stack should open the original source file)
@sourceURL and displayName
While not part of the Source Map spec, the
@sourceURL allows you to make development much easier when working with evals. The helper is displayed similar to the
//# sourceMappingURL property and is mentioned in the Source Map V3 specifications.
By including the following special comment in your code, which is evaled, you are able to name evals and inline scripts and styles so each appears as more logical names in your DevTools.
Navigate to the following page.
Complete the following actions.
- Open DevTools and navigate to the Sources tool.
- Enter in a filename into the Name your code: input field.
- Choose the compile button.
- An alert appears, showing the evaluated sum from the CoffeeScript source.
// @sourceURL comment indicating the original source file. This may help you with debugging while working with language abstractions.
Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Meggin Kearney (Technical Writer) and Paul Bakaus (Open Web Developer Advocate, Google: Tools, Performance, Animation, and UX).
This work is licensed under a Creative Commons Attribution 4.0 International License.