最近、ようやく使い始めたsass(scss)のネタです。
「chromeのデベロッパーツールで元scssファイルの何行目なのかを知る方法を @seisuke さんから教えてもらいました。」
と @waking から教えてもらいました（ややこしい）
その設定方法が意外にわかりづらかったので画面キャプチャ撮りながら、自分用にメモしてみました。
前提条件)
- Mac OS 10.7
- Chrome バージョン 24.0.1312.52
- Compass ( Compass.app )
途中でchromeを2回再起動します。
1. Chromeのデベロッパー ツールのテストを有効にする
chrome://flags
とChromeでアクセスすると以下のような設定画面が表示されます。
この中から「 Chromeのデベロッパー ツールのテストを有効にする」 を探して有効にします。
「デベロッパー」でページ内検索すると探しやすいです。
2. デベロッパーツールの設定で「Suppot for SASS」有効にする
デベロッパーツールを表示して、一番右下の設定をクリック。
黒字の設定画面が出てきて、タブに「Experiments」が追加されているのでクリック。
(「Experiments」が表示されてない場合は、1の「デベロッパー ツールのテスト」が有効になっているか確認してください )
この中の「Support for SASS」にチェック。
ここで2回目のChrome 再起動。
一旦Chromeを終了して起動しなおしてみてください。
3. sass でオプション「デバック情報」を設定してコンパイル
sassコンパイル時にデバック情報を付与するように設定します。
（このデバック情報で元scssファイルの何行目、というのがわかるようになります）
compass.appの場合
compass.appの場合、「Change Options… > Debug Info」にチェックするだけ。
コマンドではコンパイル時に
[shell]
sass —debug-info ***.scss ***.css
[/shell]
と 「—debug-info」のオプションを指定すればOKらしいです。
(やったことがない汗）
結果： 「元scssの何行目」で表示されるように！
うぉー！！！
sassのファイル名と行数が表示されてる！
たくさんのsassをimportでcompact（結合化）してる場合とかのチェックに効果を発揮しそうです。
普通に1人でごりごり書いてる時は、熟知してる状態（のはず）なのでだいたいどのscssファイルのどのあたりって見当がつくんですけど、ちょっと時間空いたて忘れた時とか、ハマった時とかに良さそう。
デバック情報を付与してるので、公開時にはデバック情報はきちんと消しておくこと。
忘れるなよ、俺。
コメント