読者です 読者をやめる 読者になる 読者になる

あきき☆エンジニア

〜ぷろぐらむ〜(perl,php,JavaScript,WebGL,emacs,mysql)

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

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

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


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

インストール前↓
f:id:akiki0106:20170317181320p:plain

インストール後↓
f:id:akiki0106:20170317181321p:plain


★サーバーに 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(オプション))

f:id:akiki0106:20170317181323p:plain


f:id:akiki0106:20170317182027p:plain

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でも試しました~