Get started with preprocessors

This article explains how to interact with JavaScript Source Maps in the DevTools Sources Panel. For a first overview of what preprocessors are, how they can help and how Source Maps work, head over to Set Up CSS & JS Preprocessors.

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.

When running Source Maps in DevTools, you'll notice that the JavaScript isn't compiled and you can see all the individual JavaScript files it references. This is using source mapping, but behind the scenes actually runs the compiled code. Any errors, logs and breakpoints will map to the dev code for awesome debugging! So in effect it gives you the illusion that you're running a dev site in production.

Enable Source Maps in settings

Source Maps are enabled by default (as of Chrome 39), but if you'd like to double-check or enable them, first open DevTools and click the settings cog . Under Sources, check Enable JavaScript Source Maps. You might also check Enable CSS Source Maps.

Debugging with Source Maps

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.

An alert will appear with the evaluated sum from the CoffeeScript source.

If you expand the Sources sub-panel you will now see a new file with the custom filename you entered earlier. If you double-click to view this file it will contain the compiled JavaScript for our original source. On the last line, however, will be a // @sourceURL comment indicating what the original source file was. This can greatly help with debugging when working with language abstractions.

Feedback

Was this page helpful?

Great! Thank you for the feedback. If you have any ideas on how we can improve, please
open an issue.
Sorry to hear that. Please open an
issue and tell us how we can improve.