web-dev-qa-db-ja.com

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

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

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

これを自分で行うためのスクリプトを書くのはどれくらい難しいでしょうか？

vimgoogle-chromeautomation
77
Kevin Burke

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

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

また、chrome "auto refresh plus"と呼ばれるプラグインもあり、x秒ごとにリロードを指定できます。

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

25
milkypostman

純粋な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またはwhat-have-you。

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

53
leekaiinthesky

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

22
Konstantin Spirin

OS X用のHandy Bashワンライナー、fswatch（brew install fswatch）。任意のパス/ファイルを監視し、変更がある場合にアクティブな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

12
attekei

http://livereload.com/ -OS Xのネイティブアプリ、Windowsのアルファ版。 https://github.com/livereload/LiveReload2 でオープンソース化

11
Jibin

ドキュメントに単一のメタタグを追加すると、指定された間隔で自動的にリロードするようブラウザに指示できます。

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

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

8
alebagran

LivePage Chrome=拡張機能は、ローカルファイルの変更を監視するように簡単に設定できます。

5
Serge Stroobandt

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ファイルに特別なタグをオンザフライで注入することによって行われます。

4
Konstantin Spirin

Os x用のJavaアプリと、RefreschroというChromeがあります。ローカルファイルシステム上の特定のファイルセットを監視し、変更が検出されたときにChromeをリロードします。

http://neromi.com/refreschro/

3
user2511839

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

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

Node.jsでは、gulp.js + gulp-watch（それぞれタスクランナーと変更リスナー）でprimus.js（websockets）を関連付けることができるため、gulpはHTML、js 、など、変更します。これはOSに依存しないため、ローカルプロジェクトで作業しています。

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

1
matanster

私が見つけた最も柔軟な解決策は、 chrome LiveReload extension と guard server との組み合わせです。

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

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

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

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

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

1
lfender6445

これは私のために動作します（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パッケージ（UbuntuではSudo apt-get install inotify-tools xdotool）をインストールし、--classの引数を好みのブラウザの実際の名前に変更する必要がある場合があります。そしてターミナル。

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

1
scripter

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

  1. pyinotify を使用して、特定のフォルダーを監視します。
  2. デバッグを有効にしてChromeを使用します。Websocket接続を介して更新できます。

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

1
Sakthi Priyan H

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はそれらの1sを読み取り、-n1は、それぞれをosascriptの新しい実行への引数として渡すことを意味します（無視されます）。

0
Timmmm
(function() {
    setTimeout(function(){
        window.location.reload(true);
    }, 100);
})();

このコードをファイルに保存しますlivereload.js

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

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

0
Nurudin Imsirovic

これは古い質問ですが、誰かを助ける場合には、それを解決する reload npmパッケージがあります。

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

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

npm install reload -g

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

reload -b

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

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

0
Alvaro

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

^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
Nils

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

これを.vimrcに追加します

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

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

0
meain
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」を実行します

0
Pegasus