Source maps

[Benji York]

Here are a few things I found when I went on a source-maps-laden tangent
recently.


Enabling Source Maps

Chrom[e|ium] has source map support but it must be enabled.  Here is a
quick demo of how to do so and how the result looks:
https://www.youtube.com/watch?v=-xJl22Kvgjg


Minifier Options

The JS minifier we use (uglify) supports source maps, to enable them we
have to pass some command line options:

--source-map SOURCE_MAP_NAME --prefix=3 --source-map-root=app

In my testing SOURCE_MAP_NAME was either all-yui-source-map or
app-source-map, mirroring the two files we combine all our JS into.  For
simplicity we may want to transition to just putting everything into a
single file when we enable source maps.

The uglify help is reasonably good at explaining what these options do:

  --source-map       Specify an output file where to generate source map.
                                                                        [string]
  --source-map-root  The path to the original source to be included in the
                     source map.                                        [string]
  --in-source-map    Input source map, useful if you're compressing JS that was
                     generated from some other original code.
  -p, --prefix       Skip prefix for original filenames that appear in source
                     maps. For example -p 3 will drop 3 directories from file
                     names and ensure they are relative paths.

Note that if we ever start using something that generates JS
(e.g., CoffeeScript) that also generates source maps, we can use the
--in-source-map option to map through the minification and JS generated
by that process, all the way back to the real source code.


Serving the Source

Since the browser displays the original source code, we will have to
serve that source code.  The simplest thing would be to expose the "app"
directory structure under /app in the HTTP server.

-- 
Benji York