PDA

View Full Version : chrome SASS debug info: source map



deliriousrhino
23 May 2013, 5:02 PM
The new version of chrome canary add support from sass debugging
Which will make styling a sencha touch app a much better experience

see
http://www.youtube.com/watch?v=x6qe_kVaBpg&feature=youtu.be

I tried to follow a few tutorials to set it up
http://benfrain.com/add-sass-compass-debug-info-for-chrome-web-developer-tools/
http://fonicmonkey.net/2013/03/25/native-sass-scss-source-map-support-in-chrome-and-rails/
http://snugug.com/musings/debugging-sass-source-maps

How ever I am not sure how to create the sass source map with compass and sencha.

If someone you post an example of how to create the sass source map that would be great

slemmon
28 May 2013, 2:05 PM
While it doesn't create a true SASS source map you can do "sencha app build testing" which will create two different css files in the testing build folder. The -debug.css file will be the exploded / unminified css file with line numbers.

mrskitch
11 Jun 2013, 2:42 PM
The line comments are the first step, however there is also a debug property that needs to be set. In standard compass projects, you have to add this to the config.rb script:


sass_options = { :debug_info=>true }

This will print out debug info using the @media declaration in the CSS. It's trivial to do in generic compass projects (just add the line to the config.rb), however, Sencha CMD doesn't seem to have this option.

If there is a way to set this flag somewhere in the build process I'd be very interested to know as it'd cut theme development time down significantly. Is there a "master" config.rb script that developers can alter to achieve this?

mrskitch
21 Jun 2013, 2:19 PM
So I have this working now, it's not as great as I'd like it to be since Ext-JS has a TON of mixins and other imports. However here is how to get it working.

System Setup (versions here are important as Chrome 27+ only supports a certain type of source mapping)
Ext-JS 4.2.1
SASS (3.3.0.alpha.149)
Compass (0.12.2)

After that is established, go to your theme package and run
sencha package build This, more or less, builds a /build folder in your themes package. This build will also generate a
{theme-name}-all.scss which grabs all other mixins and includes needed to be compiled independently, this is crucial!

Once that is done, you can run something like this:

sass --compass --sourcemap {theme-name}-all.scss:resources/{theme-name}-all.css

Obviously change these to suit your environment. What this will do is build a compiled css file in the resources directory (which should be there), and it's important to compile there as all your images and other resources relatively linked to your stylesheet.

From there I changed the index.html (should be in the root of your app) to point to this newly generated css file. Chrome also needs to be setup to use this information, however that is beyond the scope of this information.

Hope this helps someone else!

kitedeskjames
19 Feb 2016, 12:38 PM
Is there any word on the addition of sourcemap support? The last post I see referencing it is from 2014.

I've tried the above and get about half way there, but there are too many issues with mixins and rb utilities.

llamerr
25 Apr 2016, 4:23 AM
Any updates? Chrome still don't recognize those `source maps` that sencha cmd generate. I think most of yo generators can do this from the box today?