chromeでJavaScript編集しファイルへ反映(DevTools Autosave)

DevTools Autosaveは、chromeのデベロッパーツールのSourcesで編集したJavaScriptやCSSを
サーバーへ反映させることができるようになります。

• インストールするもの
  • chrome→DevTools Autosave
  • サーバー→node.jsで動くautosave

★chromに DevTools Autosave (chromeで以下のページをアクセスして追加する)
chrome.google.com

インストール前↓

インストール後↓

★サーバーに autosaveをインストール

Ubuntuで最新のnode.jsインストールしてautosaveをインストール

$ sudo apt install nodejs npm
$ sudo npm cache clean
$ sudo npm install n -g
$ sudo n stable
$ sudo apt autoremove nodejs npm
$ sudo npm install -g autosave

★設定する

設定は、chromeのDevTools Autosaveのオプションを編集する
(chrome設定→拡張機能→DevTools AutoSave(オプション))

Routes→Servers
線を結んだサーバーへ送信される

• Routes
  • Match (正規表現で編集したいurlを記述)
  • SaveTo サーバー側の保存場所)

• Servers
  • Nodejs(AutoSave)が動かせているサーバーのurl

例えば、全部ローカルで作業しているなら

Match→http://127.0.0.1/
Save to→/var/www/html/　　(webサーバーのroot path 最後の/を忘れずに)
Servers→http://127.0.0.1:9104

これで設定は、完了～

サーバーで autosaveを立ち上げる

$ autosave 
DevTools Autosave 1.0.0 is running on http://127.0.0.1:9104

chromeでデベロッパーツールのSourcesで編集して CTRL+S でセーブされ
サーバーへ差分が送信されれ保存されれば成功！

サーバー側のautosaveにエラーが出たらpath等が間違っている
可能性がありますので確かめる
何か受け取っているなら何かしらのメッセージが表示されます

ちなみにchrome系ブラウザで SRWare Ironでも試しました～