Chrome DevToolsとSourcemapを使ってSassやCoffeeScriptをブラウザで編集

いままで普通に使っていたけど、知らないという方から質問を受けたので、再確認も含めてざっくりまとめ。

ChromeのDevToolsを活用してブラウザでの開発環境が整ってきている。SassやCoffeeScriptの様なPreprocessorもブラウザで編集、変換、再読込みを自動でできる。

まず、SassはSorcemap対応の3.3系を利用。

[shell]
$ gem install sass –pre
[/shell]

今回はCoffeeScriptはnpmで

[shell]
npm install -g coffee-script
[/shell]

たとえばstyle.scss, script.coffeeという以下のようなファイルがある場合

[css]
body {
background-color: #000;
} [/css]

[ruby]
func = ->
console.log ‘fire!’
[/ruby]

sourcemap オプションをつけてコンパイル

[shell]
$ scss –sourcemap style.scss style.css
$ coffee -c -m script.coffee
[/shell]

ファイル監視をする場合は

[shell]
$ scss –sourcemap –watch style.scss:style.css
$ coffee -c -m -w script.coffee
[/shell]

sourcemap を適用すると以下のようなstyle.css.map,script.mapというファイルが生成。

[text]
{ "version": "3",
"mappings": "AAAA,IAAK;EACH,gBAAgB,EAAE,IAAI",
"sources": ["style.scss"],
"file": "style.css"
} [/text]

[text]
{ "version": 3,
"file": "script.js",
"sourceRoot": "",
"sources": [
"script.coffee"
],
"names": [],
"mappings": ";AAAA;CAAA,GAAA,EAAA;;CAAA,CAAA,CAAO,CAAP,KAAO;CACG,EAAR,IAAO,IAAP,OAAA;CADF,EAAO;CAAP"
} [/text]

また、生成したファイルの行末にsourcemapの情報が追加される。
[css]
body {
background-color: #000; }

/*# sourceMappingURL=style.css.map */

[/css]

[javascript]
// Generated by CoffeeScript 1.6.3
(function() {
var func;

func = function() {
return console.log(‘fire!’);
};

}).call(this);

/* //@ sourceMappingURL=script.map
*/

[/javascript]

これをChromeでオンデマンド編集。
まず、DevToolsの設定。[Sources]の[Enable css sorcemap]を有効にする。

workspaceを使用できるようにchromeの設定をきりかえる。
[shell]
chrome://flags
[/shell]
を開いて、「デベロッパー ツールのテストを有効にする」を有効にする。

workspaceを設定する。

最後にsourceファイルとmappingする。sourceパネルから対象となるファイル(ここではstyle.scss)を選択して、Map to File System Resourceを選択。

該当するファイルを選択する。(ここではstyle.scss)

これで完了。あとは該当のsourceファイル(ここではstyle.scss)を編集する。

これでstyle.cssも動的に編集され、ブラウザもリロードされます。script.coffeeも同様です。

watchコマンドでファイル変更を監視していたら
[shell]
$ scss –sourcemap –watch style.scss:style.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: style.scss
write style.css
write style.css.map

$ coffee -c -m -w script.coffee
01:43:17 - compiled script.coffee
01:43:21 - compiled script.coffee

[/shell]
とログも。

sourcemapに対応していればlessやcompassなどもDevToolsで開発できます。
ということで、インブラウザ○○とかキーワードの通り、DevToolsあれば容易に実現できる。

参考ページ
http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/
http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/