How can I get the Rails asset pipeline to produce source maps?

Question

I'd like to have Rails produce source maps alongside the compiled coffeescript/minified JS, for better error logging. There doesn't seem to be comprehensive documentation on the net on how to do this, yet, though. Has anyone done this?

I'm on Rails 3.2 and Heroku.

Solution 1

Rails supports source maps for minified JavaScript! Rails relies on Sprockets for asset compilation, and source maps support was added to Sprockets in this pull request.

Solution 2

If you don't really want source-maps, but instead just want line numbers in coffee-script compile exceptions try this:

It used to be that just having coffee-rails in your Gemfile would produce exceptions with line numbers in the original coffeescript source. Then, they disappeared with a line-number-less exception. I did some digging, and I found that coffee-script-source 1.5.x gave line numbers in the compilation exceptions, while coffee-script-source 1.6.x did not. I believe is a bug, and I wouldn't be surprised if this was "fixed" in the future.

# Gemfile
gem 'coffee-rails', '~> 4.0.0'
  gem 'coffee-script-source', '~> 1.5.0' # 1.6 doesn't include line numbers in exceptions

Then you'll get exceptions like ('coffee-script-source', '~> 1.5.0')

Showing /Users/.../app/views/layouts/application.html.erb where line #12 raised:

SyntaxError: missing } on line 15
  (in /Users/.../app/assets/javascripts/app.js.coffee)

Instead of ('coffee-script-source', '~> 1.6.3')

Showing /Users/.../app/views/layouts/application.html.erb where line #12 raised:

SyntaxError: missing }
  (in /Users/.../app/assets/javascripts/app.js.coffee)

Solution 3

Tested this. It works. https://github.com/markbates/coffee-rails-source-maps. However it makes your asset rendering much slower.

Solution 4

This looks like it should work: http://alexspeller.com/2012/09/15/Source_maps_for_coffeescript_in_rails.html

Though, keep in mind the warning at the end:

Important Note: this rather brutal hack replaces the normal coffeescript compiler by shelling out to the CoffeeScriptRedux compiler, which is not in fact finished. This is just a proof of concept, you probably shouldn’t use it.

So I wouldn't recommend running this in production, but if you have a staging environment (also on Heroku, also with minified Javascript) it might be useful.

View more solutions

Comments

[okliv]

source map - what is it?

[Vincent Woo]

Source maps are a way of mapping obfuscated/compiled/compressed source code back to its original form. html5rocks.com/en/tutorials/developertools/sourcemaps

[okliv]

did you see or hear if it is possible at all for now (in RoR development environment)?

[Vincent Woo]

There has been mention of this being possible in edge rails, and I have seen some hacks for coffeescript maps only.

[okliv]

hm... interesting... for now i just use "Reformat Code" feature in my IDE RubyMine. It reformats code to semi-readable state (return rows and tabs basically)... but, of course, it becomes not the same as original was

[Kazim Zaidi]

all answers talking about coffeescript here. I'm writing vanilla JS. Any insights from anyone?

[Joshua Pinter]

If you are using Sprockets 3.x, you can extend the uglifier minimizer to add sourcemaps via this blog article: blog.experteer.engineering/…

[wbyoung]

This can also be fixed with this patch that embeds the line information in the error message for the ruby-coffee-script gem.

[wbyoung]

If you're using source maps, this patch fixes issues with line numbers for syntax errors coffee-rails-source-maps gem.

[Qasim]

Your Edit's from 2014 - Just wanted to confirm that the branch has been released?

[Vincent Woo]

Sprockets 4.x is not yet out. You can track releases here: github.com/rails/sprockets/releases