ROCHAS

SassのデバッグにSource Mapsを使うべきたくさんの理由

SassやCompassをChrome Developer ToolsでデバッグしたいのにCSSしか参照できなくて困ったり、編集したコードをコピペするのが面倒、エディタに即時反映できたらいいのにって思ったことはありませんか? この悩みを、Source MapsとChrome拡張「Tincr」を使って解決する方法をご紹介をします。 一連の流れを動画に撮ってみました。

手順

  1. Source MapsでSass/Compassのデバッグする。

  2. Chrome拡張「Tincr」でChrome Developer ToolsからエディタにAuto Save、エディタからLive Reloadの両方をできるようにする。

Demo | Source Maps (CanaryかChromiumで設定するとSassを見ることができます。)

1. Source Mapsとは何か

Source Mapsとは、Sass、LESS、CoffeeScript、TypeScript、Closure Compiler、UglifyJS2、GruntのJSMinなど、コンパイルや圧縮されて難読化されたコードがオリジナルファイルの何行目になるのか、マッピング情報が書かれたファイルであり、元の読みやすい状態にしてくれる方法です。
Chrome Developer ToolsがSource Mapsに対応してくれたおかげで、メタ言語のデバッグがとても快適になりました。Fire FoxのアドオンFireSassでも対処しています。

通常Sassは.cssファイルしか見ることができないのですが、Source Mapsを使うと.sass(.scss)のファイル名と行番号が表示されます。

Source Maps

Source Mapsは今のところCanaryかChromium、Sass3.3.0の先行実装版が必要になりますが「debug-info」という従来の方法であればChromeとSass3.2.8の安定版で行えます。
じゃあSource Mapsのどこが便利なの?ということで、Sass/Compassで「debug-info」と「Source Maps」の使い方と違いを比べてみたいと思います。 手順は3stepです。

  1. chrome://flagsの設定
  2. Chrome Developer Toolsの設定
  3. ターミナルから--debug-info--sourcemapフラグを付与してコンパイル。

2. chrome://flags の設定

アドレスバーに chrome://flags と入力すると試験運用機能ページが開きます。ここから「デベロッパーツールのテストを有効」をクリックし再起動するとChrome Developer ToolsのSettingにEcperimentsの項目が追加されます。

chrome://flags/の設定

3. Chrome Developer Toolsの設定

Chrome Developer Toolsの右下のギアアイコンからSettingsを開き、Generalタブの「Enable source maps」と、Ecperimentsタブの「Support for Sass」にチェックを入れます。

Enable source maps

Support for Sass

これで設定は完了!CanaryかChromiumで先程のDemoからSassファイルが見えてたら成功。いよいよターミナルからコンパイルします。

4. Sassでdebug-infoを使ってみる(Chrome / Sass3.2.8)

$ sass --debug-info --watch style.scss:style.css

styleファイルが置かれているディレクトリから--debug-infoフラグを付与して監視します。
するとChrome Developer ToolsのStylesパネルにSassファイル名と行番号が表示されます。

$ sass --debug-info --watch style.scss:style.css

CSSファイルには全セレクタの横にデバッグ情報が書き出されます。ディレクトリの絶対パス(filename)と行番号(line)という非標準なセレクタが使われていて、ちょっとごちゃごちゃしてて見にくい。

5. SassでSource Mapsを使ってみる(Sass3.3.0 / Canary・Chromium)

ターミナルから$ sudo gem install sass --preでSass3.3.0をインストールします。$ sass --versionでバージョンを確認できます。

$ sass --sourcemap --watch style.scss:style.css

また--styleフラグでアウトプットスタイルを指定してSource Mapsを書き出すこともできます。
(:nested :expanded :compact :compressed)

$ sass --style expanded --sourcemap --watch style.scss:style.css

すると、CSSファイルはきれいなまま、末尾にたった1行
/*@ sourceMappingURL=style.css.map */と付与されるだけで、Sassファイルを参照することができます!

$ sass --sourcemap --watch style.scss:style.css

style.css.mapというJSON形式のMapファイルが自動生成され、マッピング情報がインポートされています。これがSource Map Revision 3 Proposalです!

map file

6. Compass で debug-info と Source Maps を使ってみる

Compassでdebug-infoを行う場合はconfig.rbにオプションを追加します。 sass_options = {:debug_info => true} Source mapsに対応しているバージョンは安定版のCompass0.12.2だけなので、Compass0.13をプリインストールしている場合は$ sudo gem uninstall compass --version 0.13.alpha.2でアンインストールします。
今のところsass_options = {:sourcemap => true}が未対応でconfig.rbからは操作できないため、ターミナルから--sourcemapフラグで監視します。

$ sass --compass --sourcemap --watch style.scss:style.css

CompassにおけるSource Maps最新情報はSourcemap support · Issue #1108 · Compass/compassでチェックすることができます。

7. debug-info と Source Maps の違い

debug-infoはCSSファイルが汚れてしまい、しかも非標準。当然本番サーバーにアップする前はきれいにコンパイルし直さなければなりません。
またデバッグ情報が絶対パスで書き出されるため、ディレクトリのパスが変わってしまうとコンフリクトを起こします。複数の開発者でファイルを共有する場合は要注意。 さらにdebug-infoはmixinやextendが一発で辿れません。特に@importで外部化されたpartialのデバッグが厄介。

一方仕様に準拠したSource MapsはCSSファイルはきれいなまま、partialで複数ファイル管理していても、ディレクトリパスが変わっても、Sassファイルを参照することができます。それはSource Mapsにはプロジェクト内全てのマッピング情報が相対パスで書かれているためです。

8. Source Mapsなら ⌘+クリック(Ctrl+クリック)で編集もらくらく!

1つだけ注意点があって、Stylesパネルを編集してしまうとCSSファイルだけが変更されてしまい、Sassファイルは変更されません。突然Sassファイルを見ることができなくなってしまう場合もあります。
またStylesパネルに参照されるセレクタの行番号はあくまでもinclude先であり、mixinやextendなどの大元には即座には参照できません。 そこでStylesパネルの編集したい部分を ⌘+クリック(Ctrl+クリック)すると、Sourcesパネルの該当箇所に飛び、mixinやextendなどもスムーズにSassファイルを編集することができます。
この機能はCanary・Chromiumで先行実装なので、残念ながらChromeは未実装、つまりdebug-infoではできません。右上のファイル名とをクリックして、そこから自力でmixinの大元に辿るしかありません。

⌘+クリック(Ctrl+クリック)

いずれにしてもStylesパネルではなく、SourcesパネルからSassファイルを編集しましょう。
エディタでも同様、うっかりCSSファイルを編集・保存すると、コンフリクトを起こしてしまうので注意が必要です。

9. Chrome拡張「Tincr」でAuto Save、Live Reload

これだけでも十分便利なのですが、Tincrを使うともっと快適! TincrはChrome Developer Toolsでデバッグ、編集したCSSやJavaScriptをテキストエディタやIDEに即時反映(Auto Save)、エディタからの変更を自動更新(Live Reload)もしてくれるChrome拡張です。 SassやCoffeeScriptなどにも対応しているのでSource Mapsと組み合わせるとデバッグがとても捗ります。 OSはMac、Windows、Linuxに対応。エディタ・IDEはSublime Text、Text Mateなどに対応しています。

Tincr

TincrをChrome拡張からダウンロードすると、Chrome Developer ToolsにTincrパネルが追加されます。   ローカルファイルfile://)を編集する場合は特に設定は必要はなくこのまま使えます! その他HTTP Web ServerやRuby on Rails なども編集することができます。

Tincrの設定

プロジェクトタイプを選択し、ルートディレクトリを指定します。MAMPやDropboxなどもHTTP Web Serverでできます。
Auto Save、LiveReloadを停止したい時はチェックを外します。(デフォルトでチェックが入っています。)
上書きしたくない場合は、別途保存先ファイルを指定することもできます。 Sassを使っている場合は、SassファイルとCSSファイルの「Auto-Refresh performs a full refresh of the page」にチェックを入れ同期させます。
これで設定は完了!もしうまく反映しなかったら、保存⌘+S(Ctrl+S)→リロードするとうまくいくことがあります。
⌘+クリック(Ctrl+クリック)をうまく利用して、くれぐれもStylesパネルではなく、Sourcesパネルから編集しましょう。Sassファイルを見ることができなくなってしまいます。

イン・ブラウザでデザインすることも増えてきたのでTincrはお気に入りです。 またメタ言語など開発環境が多様化していく中、オンラインで利用できるSource Mapsは絶対便利。既にjQuery1.9-2.0でSource Mapsが使われていて、圧縮されているはずのコードを展開することができます。 ローカルでのデバッグの枠を超えて、複数名での開発はもちろん、フレームワークやライブラリ、スタイルガイドなどオープンソースでも利用されていくといいなと思います。 本当にたくさんの理由を書いてしまいましたがw 最後に本日ターミナルとかに書いたまとめ・・・。

$ sudo gem install sass Sassインストール
$ sudo gem install sass –pre Sassプリリースインストール
$ sass –version Sassバージョン確認
$ sass –watch style.scss:style.css 監視
$ sass –debug-info –watch style.scss:style.css debug-info書き出し
$ sass –sourcemap –watch style.scss:style.css Source maps書き出し
$ sass –style expanded –sourcemap –watch style.scss:style.css アウトプットスタイル指定とSource maps
sassoptions = {:debuginfo => true} [config.rb] Compassでdebug-info書き出し
$ sass –compass –sourcemap –watch style.scss:style.css CompassでSource maps書き出し

参考