If you expand the Sources sub-panel you will now see a new file with the custom filename you entered earlier. An alert will appear with the evaluated sum from the CoffeeScript source.Enter in a filename into the Name your code: input field.Open the DevTools and go to the Sources panel.This helper looks very similar to the //# sourceMappingURL property and is actually mentioned in the Source Map V3 specifications.īy 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. While not part of the Source Map spec, the allows you to make development much easier when working with evals. When stepping through code (the links in the call stack should open the original source file).In the console (the link to source should be the original file, not the generated one).When debugging your code and Source Maps enabled, Source Maps will show in two places: You might also check Enable CSS Source Maps.

Under Sources, check Enable JavaScript Source Maps. 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. 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. This is using source mapping, but behind the scenes actually runs the compiled code. 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 gives you the illusion of running a development site in production. Meanwhile, Chrome is actually running your minified code. You then use the originals to set breakpoints and step through code. Source Maps from preprocessors cause DevTools to load your original files in addition to your minified ones.

Compilers ( Closure Compiler, TypeScript, CoffeeScript, Dart).

The following types of preprocessors are commonly used in combination with Source Maps: For an extended view, see the Source maps: languages, tools and other info wiki page. You need to use a minifier that's capable of creating source maps. This article explains how to interact with JavaScript Source Maps in the DevTools Sources Panel.

Verify that your web server can serve Source Maps.

Only use preprocessors capable of producing Source Maps.

You can then read and debug compiled code in its original source.

Use Source Maps to map minified code to source code.

Use source maps to map your source code to your compiled code. Keep your client-side code readable and debuggable even after you've combined, minified or compiled it.

Chrome crx file source code