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.

Summary

  • 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

This article explains how to interact with JavaScript Source Maps in the DevTools Sources tool.

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:

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.

When running Source Maps in DevTools, you should notice that the JavaScript is not compiled and all of the individual JavaScript files it references are displayed. Source Maps in DevTools is using source mapping, but the underlying functionality actually runs the compiled code. Any errors, logs, and breakpoints map to the dev code for awesome debugging. So in effect it gives you the illusion that you are running a dev 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 (...) > Settings. On the Preferences pane, under Sources, turn on Enable JavaScript Source Maps. You may also turn on the Enable CSS Source Maps.

Enable Source Maps

Debugging with Source Maps

When debugging your code and Source Maps enabled, Source Maps show in two places:

  1. In the console (the link to source should be the original file, not the generated one)
  2. 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.

//# sourceURL=source.coffee

Navigate to the following page.

Complete the following actions.

  1. Open DevTools and navigate to the Sources tool.
  2. Enter in a filename into the Name your code: input field.
  3. Choose the compile button.
  4. An alert appears, showing the evaluated sum from the CoffeeScript source.

If you expand the Sources sub-panel you now display a new file with the custom filename you entered earlier. If you double-click to view this file, it contains the compiled JavaScript for the original source. On the last line, however, is a // @sourceURL comment indicating the original source file. This may help you with debugging while working with language abstractions.

Work with sourceURL

Note

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).

Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 International License.