Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
35
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@usk83

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.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がずれてしまう。結局、シンボリックリンクを貼りまくることでごまかしたが、何かいい方法はないものか。

35
Help us understand the problem. What is going on with this article?
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
35
Help us understand the problem. What is going on with this article?