ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Chrome DevTools AutosaveはGoogle Chromeのデベロッパーツール上での変更でローカルファイルも更新するソフトウェアです。

Google ChromeやSafariのデベロッパーツールやFirefoxのFirebugは便利な開発ツールですが、その場で修正しても再読み込みするとまた元に戻ってしまいます。それを防ぎ、修正を自動保存してくれるのがChrome DevTools Autosaveです。


サーバを起動しました。node.jsで作られています。


Google Chrome機能拡張をインストールします。


URLと保存するファイルのパスを紐づけます。


スタイルシートを変更すると、ローカルのファイルも更新されました。


更新処理部分のログ。

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機能拡張の作成にも多いに役立ちそうです。

Chrome ウェブストア - DevTools Autosave

NV/chrome-devtools-autosave · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2