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 supply 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 supply Maps.
Begin with preprocessors
Make use of supported preprocessor
You should employ a minifier that is with the capacity of creating source maps. When it comes to many options that are popular see our preprocessor support area. For the view that is extended begin to see the supply maps: languages, tools along with other info wiki page.
The next types of preprocessors can be 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 people. After this you make use of the originals to set breakpoints and move through rule. Meanwhile, Chrome is clearly running your minified rule. This provides you the impression of managing a development web web site in production.
Enable Source Maps in settings
Debugging with Source Maps
Whenever debugging your rule and Source Maps enabled, supply Maps will show in 2 places:
- Within the console (the web link to supply ought to be the initial file, maybe maybe not the one that is generated
- Whenever stepping through rule (backlinks within the call stack should start the source file that is original
@sourceURL and displayName
Whilst not an element of the supply Map spec, the @sourceURL permits you to create development much simpler whenever using evals. have a glimpse at the hyperlink This helper looks quite similar in to the //# sourceMappingURL property and it is actually mentioned into the Source Map V3 specifications.
By like the after comment that is special your rule, that will be evaled, you are able to name evals and inline scripts and designs so they really appear as more rational names in your DevTools.
Navigate to the demo, then:
- Start the DevTools and go directly to the Sources panel.
- Type in a filename to the title your rule: input industry.
- Go through the compile switch.
- An alert will appear with the sum that is evaluated the CoffeeScript supply.