Rails 3.2 Dev environment sourceMaps JavaScript support

Question

I am working on a Rails application using the Asset pipeline. Development.rb has the following:

config.assets.compress = false config.assets.compile = true config.assets.debug = true 

In Dev, resources are not combined, and each of them is serviced by Rails individually. At the moment, the number of assets that are received individually is more than 50. Therefore, a complete page reload is very slow.

I would like to combine them in at least several assets for faster loading times in the development environment, but, nevertheless, I lose the ability to debug / see them separately in Chrome dev tools. Example: http://d.pr/i/ZFge

There are two ways to solve this, as far as I know, after this:

  config.assets.debug = false 

and start serving them as concatenated assets.

• Old hacker way: @sourceUrl trick.
• New way: sourceMaps .

Is there a guide on how I can enable them in a rails application? I do not use CoffeeScript, so https://github.com/markbates/coffee-rails-source-maps does not help. Most Google searches lead to this.

I am looking for a solution for native JS.

Answer 1

I have not seen an existing solution to this problem. But the construction of one will be quite straightforward.

The gem uglifier is gem uglifier used by a js compressor.

Version 2 of uglifier has a mechanism for creating a sourcemap. It has the following syntax

 uglified, source_map = Uglifier.new.compile_with_map(source) 

The Rails resource pipeline allows you to specify a custom JS compressor (using the compress method) using the following syntax

 config.assets.js_compressor = Transformer.new 

read about it here

A simple Transformer class will look like this

 class Transformer def compress(string) if Rails.env.development? output, sourcemap = Uglifier.new.compile_with_map(string) # write the sourcemap to a file somewhere under public sourcemap_comment = "//@ sourceMappingURL=#{sourcemap_path}}\n" return output + sourcemap_comment else Uglifier.compile(string) end end end 

Note This is not a complete solution, just explaining the concepts. You can use this and add ways to make it more reliable.