Source maps: languages, tools and other info

Johan Stuyts edited this page Aug 15, 2017 · 43 revisions

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. t

Spec & Standards

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

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

Articles about source maps

Source maps for CSS

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.
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.