ChromeのDeveloper ToolsでSassのデバッグ

ChromeのDeveloper Toolsでスタイルシートのデバッグをするときに、コンパイル後のCSSファイルでなくSassのファイルの場所を表示するようにする。

CSSソースマップを使うわけだが、古い情報が多かったので今さらながらメモ。Compassを使用している想定。

環境

• OSX 10.9.5
• Google Chrome 42
• Sass 3.4.13
• Compass 1.0.3

sourcemapの生成

Sassのコンパイル時にsourcemapを生成させる。

config.rbにsourcemap = trueを追加するだけ。

sass_options = {:sourcemap => true}とかsass_options = {:debug_info => true}は不要。

環境設定によって振り分けて、以下のように編集する。

config.rb

sourcemap = (environment == :production) ? false : true

これでSassのコンパイル時にCSSのディレクトリと同階層に*.css.mapが生成される。

Chromeの設定変更

Developer Toolsの開いて、右上の歯車マークをクリック。

Settings>General>Sourcesの「Enable CSS source maps」と「Auto-reload generated CSS」をチェックする。

※ chrome://flags/から設定を変更したりする必要はなし。
※ 「デベロッパー ツールのテストを有効にする」等の設定をしても現在のバージョンにはSettings>Experimentsに「Support for Sass」などの項目はない

ChromeのDeveloper Toolsからデバッグ

以上でDeveloper Toolsを開くとSassファイルの場所が示されるようになる。

その他

WordPressのテーマを作成する際、style.cssをテーマディレクトリ直下に置かなくてはいけないため、これだけ他のCSSファイルと階層が異なり困った（コンパイル後のstyle.css、style.css.mapの出力先の階層が異なってしまう。）また、移動させてもstyle.css.map内のsourcesがずれてしまう。結局、シンボリックリンクを貼りまくることでごまかしたが、何かいい方法はないものか。