Rails 3.1 and sprockets make it harder to debug using firebug?

Question

In Rails 3.1, Sprockets are used to manage assets and package them into a single file. Which, in general, is not such a bad idea.

As quoted from an external source, which explains the issue at hand:

A problem with this approach is that it could make debugging harder, if you have to look at the "concatenated" CSS file in production to make sense of what code's included and not, it's harder to know what comes from where than if you just included the original source code files.

One solution would be to have a way to switch between "concatenated" and "normal" modes easily (maybe it's already possible, I don't know), so that normal development would be unimpeded. But you'd have to resort to the big concatenated file for debugging in production.

In Rails 3.0.X, our designer could easily pin-point the CSS setting using Firebug, which will indicate the file and line number directly, since all CSS files were separate and not packaged into one.

Or am I missing the point?

Answer 1

You can also use :

<%= stylesheet_link_tag "application", :debug => Rails.env.development? %>
<%= javascript_include_tag "application", :debug => Rails.env.development? %>

The files will not be concatenated in development but will in other environments.

Answer 2

Add ?debug_assets=true to any URL you want to debug. It splits the assets into their parts. Without it, concatenation happens according to your environment settings.

Answer 3

I think in the end (when the RC gets closer/becomes a release) you will be able to modify your config/application.rb with the following config.assets.css_compressor = false

But, atm, that doesn't really fix it since the stylesheet_asset_tag helper function isn't exactly compatible with the new pipeline and the :all modifier doesn't work, so...

In your application.html.erb view you will have to link each css

<%= stylesheet_link_tag "stylesheets/application" %>
<%= stylesheet_link_tag "stylesheets/foo" %>
<%= stylesheet_link_tag "stylesheets/bar" %>

As long as you have config.assets.enabled = true in your config/application.rb the root of assets will be (by default) /assets

You can fire up a rails console (rails c) and p Rails.application.assets to see the properties that are configurable in the mean time.

I agree not the best solution, but at this point (using an RC vs a stable release) its the best way I've found.

UPDATE: Digging around the edge api, found this ActionView::Helper sprockets_stylesheet_link_tag (http://edgeapi.rubyonrails.org/classes/ActionView/Helpers/SprocketsHelper.html) but it seems to be still an incomplete replacement for stylesheet_link_tag since it doesn't support :all and you still have to have the stylesheets/ segment in your function call. With that said, its prolly the function to use moving forward, so...

<%= sprockets_stylesheet_link_tag "stylesheets/foo" %>

Answer 4

You can also use :

<%= stylesheet_link_tag "application", :debug =>true%>
<%= javascript_include_tag "application", :debug => true %>

It Will gives you following output in view source of your browser

 <link href="/assets/application.css" media="screen" rel="stylesheet" type="text/css" />
 <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
 <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
 <script src="/assets/application.js?body=1" type="text/javascript"></script>