source-map-explainer

Annotates each line of a Javascript file with the location of the original source as determined by a sourcemap. Useful for debugging sourcemaps.

Usage:

source-map-explainer.js source_file.js source_file.js.map source_file.annotated.js

Given a Javascript source file and a sourcemap, it will generate a file showing where each line of the source file is mapped to.

Example:

Given this coffeescript file, example.coffee

# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

Which compiles to this javascript, example.js

// Generated by CoffeeScript 1.7.1
(function() {
  var number, opposite, square;

  number = 42;

  opposite = true;

  if (opposite) {
    number = -42;
  }

  square = function(x) {
    return x * x;
  };

}).call(this);

//# sourceMappingURL=example.map

Running this: source-map-explainer.js example.js example.map example.annotated.js

Produces this file example.annotated.js

/*  <nomap>  */  // Generated by CoffeeScript 1.7.1
/* example.coffee, 2, 0, 0 */  (function() {
/* example.coffee, 2, 0, 0 */    var number, opposite, square;
/*  <nomap>  */
/* example.coffee, 2, 0, 0 */    number = 42;
/*  <nomap>  */
/* example.coffee, 2, 0, 0 */    opposite = true;
/*  <nomap>  */
/* example.coffee, 6, 0, 0 */    if (opposite) {
/* example.coffee, 6, 0, 0 */      number = -42;
/*  <nomap>  */    }
/*  <nomap>  */
/* example.coffee, 2, 0, 0 */    square = function(x) {
/* example.coffee, 9, 16, 11 */      return x * x;
/* example.coffee, 9, 9, 2 */    };
/*  <nomap>  */
/*  <nomap>  */  }).call(this);
/*  <nomap>  */
/*  <nomap>  */  //# sourceMappingURL=example.map

Motivation

I was debugging sourcemaps generated by Webpack (a fantastic tool BTW), and found it difficult to determine if my generated sourcemaps were right or not. This tool made it easy to tell whether my output javascript files were mapping to my original source files correctly. When I was looking for a tool like this, I was searching for "debugging sourcemaps", "sourcemap checker". Maybe those keywords will help someone else stumble here without having to write their own version of this tool. :)

Installation

git clone <this repo>

Tests

Sadly, no. I did include some example files in the examples folder though. :)

Author

Taylor Brown @thetaytay

License

MIT Licensed. Have fun.