Map the processed code to your original source code, for debugging

To see and work with your original source code when you're debugging JavaScript in DevTools, rather than having to work with the compiled and minified version of your code that's returned by the web server, use source maps.

Source mapping keeps your client-side code readable and debuggable, even after your build process compiles and minifies your code and combines it into a single file. Source maps map your compiled, minified code to your original source code files. In DevTools, you can then read and debug your familiar, original source code, instead of the unrecognizable transformed and compiled code.

To use this source mapping technique, you must use pre-processors that can produce source maps. Make sure your web server can serve source maps.

Get started with preprocessors

This article explains how to interact with JavaScript source maps in the Sources tool.

Use a supported preprocessor

Use a minifier that is 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:

Source maps in the 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 isn't compiled, and all of the individual JavaScript files that 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 original source code, for easier debugging.

Enable source maps in Settings

Source maps are enabled by default.

To make sure that source maps are enabled:

  1. To open DevTools, in Microsoft Edge, right-click a webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS).

  2. In DevTools, click Settings (Settings icon.) > Preferences.

  3. In the Preferences page, in the Sources section, make sure the Enable JavaScript source maps checkbox and the Enable CSS source maps checkbox are selected:

    The Preferences page's Sources section with the 'Enable source maps' checkboxes selected.

  4. In the upper right of Settings, click the Close (x) button.

Debugging with source maps

When debugging your code and source maps are enabled, source maps are used in several places:

  • In the Console tool, links from log messages to source files go to the original files, not the compiled files.

  • When stepping through code in the Sources tool, the original files are displayed in the Navigator pane on the left.

  • In the Sources tool, the links to source files that appear in the Call Stack of the Debugger pane open the original source files.

Use //# sourceURL to name evaluated files in the Sources tool

The //# sourceURL pragma, such as // # sourceURL=myFileName, is a convention that allows you to make development much easier when working with evaluated JavaScript files. There can be space characters before or after the #.

When loading JavaScript files and evaluating them using the eval() function, the Sources tool doesn't have a file name to display these files in the Navigator pane. By including the following special comment in your code, you can name evaluated files, inline scripts, and styles, so that each one appears as a recognizable file name in the Sources tool. For example:

//# sourceURL=source.coffee

See also

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.