Databases
StackOverflow2013
Postsdbo
POBest practices for debugging the Rails asset pipeline
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBest practices for debugging the Rails asset pipeline
    primarykey
    data
    text
    <p>I'm working with a Rails 3 app, <code>bootstrap-sass</code>, and the asset pipeline, and I'm looking for some ideas on how to debug asset pipelines woes.</p> <p>When working in development, and compiling on the fly (i.e. including from lots of compiled css files), my app looks exactly how I expect it to.</p> <p>However when I use the asset pipeline to to compile assets into a single file, to test how it will behave in production, I think validation errors in the concatenated file <code>application.css</code> are causing browsers to stop evaluating the css correctly, and I'm seeing a number of display issues.</p> <p>When I look at the generated css files in development, and pass them through a css3 validator, I can see that validation errors occur when working with the vendored css files (in most cases these are due to vendor specific hacks, setting off the validator) - the files I've generated are passing validation when I run them through the w3c validator, and I've listed the pass/fail results in the sprockets files below:</p> <pre><code>/* * sprocket file in application.css * *= require_self *= require vendor *= require bootstrap-include # FAILS 474 ERRORS - presumably down to css hacks *= require DT_bootstrap # FAILS TWO ERRORS - presumably down to css hacks again *= require navbar # PASSES *= require footer # PASSES *= require main # PASSES *= require home # PASSES *= require widget # PASSES *= require search # PASSES *= require devise # PASSES *= require doohickeys # PASSES *= require datepicker # FAILS - again yet more cross browser css hacks suspected */ </code></pre> <h3>How should you start prepping files for production when concatenation breaks an app's visuals like this?</h3> <p>I'm asking on here to get an idea of how best to debug a compiled stylesheet like this - it sounds like something that has been solved before elegantly, but I'm not aware of a reliable, approach when dealing with a problem like this.</p> <p>For example, I can see that some rules are not being evaluated by using web developer inspector tools in Firefox and Webkit, but it's not clear to me how to go beyond that, short of doing some laborious binary search on the compiled CSS.</p> <p>Surely there are some more specialised tools available for situations like this already, like being able to compile only some files in <code>application.css</code>, and link to a precompiled <code>bootstrap-sass</code> file separately, or something similar?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USChris Adams
    1. USChris Adams
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POBest practices for debugging the Rails asset pipeline
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POBest practices for debugging the Rails asset pipeline
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POBest practices for debugging the Rails asset pipeline
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload