Source Maps with Chrome Canary and Rails
I was having problem piecing together all the steps to enabling source maps in Chrome Canary. I really wanted to get it working with the rails-sass gem that comes with Rails 3, and the Asset Pipeline.
Eventually I got things working, this is what I did:
In Chrome Canary navigate to
Search for "Developer Tools experiments" and enable
Enable sass support in the developer tools:
- View->Developer->Developer Tools.
- Click the gear in the bottom right.
- Choose the Experimental Tab.
config.sass.debug_info = true inside the
MyApp::Application.configure do # Settings specified here will take precedence over those in config/application.rb # ... # Do not compress assets config.assets.compress = false # Expands the lines which load the assets config.assets.debug = true # Enable source maps in the browser config.sass.debug_info = true end
This should cause rails-sass to include the
@media -sass-debug-info statements in your generated application.css file. I found it helpful to visit
/assets/application.css directly on the rails app to make sure that was working.
Reboot all the things. Reload rails server. Reload the browser.
Now the developer tools links to your sass files directly. Huzzah!