Source Mapping

Ryan Seddon

Me

Source Mapping?

Let me paint a picture

A Source Map:

  • Maps generated to original code

  • JSON structure with mappings

  • Source map V3 Spec

Real world use

Need to open in webkit nightly/chrome canary with source maps enabled

How it works

  • Closure compiler has a flag to generate source map 
    
--create_source_map ./map.js.map --source_map_format=V3
  • Generated code needs a special comment at the bottom of the file 
    
//@ sourceMappingURL=map.js.map

Dev tools consumes a map and reconstructs original source


var map = {
    version : 3,
    file: "map.js",
    sourceRoot : "",
    sources: ["foo.js", "bar.js"],
    names: ["src", "maps", "are", "fun"],
    mappings: "AAgBC,SAAQ,CAAEA;CAAsB"
}

Mappings


mappings: "AAgBC,SAAQ,CAAEA;CAAsB"
  • Semi colons (;) denote lines in generated code
  • Commas (,) denote a segment of code
  • Each segment is encoded into a Base64 VLQ value

More than just javascript

  • Coffeescript support, video of it working in Firefox

  • Talk of SASS and LESS so not just scripting langs

  • Firefox intern also started adding source map generation to uglifyjs

Browser/node.js lib

More detailed info

Cross posting an article on my blog and HTML5Rocks.com. Should be live real soon.

Thanks