Source Maps

Thorsten Lorenz

twitter @thlorenz | github @thlorenz | irc thlorenz

What is a source map?

Maps generated things to the source they were generated from

Apple sauce maps

browserify bundle

bundle

browserify bundle

annotated-bundle

The perfect Illusion

bundle
source-map-visualization

ES6 bundled

annotated-es6 es6ify

SASS bundled

scss source scss sidebar
sass-resolve

How to provide source maps

Zuul

  • maps stack traces with stack-mapper
  • source maps in separate file
  • source maps include actual code

Zuul

Live edit browserified code in chrome devtools

How does it work with browserify?

Debug CoffeeScript

bundle

CoffeeScript compiled with source maps

bundle

browserify bundle

bundle

browserify bundle

annotated-bundle coffeeify

How do the mappings work?

How do the mappings work?

"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;;ACLA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACPA;AACA;AACA;AACA;AACA;AACA"
  • VLQ Encoded to save space
  • original sourcemap was 10 times the size of the generated code
  • using VLQ it's 2.25 times
  • html5rocks post

Future of Source Maps

Better support for compiled languages via AST with debugging annotations

Beyond Source Maps

Thanks!

Headshot

Thorsten Lorenz

twitter @thlorenz | github @thlorenz | irc thlorenz