Source maps: languages, tools and other info
Clone this wiki locally
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
Importer - Adds an
- Faye - Faye is a publish-subscribe messaging system based on the Bayeux protocol.
- Packr - Ruby version of Dean Edwards' Packer
- Mozilla source-map - Mozilla node lib to read and generate source maps
- 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)
- 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)
- 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.
- 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
Haxe - The well known multiplatform open-source programming language. Compiling with the
-debugflag will create a .map alongside the .js file
- Kotlin - Statically typed programming language for modern multiplatform applications. See Debugging Kotlin in browser
Sites with source maps enabled
Articles about 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
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)
source):CSS sourcemap support (
- Sass: As described above, this is supported in Sass 3.3.
--sourcemapflag was implemented in Compass 1.0. Alternatively you can add
sourcemap: trueto 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.