chrome-devtools-autosaveを使って楽にCSSを編集しよう

node.js Chrome

HTMLコーディングをしているときにChromeのDeveloper Toolsを使って、Chrome上で編集したスタイルがそのままCSSファイルに反映されるという、これまでのCSSコーディングを大きく変える(個人の感想です)node.jsで動く開発ツールの紹介です。node.jsとver.15以上のChromeが必要です。

作者のデモ：

githubリポジトリ：
GitHub - NV/chrome-devtools-autosave: Auto-saving CSS and JavaScript changes from the Chrome Developer Tools

使うまでにやることは多いですが、簡単なことばかりなので多分インストールに失敗することはないと思います。

  1. Node.js をインストール
  2. chrome://flags/ にアクセスして、Experimental Extension APIsをオンにします。Chromeを日本語で使っているときは試験的拡張APIみたいな項目があるので、それを有効にしてください。
  3. Chromeを再起動します。
  4. エクステンションをインストールします。Что есть чтобы предотвратить сахарный диабет - Сахарный диабет

※エクステンションをインストールするときにExperimental Extension APIsがオンになっていないとエラーが出てインストールが出来ません。

ここまできたら、下準備は終わりです。次にnpmでautosaveを -g オプションを付けてインストールします。

npm install -g autosave

インストールしたら

autosave

で実行できるはずです。
npmやautosaveは実行する前にnodeのPATHを通しておく必要があります。
macやLinuxなら.zshrcや.bashrc(.bash_profile)などに

source /path/to/node

もしくは、

$PATH = /path/to/node/:$PATH

などと書いてパスを通しておいてください。

windowsの場合はWindowsの環境パスを通す(path)などを見ながら通してください。
autosaveのためだけにnode.jsを使うときは、nodejsディレクトリにautosaveのダウンロードファイルDownloads · NV/chrome-devtools-autosave · GitHubの中身をそのまま置き、コマンドプロンプトでnodejsディレクトリまで行き、

autosave

を実行してください。

DevTools Autosave 0.3.2 is running on http://127.0.0.1:9104

が表示されればautosaveが動いています。

先ほどのデモを再現しましょう。インストールしたautosaveディレクトリのexampleディレクトリに入っているindex.htmlをドラッグアンドドロップしてブラウザで表示させ、ChromeのDeveloper ToolsでCSSの値を変えてリロードしてください。
きっと変更が保存されているはずです。

ここまで来て、僕もスゲーってなりましたが、これデフォルトではfile://で始まるものしかCSSの編集を受け付けてくれません。
つまり、phpファイルとかは無理っていうことです。

でも、chrome-devtools-autosave-server/README.mdown at master · NV/chrome-devtools-autosave-server · GitHubを見たら、http://から始まるファイルもautosaveで編集できるように設定することができるらしい。ということでやってみました。

これもやることは多いですが、簡単なので多分大丈夫。

  • Chromeのエクステンションの設定画面を開いてDevTools autosaveエクステンションを探す

  • optionsをクリックして、DevTools Autosaveの設定画面を開く
  • Add ruleをクリックして監視するルールを追加できるようにする
  • Resource に ^http:// を Post to には ^file://と同じ http://127.0.0.1:9104/save を記入

これでChrome側の設定は終わりです。設定画面等は閉じてOK。
次はサーバ側の設定です。

自分の好きなところに次のような内容のroutes.jsを作ります。
URLとパスの値は必要に応じて編集してください。

exports.routes = [
    {
        from: new RegExp('^http://foobar\.local/'),
        to: '/Volumes/server/var/www/foobar.local/'
    }
];

fromの行は正規表現なので、ピリオドをエスケープする必要があります。
toの行は文字列なので、ピリオドをエスケープする必要はありません。

これで設定は終わりです。autosaveを--configオプションを付けて実行します。

autosave --config /path/to/routes.js
DevTools Autosave 0.3.2 is running on http://127.0.0.1:9104

が表示されたことを確認して、
http://foobar.local にアクセスして、先ほどと同じようにCSSを編集してみてください。CSSファイルが編集されていれば成功です。

このツールを使って、これまでより楽にHTMLをコーディングしましょう。