ChromeでHTMLファイルへの変更を保存するときにブラウザーを自動再読み込みしますか？

106

私はVimでHTMLファイルを編集していて、その下にあるファイルが変更されるたびにブラウザを更新したい。

ファイルへの変更をリッスンし、ファイルへの変更を保存するたびにページを自動更新するGoogle Chromeのプラグインはありますか？Firefox用のXRefreshがあることは知っていますが、XRefreshをまったく実行できませんでした。

これを自分で行うスクリプトを書くのはどれほど難しいでしょうか。

vim  google-chrome  automation 
— ケビン・バーク
ソース
2
— チロSantilli郝海东冠状病六四事件法轮功
どこでも機能するソリューションの時間を探した後、私は自分でコーディングしました：alexshulzhenko.ru/web-development-autorefresh-page-on-changes
— Tebe
また、自分でコーディングします：ChromeおよびFirefox用のLive Reload：github.com/blaise-io/live-reload#readme。アドオンのソースファイルURLフィールドでホストURLを繰り返して、自身を監視します。
— ブレーズ
素晴らしい拡張、@ Blaise。しかし、リロードに最低0.5秒の最小値があるのはなぜですか。応答性を高めるために0.1秒ではないのですか？
— ジェイ
@Jay監視は安価ではないため、サーバーは0.1秒ごとに応答を生成する必要があり、0.1秒ごとに静的ファイルのハッシュを生成する必要があります。しかし、おそらく0.5秒未満を許可するように開発者ツールを使用してフォームを編集できます。
— ブレーズ

回答:

24

OSXを使用していないと思いますか？それ以外の場合は、applescriptを使用して次のようにすることができます。

http://brettterpstra.com/watch-for-file-changes-and-refresh-your-browser-automatically/

「自動更新プラス」と呼ばれるクロムのプラグインもあり、x秒ごとにリロードを指定できます。

https://chrome.google.com/webstore/detail/auto-refresh-plus/oilipfekkmncanaajkapbpancpelijih?hl=en

— ミルキーポストマン
ソース
23
そのプラグインはローカルファイルシステムを監視していないようで、代わりに定期的に更新されます。
— Dan Dascalescu 2012
ブラウザをChromeに変更するとエラーが発生しました。それを修正するには、変更keywordにwatch_keyword次の行に：if (URL of atab contains "#{keyword}") then
— ティム・ジョイス
ファウ！私はあなたの最初のリンク（goo.gl/FZJvdJ）のスクリプトを、Chromiumを使用したDart-Developmentの小さなMODとともに使用しています。魅力的な作品！
— Mike Mitterer、2014
2
かなり古い質問ですが、ブラウザ同期はまさにそのためのツールです。
— miha
81

純粋なJavaScriptソリューション！

Live.js

以下をあなたのに追加してください<head>：

<script type="text/javascript" src="http://livejs.com/live.js"></script>

どうやって？Live.jsを含めるだけで、サーバーに連続したHEADリクエストを送信することにより、ローカルCSSとJavaScriptを含む現在のページを監視します。CSSへの変更は動的に適用され、HTMLまたはJavaScriptの変更によりページがリロードされます。それを試してみてください！

どこ？Live.jsは、別の方法で証明されるまで、Firefox、Chrome、Safari、Opera、IE6 +で動作します。Live.jsは、Ruby、Handcraft、Python、Django、NET、Java、Php、Drupal、Joomlaなど、使用している開発フレームワークや言語に依存しません。

ここで現在受け入れられている回答よりも簡単で一般的だと思うので、この回答をほぼそのままここからコピーしました。

— リーカイインテスキー
ソース
5
あなたは、トップでこれを置くことができます使用のpython -m SimpleHTTPServer簡単peasy
— マルセル・バルデスオロスコ
2
代替のPHPバージョンはphp -S localhost:8080
— 次のとおり
3
他にもpython3 -m http.server、他の言語やツール用のものがたくさんあります。
— carlwgeorge 2017年
1
うわー、これは非常にきちんとしたソリューションです。私はそれを見つけるためにここまでスクロールしなければならないことに驚いています。
— Trieu Nguyen
1
@arvixxローカルのhttpサーバーを実行している（そしてhttp（s）：//を使用している）限り、ローカルファイルで機能します。私はそれがfile：// uriスキームでは機能しないことに同意します。ローカルディレクトリからHTTPサーバーを瞬時に作成する簡単な方法については、上記のMarcel Valdez Orozcoのコメントを参照してください。
— leekaiinthesky
23

Tincrは、下のファイルが変更されるたびにページを更新するChrome拡張機能です。

— コンスタンチン・スピリン
ソース
4
このツールは素晴らしいです。特に、HTML / JSを更新せずにページ上のCSSを更新できます。
— マッド
有望に見えますが、私はjekyllプロジェクトのtincrを接続しようとしました-単一ファイルの変更のみを監視でき、インクルード、部分的またはレイアウトの変更は考慮されませんでした
— lfender6445
3
残念ながら、Tincrは廃止されたNPAPIを使用しており、Chromeではデフォルトで無効になっています（2015年4月以降）。そして、すぐに完全に削除されます（2015年9月）。
— JanVčelák2015
4
利用できない。
— nu everest 2016
2
私はextsのギャラリーではそれを見つけませんでしたが、DevTools Autosave
— Hos Mercury
17

fswatch（brew install fswatch）がインストールされていると仮定して、OS X用のHandy Bashワンライナー。任意のパス/ファイルを監視し、変更があるとアクティブなChromeタブを更新します。

fswatch -o ~/path/to/watch | xargs -n1 -I {} osascript -e 'tell application "Google Chrome" to tell the active tab of its first window to reload'

ここでfswatchの詳細を参照してください：https ://stackoverflow.com/a/13807906/3510611

— あってけい
ソース
ありがとうございました！これが2017年8月に機能する唯一の回答です。これは答えとしてマークする必要があります。
— Ujjwal-Nadhani 2017
シンプルで便利
— ペガサス
まさに私が探していたもの！ありがとう！
— ThisIsFlorianK
15

ドキュメントに単一のメタタグを追加すると、指定した間隔で自動的に再読み込みするようにブラウザに指示できます。

<meta http-equiv="refresh" content="3" >

このメタタグはドキュメントのヘッドタグ内に配置され、ブラウザに3秒ごとに更新するように指示します。

— アレバグラン
ソース
これはローカルファイルでも機能します。私にとっては、これが正解です。
— pid
11

http://livereload.com/-OS Xのネイティブアプリ、WindowsのAlphaバージョン。https://github.com/livereload/LiveReload2でオープンソース化

— ジビン
ソース
2
かっこいいけど、10ドル？本当に？イェッシュ。
— 有料オタク
@有料オタク、それが機能する場合は合理的なようです。さらに、ソースはそこにあるので、購入する前に試してください。
— マークフォックス
1
私が作成した無料のLive Reload（偶発的な名前の衝突）ブラウザーアドオンもあり、無料で同じことができます：github.com/blaise-io/live-reload#readme
— Blaise
7

Gulpを使用してファイルを監視し、Browsersyncを使用してブラウザーをリロードします。

手順は次のとおりです。

コマンドラインで実行します

npm install --save-dev gulp browser-sync

次の内容でgulpfile.jsを作成します。

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  });

  gulp.watch("*.html").on("change", reload);
});

走る

ガルプサーブ

HTMLを編集して保存し、ブラウザのリロードを確認します。魔法は、特別なタグをHTMLファイルにその場で挿入することによって行われます。

— コンスタンチン・スピリン
ソース
2
gulpfile.jsはどこに配置しますか？
— nu everest 2016
優れた。まさに私が探していたもの。ありがとう。
— Jeremy Then
5

私はこれが古い質問であることを知っていますが、誰かを助けるために、リロードがありますそれを解決する npmパッケージがあります。

サーバーで実行していないか、エラーを受け取った場合 Live.js doesn't support the file protocol. It needs http.

インストールするだけです：

npm install reload -g

次に、index.htmlディレクトリで次のコマンドを実行します。

reload -b

変更を保存するたびに更新されるサーバーを起動します。

サーバー上で実行している場合に備えて、他にも多くのオプションがあります。詳細についてはリファレンスを確認してください！

— アルバロ
ソース
3

Refreschroと呼ばれるOS XとChromeのJavaアプリがあります。ローカルファイルシステム上の特定のファイルセットを監視し、変更が検出されるとChromeをリロードします。

http://neromi.com/refreschro/

— user2511839
ソース
1
2016年8月29日現在、これはここで最も簡単な無料の作業オプションです。ありがとうございました！
— ポルペッティ
信頼されていないMacの場合、インストールを拒否する
— Hos Mercury
3

GNU / Linuxを使用している場合は、Falkonと呼ばれるかなりクールなブラウザーを使用できます。Qt WebEngineに基づいています。これは、FirefoxやChromiumと同じですが、ファイルが更新されるとページが自動的に更新されます。自動更新は、vim、nano、atom、vscode、ブラケット、geany、マウスパッドなどを使用するかどうかには関係ありません。

Arch Linuxでは、Falkonを非常に簡単にインストールできます。

sudo pacman -S falkon

ここにがスナップパッケージです。

— ゴスワミ
ソース
2

私が時々使用する簡単な解決策は、画面を2つに分割し、変更が行われるたびにドキュメントxDをクリックすることです。

<script>
document.addEventListener("click", function(){
    window.location.reload();
})
</script>
— sRBill1990
ソース
1

node.jsでは、primus.js（websockets）をgulp.js + gulp-watch（それぞれタスクランナーと変更リスナー）と結び付けることができるので、html、js 、など、変更します。これはOSに依存せず、ローカルプロジェクトで動作しています。

ここでは、ページはWebサーバーによって提供され、ディスクからファイルとして読み込まれるのではなく、実際にはより本物に似ています。

— Matanster
ソース
これを実行する方法を示すページへのリンク、またはノードに精通していない私たちのために実行するコマンドのセットを提供できますか？
— nu everest 2016
1

これは私のために（Ubuntuで）動作します：

#!/bin/bash
#
# Watches the folder or files passed as arguments to the script and when it
# detects a change it automatically refreshes the current selected Chrome tab or
# window.
#
# Usage:
# ./chrome-refresher.sh /folder/to/watch

TIME_FORMAT='%F %H:%M'
OUTPUT_FORMAT='%T Event(s): %e fired for file: %w. Refreshing.'

while inotifywait --exclude '.+\.swp$' -e modify -q \
    -r --timefmt "${TIME_FORMAT}" --format "${OUTPUT_FORMAT}" "$@"; do
    xdotool search --onlyvisible --class chromium windowactivate --sync key F5 \
    search --onlyvisible --class gnome-terminal windowactivate
done

inotifyおよびxdotoolパッケージ（sudo apt-get install inotify-tools xdotoolUbuntu）をインストール--classし、args を、使用するブラウザーおよび端末の実際の名前に変更する必要がある場合があります。

説明に従ってスクリプトを開始し、ブラウザでindex.htmlを開きます。vimで保存するたびに、スクリプトはブラウザーのウィンドウにフォーカスし、それを更新して、ターミナルに戻ります。

— スクリプター
ソース
動作しませんでした（私はクロムを自動更新しようとしています）、具体的にはウィンドウクラスクロムを検索するxdotoolパーツですが、これを機能させることができました（xdotoolパーツ）：xdotool search --name 127.0.0.1 windowactivate key F5localhost（127.0。 0.1）もちろんです。それをスクリプトにプラグインする必要があります。
— Rolf、
1

私が見つけた最も柔軟なソリューションは、ガードサーバーとペアになったChrome LiveReload拡張機能です。

プロジェクト内のすべてのファイル、または指定したファイルのみを監視します。Guardfile構成のサンプルを以下に示します。

guard 'livereload' do
  watch(%r{.*\.(css|js|html|markdown|md|yml)})
end

欠点は、これをプロジェクトごとに設定する必要があり、Rubyに慣れている場合に役立ちます。

Tincrクロム拡張機能も使用しましたが、フレームワークやファイル構造と密接に関連しているようです。（私はjekyllプロジェクトのtincrを接続しようとしましたが、インクルード、部分的またはレイアウトの変更を考慮せずに、単一のファイルの変更を監視することしかできませんでした）。ただし、Tincrは、一貫性のある事前定義されたファイル構造を持つレールなどのプロジェクトですぐに使用できます。

Tincrは、リロードにすべての包括的な一致パターンを許可する場合に優れたソリューションになりますが、プロジェクトの機能セットはまだ限られています。

— lfender6445
ソース
1

これは、単純なpythonスクリプトを使用して行うことができます。

  1. pyinotifyを使用する特定のフォルダを監視すること。
  2. デバッグを有効にしてChromeを使用します。更新は、WebSocket接続を介して行うことができます。

詳細については、こちらを参照してください。

— サクティプリヤンH
ソース
1

OSXに対するattekeiの回答に基づく：

$ brew install fswatch

これらすべてを次のようにチャックしますreload.scpt。

function run(argv) {
    if (argv.length < 1) {
        console.log("Please supply a (partial) URL to reload");
        return;
    }
    console.log("Trying to reload: " + argv[0]);
    let a = Application("Google Chrome");
    for (let i = 0; i < a.windows.length; i++) {
        let win = a.windows[i];
        for (let j = 0; j < win.tabs.length; j++) {
            let tab = win.tabs[j];
            if (tab.url().startsWith("file://") && tab.url().endsWith(argv[0])) {
                console.log("Reloading URL: " + tab.url());
                tab.reload();
                return;
            }
        }
    }
    console.log("Tab not found.");
}

これfile://により、最初のコマンドライン引数で始まり、最初のタブで終わる最初のタブが再読み込みされます。必要に応じて調整できます。

最後に、このようなことをします。

fswatch -o ~/path/to/watch | xargs -n1 osascript -l JavaScript reload.scpt myindex.html

fswatch -o各変更イベントで変更されたファイルの数を1行に1つずつ出力します。通常は単に印刷されます1。xargsこれら1のを読み込み、-n1それぞれを引数として新しいの実行に渡しますosascript（無視されます）。

— ティムム
ソース
1
これは私が探していたものです、ありがとう！tab.title.includes(argv[0])条件として使用することで、ページタイトルを一致させることができます。これは、URLよりも厄介ではなく、file：//ではなくローカルサーバーを使用するときに機能します。
— David Mirabito
0

インストールとセットアップ chromix

これをあなたに追加してください .vimrc

autocmd BufWritePost *.html,*.js,*.css :silent ! chromix with http://localhost:4500/ reload

ポートを使用するものに変更します

— 意味する
ソース
0 
(function() {
    setTimeout(function(){
        window.location.reload(true);
    }, 100);
})();

このコードをファイルlivereload.jsに保存し、次のようにHTMLスクリプトの下部に含めます。

<script type="text/javascript" src="livereload.js"></script>

これにより、100ミリ秒ごとにページが更新されます。コードで行った変更はすぐに目に見えます。

— ボスニアコーダー
ソース
これは質問の答えにはなりません。
— マイケルフルトン
そうですが、ユーザーが自分のHTMLドキュメントを常に更新する必要がある状況では、それが役立つと思います。私はあなたの誠実さを尊重します。
— ボスニア語コーダー
0

さて、これが私の大まかなAuto Hotkeyソリューションです（Linuxでは、Auto Keyを試してください）。保存のキーボードショートカットが押されたら、ブラウザをアクティブにし、再読み込みボタンをクリックして、エディタに戻ります。私は他のソリューションを実行するのにうんざりしています。エディターが自動保存を行う場合は機能しません。

^s::   ; '^' means ctrl key. '!' is alt, '+' is shift. Can be combined.
    MouseGetPos x,y
    Send ^s

    ; if your IDE is not that fast with saving, increase.
    Sleep 100

    ; Activate the browser. This may differ on your system. Can be found with AHK Window Spy.
    WinActivate ahk_class Chrome_WidgetWin_1
    WinWaitActive ahk_class Chrome_WidgetWin_1
    Sleep 100   ; better safe than sorry.

    ;~ Send ^F5   ; I dont know why this doesnt work ...
    Click 92,62   ; ... so lets click the reload button instead.

    ; Switch back to Editor. Can be found with AHK Window Spy.
    WinActivate ahk_class zc-frame
    WinWaitActive ahk_class zc-frame
    Sleep 100   ; better safe than sorry.

    MouseMove x,y
    return
— ニルスリンデマン
ソース
0

Rを使用したオフラインソリューション

このコードは：

  • 指定された.htmlファイルを使用してローカルサーバーをセットアップする
  • サーバーのアドレスを返すので、ブラウザーでそれを見ることができます。

  • 変更が.htmlファイルに保存されるたびにブラウザを更新します。

    install.packages("servr")
servr::httw(dir = "c:/users/username/desktop/")

Pythonなどにも同様のソリューションが存在します。

— ラスムス・ラーセン
ソース
0

これをHTMLに追加します

<script> window.addEventListener('focus', ()=>{document.location = document.location})</script>

編集中は、ブラウザページがぼやけています。元のページに戻って確認すると、フォーカスイベントが発生し、ページが再読み込みされます。

— pinoyyid
ソース
-1 
pip install https://github.com/joh/when-changed/archive/master.zip

alias watch_refresh_chrome=" when-changed -v -r -1 -s ./ osascript -e 'tell application \"Google Chrome\" to tell the active tab of its first window to reload' "

次に、監視するディレクトリを入力して、「watch_refresh_chrome」を実行します。

— ペガサス
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.