Source maps: languages, tools and other info

Source maps are awesome so I put a wiki together to collect info about all the tools, sites, languages and articles that are talking about or using them. You can also discuss the spec itself on the mailing list.

Spec & Standards

• sourcemap v3 spec
• source-map.github.io
• mozilla.dev.js-sourcemap mailing list

Tools that generate source maps

• Closure Compiler - The Closure Compiler is a tool for making JavaScript download and run faster.
• Importer - Adds an #import statement to JavaScript-based languages. Generates a combined source map from all input files.
• Ender - the no-library library: open module JavaScript framework
• Faye - Faye is a publish-subscribe messaging system based on the Bayeux protocol.
• Packr - Ruby version of Dean Edwards' Packer
• Ruby Source map gem - Ruby library for interacting with the awesome javascript SourceMaps.
• Mozilla source-map - Mozilla node lib to read and generate source maps
• UglifyJS2 - JavaScript parser / mangler / compressor / beautifier toolkit
• JSMin - A fork of JSMin to add sourcemap support (and it's companion grunt plugin)
• esmangle - js minifier / mangler
• AjaxMin - JS/CSS minifier for .NET
• browserify - Use a node-style require() to organize your browser code and load modules installed by npm.
• webpack - similar to browserify
• multi-stage-sourcemap - helper module for multi-level source maps
• Gobble - flexible build system for JS/CSS
• RollUp - Bundler for ES2015 modules

Tools that consume source maps

• Chrome DevTools
• Firefox DevTools
• Edge DevTools (F12)
• WebStorm
• Sentry - error logging
• SourceMap Validator
• Sourcemap visualisation tool (qfox)
• sokra/source-map-visualization & visualization launcher
• node-sourcemap-support - Adds source map support to node.js (for stack traces)
• sourcemapper - Parses sourcemaps to recreate the original source tree based on the sourcemap file paths.

Languages that compile to javascript and support source map generation

• JSX - a faster, safer, easier alternative to JavaScript
• GWT - GWT (formerly the Google Web Toolkit). GWT's mission is to radically improve the web experience for users by enabling developers to use existing Java tools to build no-compromise AJAX for any modern browser.
• Traceur - Traceur is a JavaScript.Next ➡ JavaScript compiler that allows you to use features from the future today.
• TypeScript - TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.
• CoffeeScript - CoffeeScript supports source maps as of version 1.6.
• CoffeeScript Redux - The redux compiler does create sourcemaps, is not production ready, but is progressing quickly.
• LiveScript - LiveScript supports source maps as of version 1.4.0
• Dart - JavaScript alternative from Google
• Haxe - The well known multiplatform open-source programming language. Compiling with the -debug flag will create a .map alongside the .js file
• Opal - a Ruby to JavaScript compiler
• Scala.js - a Scala to JavaScript compiler
• WebSharper - WebSharper provides robust functional web abstractions and an F# to JavaScript compiler, and supports the generation of source maps as of WebSharper 3 alpha.
• Transcrypt - Compiles extensive subset of Python 3.5 to fast, readable Javascript, incl. multiple inheritance, seamless JS lib interop, operator overloading, keyword args and call memoization for speed. Open source.
• Kotlin - Statically typed programming language for modern multiplatform applications. See Debugging Kotlin in browser

Sites with source maps enabled

• HTML5Please

Articles about source maps

• HTML5 Rocks - Introduction to JavaScript Source Maps
• The Breakpoint Ep 3: The Sourcemap Spectacular with Paul Irish and Addy Osmani - shows CoffeeScript ➡ UglifyJS ➡ min.js and back again.
• Source map support added to Packr and Jake
• Using Source Maps with TypeScript
• CoffeeScript Source Maps
• 7-minute Guide to Source Maps With CoffeeScript and Uglify.js
• Source Maps 101
• Dynamic Source Maps
• Example of Dynamic Source Maps
• Source maps in browserify
• All you need to know about jQuery Source Maps - Brief tutorial for viewing in Chrome
• Compiling to JavaScript, and Debugging with Source Maps - How to write a compiler targeting JS and have it support source maps.

Source maps for CSS

• DevTools: Working with CSS Preprocessors - full documentation and setup for using CSS sourcemaps.
• The Breakpoint on real CSS sourcemaps - Sass landed v3 sourcemap generation which will debut soon (along with Chrome DevTools UI support)

CSS sourcemap support (source):

• Sass: As described above, this is supported in Sass 3.3.
• Compass: The --sourcemap flag was implemented in Compass 1.0. Alternatively you can add sourcemap: true to your config.rb file. Demo repo here. Development notes are in issue 1108.
• Less: Implemented in 1.5.0. See issue #1050 for details and usage patterns.
• Autoprefixer: Implemented in 1.0. Autoprefixer docs explain how to use it, along with absorbing an input sourcemap (from another preprocessor).
• Libsass: Implemented.
• Stylus: Implemented. See the latest in issue #1655.