Make Asset Pipeline work with Chrome DevTools Autosave

Question

Chrome DevTools Autosave doesn’t work with Rails Asset Pipeline. The culprit of the problem is in the assets URLs — I cannot decipher the actual file path by its URL. For example, /assets/application.css may refer to either app/assets/stylesheets/application.css, lib/assets/stylesheets/application.css, or vendor/assets/stylesheets/application.css.

I wonder, how do I change assets URL to one of the following:

• /app/assets/stylesheets/application.css (matches exactly actual file path, perfect solution)
• /assets/application.css?source_url=app/assets/stylesheets/application.css (introduces source_url query parameter)

I would appreciate any help writing Rails plugin for that.

---

Update: I filled an issue to sprockets.

Answer 1

I'll try to get the ball rolling, but I'd have to do a lot more to verify or provide a better answer, so I'll mark this answer community wiki. That way others can answer below and or edit this post.

I've had to set up asset pipelining for Sinatra, and generally speaking, in the latest versions of Sprockets (which is used to provide the asset pipelining in Rails) the Sprockets::Asset class has methods to obtain the path and logical path.

I believe Rails uses the asset_path helper to generate the public facing url from the Sprockets class. This in turn appears to use the AssetPaths#compute_public_path instance method. A good first step would be to modify these parts of the code to add a source_url parameter based on your parsing of the source.pathname. This is assuming that source is an instance of Sprockets::Asset in some form or another.

Answer 2

I'm not quite sure how you expect the source to come from but it's already provided by ActionView::Helpers::AssetTagHelper

http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html

image_tag("rails.png")
# => <img alt="Rails" src="http://assets.example.com/images/rails.png?1230601161" />

stylesheet_link_tag("application")
# => <link href="http://assets.example.com/stylesheets/application.css?1232285206" media="screen" rel="stylesheet" type="text/css" />