デベロッパーツール上での修正をローカルファイルにも反映「Chrome DevTools Autosave」
Chrome DevTools AutosaveはGoogle Chromeのデベロッパーツール上での変更でローカルファイルも更新するソフトウェアです。
Google ChromeやSafariのデベロッパーツールやFirefoxのFirebugは便利な開発ツールですが、その場で修正しても再読み込みするとまた元に戻ってしまいます。それを防ぎ、修正を自動保存してくれるのがChrome DevTools Autosaveです。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.12.51.1357651829.png)
サーバを起動しました。node.jsで作られています。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.13.11.1357651833.png)
Google Chrome機能拡張をインストールします。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.15.01.1357651839.png)
URLと保存するファイルのパスを紐づけます。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.16.11.1357651842.png)
スタイルシートを変更すると、ローカルのファイルも更新されました。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.19.03.1357651846.png)
更新処理部分のログ。
Chrome DevTools Autosaveはnode.jsで作られたサーバを使い、指定したURLのファイルをデベロッパーツールで更新すると、紐づけてあるローカルのファイルを保存してくれる仕組みです。stylesheetsフォルダに全て入っていたりすれば、ファイル名は省略してもきちんと対応してくれます。静的なJavaScript/Stylesheet/HTMLの更新に使えるでしょう。
Chrome DevTools AutosaveはGoogle Chrome/node.js製のオープンソース・ソフトウェア（MIT License）です。
MOONGIFTはこう見る
Chrome DevTools Autosaveは静的なWebサイト構成の場合は多いに役立ちますが、Rails3.2以降のassetsを使っている場合には殆ど役立ちそうにないので注意が必要です。また、CoffeeScriptで書いて実行時にJavaScriptに変更している場合も難しいでしょう。
ただしWebブラウザ上で実行してその結果を確認しつつ、リアルタイムに変更を加えてさらに結果を確認するというスタイルはとても面白いです。ローカルファイルの編集やGoogle Chrome機能拡張の作成にも多いに役立ちそうです。