Map the processed code to your original source code, for debugging
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
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:
- Transpilers (Babel, Traceur).
- Compilers (Closure Compiler, TypeScript, CoffeeScript, Dart).
- Minifiers (UglifyJS).
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.
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:
To open DevTools, in Microsoft Edge, right-click a webpage, and then select Inspect. Or, press
I(Windows, Linux) or
In DevTools, click Settings () > Preferences.
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.
//# sourceURL to name evaluated files in the Sources tool
//# sourceURL pragma, such as
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:
- Securely debug original code by publishing source maps to the Azure Artifacts symbol server
- Securely debug original code by using Azure Artifacts symbol server source maps
- Source Maps Monitor tool
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.
Submit and view feedback for