【Source Maps】Chrome CanaryでSCSS(Sass)のデバックを試してみました。

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

アジェンダ

  • 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をサポートしてくれているのは、現在はCanaryChromiumとのことで今回はGoogle Chrome Canaryを使用します。

ブラウザのダウンロード

こちらのサイトからファイルをダウンロードして、インストールします。

img-001

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]を入力すると以下の画面が表示されます。

img-002

2. デベロッパーツールのテストを有効にする

項目一覧の中から、デベロッパーツールのテストを有効にします。

img-003

設定を有効にするために、ブラウザを再起動させます。

img-004

3. デベロッパーツールの設定を変更

デベロッパーツールの[setting]アイコンをクリック

img-005

[General]メニューの[Enable CSS source maps]をチェックします。

img-006

確認用ファイル

確認用にプロジェクトフォルダ内(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ファイルになります。

img-007

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を起動し
確認用のデモページ開きます。
なんとも味気ない画面ですが、、、デベロッパーツールを起動します。

img-008

デベロッパーツールからDomを選択すると、Matched CSS Rulesエリアにscssの拡張子が表示されています。

img-009

さらにMatched CSS Rulesエリアのscssファイルをクリックすると、コンパイル前のSCSSファイルまで確認までできました!

img-010

まとめ

ブラウザ側からコンパイル前のSCSSの確認までしてみました。
まだsassの対応バージョンがアルファバージョンであったり、Source Mapsの読み込みができるブラウザが限られていたりとこれから感がありますが、おそらく今後対応してくれることを願ってくれるのではと期待しています。

参考にさせていただいたサイト