Maintain your client-side rule readable and debuggable even with you have combined, minified or put together it. Utilize supply maps to map your supply rule to your put together rule.
- Utilize supply Maps to map code that is minified source rule. Then you’re able to read and debug put together rule in its initial supply.
- Only utilize preprocessors with the capacity of creating supply Maps.
- Verify that the internet host can provide Source Maps.
Begin with preprocessors
Make use of a supported preprocessor
You should utilize a minifier that is with the capacity of creating source maps. When it comes to many popular choices, see our preprocessor help area. For an extensive view, look at supply maps: languages, tools as well as other information wiki page.
Listed here types of preprocessors are generally found in combination with Source Maps:
Supply Maps in DevTools Sources panel
Source Maps from preprocessors cause DevTools to load your initial files along with your minified ones. After this you make use of the originals to create breakpoints and move through rule. Meanwhile, Chrome is really operating your minified rule. This provides you the impression of managing a development web web site in manufacturing.
Enable Source Maps in settings
Debugging with Source Maps
Whenever debugging your rule and Source Maps enabled, supply Maps will show in two places:
- Into the system (the hyperlink to supply must be the initial file, perhaps perhaps perhaps not the generated one)
- Whenever stepping through rule (the links within the call stack should start the initial supply file)
Whilst not an element of the Source Map spec, the @sourceURL permits you which will make development less difficult whenever using evals. This helper appears much the same in to the //# sourceMappingURL property and it is really mentioned when you look at the Source Map V3 specifications.
By such as the after comment that is special your rule, that will be evaled, it is possible to name evals and inline scripts and designs so that they appear as more rational names in your DevTools.
Navigate for this demo, then:
- Start the DevTools and go right to the Sources panel.
- Type in a filename in to the title your rule: input industry.
- Click the compile switch.
- An alert will appear with the evaluated sum from the CoffeeScript supply.