![]() ![]() ![]() You'll also need to upload your original files so the dev tools can reference and display them when necessary. The source map file will only be downloaded if you have source maps enabled and your dev tools open. This header also gets around the issue of referencing source maps in languages that don't support single-line comments. Like the comment this will tell your source map consumer where to look for the source map associated with a JavaScript file. If you don't like the idea of the weird comment you can alternatively set a special header on your compiled JavaScript file: X-SourceMap: /path/to/file.js.map This syntax change also affects sourceURL. Currently Chrome Canary, WebKit Nightly and Firefox 24+ support the new comment pragma. Previously the comment pragma was but due to some issues with that and IE conditional compilation comments the decision was made to change it to //#. ![]() This enables developer tools to map calls back to their location in original source files. (I'll explain how to use it later.) Once you've combined and minified your JavaScript, alongside it will exist a source map file.Ĭurrently, the Closure compiler doesn't add the special comment at the end that is required to signify to a browsers dev tools that a source map is available: //# sourceMappingURL=/path/to/file.js.map The only JavaScript compiler/minifier that has support, at the moment, for source map generation is the Closure compiler. The textarea in the demo also allows you to write ES6 which will be compiled on the fly and generate a source map plus the equivalent ES3 code.ĭemo: Write ES6, debug it, view source mapping in action How does the source map work? Take a look at this demo of ES6 traits and classes being used like they're supported natively in the browser, thanks to the source map. ![]() The Traceur compiler also generates a source map. Ray Cromwell of the GWT team did an awesome screencast showing source map support in action.Īnother example I've put together uses Google's Traceur library which allows you to write ES6 (ECMAScript 6 or Next) and compile it to ES3 compatible code. The Google Web Toolkit (GWT) has recently added support for Source Maps. Take a look at this screencast of CoffeeScript being debugged in an experimental build of the Firefox console: Pretty much any language that compiles to JavaScript.In the future we could easily use almost any language as though it were supported natively in the browser with source maps: Right now source mapping is only working between uncompressed/combined JavaScript to compressed/uncombined JavaScript, but the future is looking bright with talks of compiled-to-JavaScript languages such as CoffeeScript and even the possibility of adding support for CSS preprocessors like SASS or LESS. Real worldīefore you view the following real world implementation of Source Maps make sure you've enabled the source maps feature in either Chrome Canary or WebKit nightly by clicking the settings cog in the dev tools panel and checking the "Enable source maps" option.įirefox 23+ has source maps enabled by default in the built in dev tools. Make sure your console is open so you can see the output. Select "Get original location" will query the source map by passing in the generated line and column number, and return the position in the original code. The demo allows you to right click anywhere in the textarea containing the generated source. Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. Source maps are a way to map a combined/minified file back to an unbuilt state. Have you ever wished you could keep your client-side code readable and more importantly debuggable even after you've combined and minified it, without impacting performance? Well now you can through the magic of source maps. Refer to What are source maps? for the latest information. X Homepage Warning: Source map specification has been updated and this article is no longer up to date. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |