Map Preprocessed Code to Source Code
Keep your client-side code readable and debuggable even after you've combined, minified or compiled it. Use source maps to map your source code to your compiled code.
- Use Source Maps to map minified code to source code. You can then read and debug compiled code in its original source.
- Only use preprocessors capable of producing Source Maps.
- Verify that your web server can serve Source Maps.
Get started with preprocessors #
Use a supported preprocessor #
You need to use a minifier that's capable of creating source maps. For an extended view, see the 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 panel #
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, Chrome is actually running your minified code. This gives you the illusion of running a development site in production.
Enable Source Maps in settings #
Debugging with Source Maps #
When debugging your code and Source Maps enabled, Source Maps will 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. This helper looks very similar to the
//# sourceMappingURL property and is actually mentioned in the Source Map V3 specifications.
By including the following special comment in your code, which will be evaled, you can name evals and inline scripts and styles so they appear as more logical names in your DevTools.
Navigate to this demo, then:
- Open the DevTools and go to the Sources panel.
- Enter in a filename into the Name your code: input field.
- Click on the compile button.
- An alert will appear with the evaluated sum from the CoffeeScript source.
// @sourceURL comment indicating what the original source file was. This can greatly help with debugging when working with language abstractions.