Help us understand the problem. What is going on with this article?

ChromeのDeveloper ToolsでSassのデバッグ

More than 3 years have passed since last update.

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.rbsourcemap = 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.cssstyle.css.mapの出力先の階層が異なってしまう。)また、移動させてもstyle.css.map内のsourcesがずれてしまう。結局、シンボリックリンクを貼りまくることでごまかしたが、何かいい方法はないものか。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away