【Source Maps】Chrome CanaryでSCSS(Sass)のデバックを試してみました。
アジェンダ
- Source Mapsとは？
- テスト環境
- Sassのアップデート
- Chrome Developer Toolsの設定
- 確認用ファイル
- Google Chrome Canaryで確認
- まとめ
Source Mapsとは
最近での開発でHaml、SCSS(sass)、CoffeeScriptなどの拡張メタ言語を使って開発する機会が増えてました。 拡張メタ言語はコンパイル・圧縮等をして出力しますが、出力されたデータは多少デバックするのがめんどくかったりすることがあります。 Source Mapsファイルはコンパイルする際、出力元データのマッピング情報が記載され、その情報をもとにブラウザやデバックツールからソースを解読してくれます。
テスト環境
- OS:windows7
- ブラウザ:Google Chrome Canary
Chrome Developer ToolsがSource Mapsをサポートしてくれているのは、現在はCanaryかChromiumとのことで今回はGoogle Chrome Canaryを使用します。
ブラウザのダウンロード
こちらのサイトからファイルをダウンロードして、インストールします。
Sassのアップデート
Sassのバージョン3.3からSource Mapsファイルを出力してくれるとのことで、アルファバージョンにアップデートして使ってみます。
コンソール画面を開き以下コマンドを実行します。
現在のSassバージョンを確認
$ sass -v Sass 3.2.10 #執筆時はv3.2.10が最新でした。
アルファ版のsass v3.3をインストールしてみる。
$ gem install sass --ple #インストールが始まります。 $ sass -v Sass 3.3.0.alpa.218
Chrome Developer Toolsの設定
Chrome Developer ToolsからSource Mapsを確認するには設定が必要です。
1. Google Chrome Canaryのアドレスバーに[chrome://flags]に入力
アドレスバーに[chrome://flags]を入力すると以下の画面が表示されます。
2. デベロッパーツールのテストを有効にする
項目一覧の中から、デベロッパーツールのテストを有効にします。
設定を有効にするために、ブラウザを再起動させます。
3. デベロッパーツールの設定を変更
デベロッパーツールの[setting]アイコンをクリック
[General]メニューの[Enable CSS source maps]をチェックします。
確認用ファイル
確認用にプロジェクトフォルダ内(source-maps-exampleフォルダ)に、以下のSCSSファイルをコンパイルする構成とします。
source-maps-example/
- index.html
- example.scss
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample Source Maps</title> <link rel="stylesheet" href="example.css"> </head> <body> <div class="box"> <p class="text">Sample Debug Sass or Scss </p> </div> </body> </html>
example.scss
@charset "utf-8";
$sampleBgColor : #eee;
$sampleTextColor : red;
.box
{
background : $sampleBgColor;
.text
{
color : $sampleTextColor;
}
}
SCSSをコンパイルする。
開発時はGruntやScoutといったツールを使うのですが、今回はコマンドラインからコンパイルします。
まず、確認用のプロジェクトフォルダ(source-maps-example)まで移動します。
移動後、以下コマンドを実行しSCSSファイルのコンパイルをします。
sass --sourcemap --watch example.scss:example.css
コンパイルした結果は以下になります。ちょっと見慣れないの.map拡張子が出力されました、これがSource Mapsファイルになります。
example.css.map
{
"version": "3",
"mappings": "AAMA,IACA;EACE,UAAU,EANQ,OAAI;EAQtB,UACA;IACE,KAAK,EATW,GAAG",
"sources": ["example.scss"],
"file": "example.css"
}
上記が、Source Mapsファイルの中身になります。こちらをもとにコンパイル前のファイルが特定されます。
Google Chrome Canaryで確認する
先ほど設定していただいた、Google Chrome Canaryを起動し
確認用のデモページ開きます。
なんとも味気ない画面ですが、、、デベロッパーツールを起動します。
デベロッパーツールからDomを選択すると、Matched CSS Rulesエリアにscssの拡張子が表示されています。
さらにMatched CSS Rulesエリアのscssファイルをクリックすると、コンパイル前のSCSSファイルまで確認までできました！
まとめ
ブラウザ側からコンパイル前のSCSSの確認までしてみました。
まだsassの対応バージョンがアルファバージョンであったり、Source Mapsの読み込みができるブラウザが限られていたりとこれから感がありますが、おそらく今後対応してくれることを願ってくれるのではと期待しています。