[Sass / Compass] ソースマップをChromeで見られるようにしたい

2013/02/5

こんにちは。きんくまです。

アプリのアップデートの申請を先週末に済ませました。なので、今週中には審査の結果が出るかと思いますです。

さて、アプリのサポートページというかランディングページといいますかそれを今作り直してます。
そんで前のバージョンでは、Sass用ライブラリBourbonというのをヒネて使ってみたのですが、Compassの方が人気があるので、今回はおとなしく使ってみることにしました。

で、ソースマップが実用化されてるらしいので、そうかそうか。Sassでやったらどうだろうとググってみました。

ところでソースマップって?

ここでソースマップとは何かを説明します。

まず最近はcssやjsの生産性を上げる動きがあります。それには、言語をそのままを書かずに、scssやCoffeeScript、TypeScriptなど別の言語をいったん書いて、そこからcssやjsにコンパイルします。
この別の言語にはいろいろと工夫がしてあるので、ベタでcss、js書くよりは早くて楽に書けるようになっています。

ただ、ChromeやFirefoxなどブラウザでデバッグをするときに、読み込むのはコンパイル済み(変換済み)の生のcss、jsなので、エラーや注意してみたい箇所があった場合に、オリジナルソースの.scssや.coffeeファイルではどこなのかというのが探しにくくなっていました。

そこで登場したのがソースマップという仕組みです。
コンパイル前のオリジナルソースと、コンパイル後の生のcss,jsをひもづけるようにしたのです。
そうすれば、エラーがあってもオリジナルソースのどこなのかがすぐにわかるので、修正がしやすくなっています。

Sass / CompassのソースマップをChromeで見られるように

このソースマップという仕組みは最近できるようになってきたので、少しブラウザに設定などが必要です。

すごく丁寧に説明してあるサイトがありましたので、紹介です。Thanks.

Bricss – Using Sass source maps in WebKit Inspector

以下の文は上の方が教えてくれたのを写しているだけです。

コンパイルするとき

sassをコンパイルするときは

--debug-info

をつけるそうです。こっちは試してないです、、。

Compassを使っているときは
config.rbで

sass_options = { :debug_info => true }

を追加します。

このとき書き出し形式をcompressedにはしないようにします。expandedとかでよいのかも。

output_style = : expanded

これでファイル側は準備OKです。compass watchしていたら、一度止めてもう一度コマンドを打ち直しましょう。

Chromeブラウザの設定

URLの欄に以下を入力して設定画面を開きます。

chrome://flags/

Enable Developer Tools experimentsをEnableにしましょう。

source_map_fig1

そうしたらDeveloper Toolsの右下の歯車アイコンを押して、
General > Enable source maps

source_map_fig2

Experiments > Support for SASS

source_map_fig3

をそれぞれチェックします。それから一度ブラウザを落として、立ち上げ直します。
それで、さきほど書き出しておいたcssファイルをみると、対象のエレメントがcssではなくscssをさしています。やったー!

source_map_fig4

注意とか

これすごく便利なんですが、Experiments機能をONにしてるとdangerousらしい(セキュリティ的になのか、、?)ので必要ないときは切っておいた方がよいみたいです。うー、でも実際はメンドイよね、、。

あと、これはあくまで開発用なので、リリースする際は、コンパイルの設定を:debug_info => falseか、この行自体をコメントアウトしておくとよいかと思われます。
コメントアウトはscssは/* */じゃなくて//でもコメントアウトできるってエラい人が言ってた。

LINEで送る
Pocket

自作iPhoneアプリ 好評発売中!
フォルメモ - シンプルなフォルダつきメモ帳
ジッピー電卓 - 消費税や割引もサクサク計算!

ページトップへ戻る