Automatycznie przeładuj przeglądarkę po zapisaniu zmian w pliku html w przeglądarce Chrome?

107

Edytuję plik HTML w Vimie i chcę, aby przeglądarka odświeżyła się, gdy zmieni się plik pod spodem.

Czy istnieje wtyczka do przeglądarki Google Chrome, która nasłuchuje zmian w pliku i automatycznie odświeża stronę za każdym razem, gdy zapiszę zmianę w pliku? Wiem, że istnieje XRefresh dla przeglądarki Firefox, ale w ogóle nie udało mi się uruchomić XRefresh.

Jak trudno byłoby napisać scenariusz, który zrobi to sam?

vim google-chrome automation Kevin Burke
źródło
2
Firefox: stackoverflow.com/questions/1346716/…
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Po szukaniu czasu na pracę wszędzie, zakodowałem własne: alexshulzhenko.ru/web-development-autorefresh-page-on-changes
Tebe
Koduję też własne: Live Reload dla Chrome i Firefox: github.com/blaise-io/live-reload#readme . Powtórz adres URL hosta w polu adresu URL pliku źródłowego dodatku, aby sam się monitorować.
Blaise,
Świetne rozszerzenie, @Blaise. Ale dlaczego jest minimum 0,5 sekundy na przeładowanie. Dlaczego nie 0,1 sekundy, aby był bardziej responsywny?
Jay
@Jay Ponieważ monitorowanie nie jest tanie, serwer musiałby generować odpowiedź co 0,1 sekundy i musiałby generować hash pliku statycznego co 0,1 sekundy. Ale prawdopodobnie możesz edytować formularz za pomocą narzędzi programistycznych, aby zezwolić na <0,5 s.
Blaise

Odpowiedzi:

23

Zakładam, że nie używasz OSX? W przeciwnym razie możesz zrobić coś takiego za pomocą applecript:

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

Dostępna jest również wtyczka do przeglądarki Chrome o nazwie „automatyczne odświeżanie plus”, w której możesz określić ponowne ładowanie co x sekund:

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

mleczarz
źródło
23
Wydaje się, że ta wtyczka nie obserwuje lokalnego systemu plików i zamiast tego będzie się okresowo odświeżać.
Dan Dascalescu
Otrzymywałem błędy podczas zmiany przeglądarki na chrome. Aby to naprawić, zmienić keywordsię watch_keywordw następnym wierszu:if (URL of atab contains "#{keyword}") then
Tim Joyce
Whau! Używam skryptu z twojego pierwszego linku ( goo.gl/FZJvdJ ) z kilkoma modami do Dart-Development z Chromium. Działa jak marzenie!
Mike Mitterer,
2
To dość stare pytanie, ale synchronizacja przeglądarki jest właśnie do tego narzędziem.
miha
82

Czyste rozwiązanie JavaScript!

Live.js

Po prostu dodaj do swojego <head>:

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

W jaki sposób? Wystarczy dołączyć plik Live.js, aby monitorować bieżącą stronę, w tym lokalne CSS i JavaScript, wysyłając kolejne żądania HEAD do serwera. Zmiany w CSS zostaną zastosowane dynamicznie, a zmiany HTML lub JavaScript przeładują stronę. Spróbuj!

Gdzie? Live.js działa w przeglądarkach Firefox, Chrome, Safari, Opera i IE6 +, dopóki nie zostanie udowodnione, że jest inaczej. Live.js jest niezależny od używanego środowiska programistycznego lub języka, niezależnie od tego, czy jest to Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla czy co-masz.

Skopiowałem tę odpowiedź prawie dosłownie stąd , ponieważ myślę, że jest łatwiejsza i bardziej ogólna niż obecnie akceptowana odpowiedź tutaj.

leekaiinthesky
źródło
6
Możesz umieścić to na górze, a także użyć Pythona -m SimpleHTTPServer easy peasy
Marcel Valdez Orozco
3
Alternatywną wersją PHP jestphp -S localhost:8080
roryok
4
Dostępnych jest również python3 -m http.server, a także wiele innych, dla innych języków / narzędzi .
carlwgeorge
1
Wow, to bardzo zgrabne rozwiązanie. Dziwię się, że muszę przewinąć tak daleko, aby go znaleźć.
Trieu Nguyen
1
@arvixx Działa z plikami lokalnymi, o ile używasz lokalnego serwera http (i używasz http (s): //). Zgadzam się, że nie działa to ze schematem file: // uri, jeśli o to ci chodzi. Zobacz komentarz Marcela Valdeza Orozco powyżej, aby zapoznać się z jednym prostym sposobem natychmiastowego utworzenia serwera http z katalogu lokalnego.
leekaiinthesky
23

Aktualizacja : Tincr nie żyje.

Tincr to rozszerzenie przeglądarki Chrome, które odświeża stronę po każdej zmianie pliku pod spodem.

Konstantin Spirin
źródło
4
To narzędzie jest niesamowite. Między innymi możesz odświeżyć CSS na stronie bez odświeżania HTML / JS.
Błoto
wygląda obiecująco, ale próbowałem okablować tincr dla projektu jekyll - pozwalało mi to tylko na oglądanie jednego pliku pod kątem zmian, bez uwzględnienia zmian
włączeń
3
Niestety, Tincr używa NPAPI, który jest przestarzały i jest domyślnie wyłączony w Chrome (od kwietnia 2015). Wkrótce zostanie całkowicie usunięty (wrzesień 2015).
Jan Včelák
4
Nie dostępny.
nu everest
2
Nie znalazłem tego w galerii exts, ale znalazłem, że DevTools Autosave
Hos Mercury
17

Handy Bash jednowierszowy dla OS X, zakładając, że masz zainstalowaną fswatch ( brew install fswatch). Obserwuje dowolną ścieżkę / plik i odświeża aktywną kartę Chrome, gdy są zmiany:

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'

Zobacz więcej o fswatch tutaj: https://stackoverflow.com/a/13807906/3510611

attekei
źródło
Dziękuję Ci! to jedyna odpowiedź, która działa w sierpniu 2017! To powinno być oznaczone jako odpowiedź.
Ujjwal-Nadhani
proste i przydatne
Pegasus
Dokładnie to, czego szukałem! Dzięki!
ThisIsFlorianK
15

Dodając pojedynczy metatag do dokumentu, możesz poinstruować przeglądarkę, aby automatycznie ładowała się ponownie w określonych odstępach czasu:

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

Umieszczony w tagu head dokumentu, ten metatag poinstruuje przeglądarkę, aby odświeżała się co trzy sekundy.

alebagran
źródło
działa to również z plikami lokalnymi. Dla mnie to jest poprawna odpowiedź.
pid
10

http://livereload.com/ - natywna aplikacja dla OS X, wersja Alpha dla Windows. Open source dostępny pod adresem https://github.com/livereload/LiveReload2

Jibin
źródło
2
Fajnie, ale 10 dolarów? Naprawdę? Yeesh.
płatny nerd
@ Płatny frajer, wydaje się rozsądny, jeśli działa. Poza tym źródło jest tutaj, więc spróbuj przed zakupem.
Mark Fox,
1
Istnieje również darmowy dodatek do przeglądarki Live Reload (przypadkowa kolizja nazw), który stworzyłem, który robi to samo za darmo: github.com/blaise-io/live-reload#readme
Blaise
7

Użyj Gulp, aby obejrzeć pliki i Browsersync, aby ponownie załadować przeglądarkę.

Kroki są następujące:

W linii poleceń wykonaj

npm install --save-dev gulp browser-sync

Utwórz plik gulpfile.js z następującą zawartością:

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);
});

Biegać

łyk służyć

Edytuj kod HTML, zapisz i zobacz, jak Twoja przeglądarka ładuje się ponownie. Magia jest wykonywana poprzez wstrzykiwanie w locie specjalnego tagu do plików HTML.

Konstantin Spirin
źródło
2
Gdzie umieścisz plik gulpfile.js?
nu everest
Doskonały. Dokładnie to, czego szukałem. Dzięki.
Jeremy Potem
6

Wiem, że to stare pytanie, ale jeśli komuś pomoże, istnieje pakiet reload npm, który go rozwiązuje.

W przypadku, gdy nie uruchamiasz go na serwerze lub otrzymałeś błąd Live.js doesn't support the file protocol. It needs http.

Po prostu zainstaluj:

npm install reload -g

a następnie w katalogu index.html uruchom:

reload -b

Uruchomi serwer, który będzie odświeżany za każdym razem, gdy zapiszesz zmiany.

Istnieje wiele innych opcji na wypadek, gdybyś uruchomił go na serwerze lub cokolwiek innego. Sprawdź referencję, aby uzyskać więcej informacji!

Alvaro
źródło
5

Rozszerzenie LivePage dla Chrome można łatwo ustawić tak, aby monitorowało zmiany w plikach lokalnych.

Serge Stroobandt
źródło
3

Istnieje aplikacja java dla OS X i Chrome o nazwie Refreschro. Będzie monitorować określony zestaw plików w lokalnym systemie plików i ponownie ładować Chrome po wykryciu zmiany:

http://neromi.com/refreschro/

user2511839
źródło
1
od 29 sierpnia 2016 jest to najłatwiejsza bezpłatna opcja pracy tutaj. Dziękuję Ci!
polpetti
Niezaufane W przypadku komputerów Mac odmów instalacji
Hos Mercury
3

Jeśli korzystasz z systemu GNU / Linux, możesz użyć całkiem fajnej przeglądarki o nazwie Falkon . Jest oparty na Qt WebEngine . Działa podobnie jak Firefox czy Chromium - z wyjątkiem tego, że automatycznie odświeża stronę po zaktualizowaniu pliku. Automatyczne odświeżanie nie ma większego znaczenia, czy używasz vim, nano, czy atom, vscode, nawiasów, geany, podkładki pod mysz itp.

W Arch Linux możesz łatwo zainstalować Falkon:

sudo pacman -S falkon

Oto pakiet przystawek.

S.Goswami
źródło
2

Szybkim rozwiązaniem, którego czasami używam, jest podzielenie ekranu na dwie części i za każdym razem, gdy zostanie wprowadzona zmiana, kliknij dokument xD.

<script>
document.addEventListener("click", function(){
    window.location.reload();
})
</script>
sRBill1990
źródło
1

W node.js możesz połączyć primus.js (websockets) z gulp.js + gulp-watch (odpowiednio runner zadań i change listener), dzięki czemu gulp poinformuje okno przeglądarki, że powinno się odświeżyć za każdym razem, gdy html, js itp. zmień. To jest agnostyk systemu operacyjnego i mam go w lokalnym projekcie.

Tutaj strona jest obsługiwana przez Twój serwer sieciowy, a nie jest ładowana jako plik z dysku, co w rzeczywistości bardziej przypomina rzeczywistą.

matanster
źródło
Czy możesz podać link do strony, która pokazuje, jak to zrobić, lub jeszcze lepiej zestaw poleceń do uruchomienia dla tych z nas, którzy nie są tak zaznajomieni z node?
nu everest
1

To działa dla mnie (w 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

Może być konieczne zainstalowanie pakietów inotify i xdotool ( sudo apt-get install inotify-tools xdotoolw systemie Ubuntu) oraz zmiana argumentów --classna rzeczywiste nazwy preferowanej przeglądarki i terminala.

Uruchom skrypt zgodnie z opisem i po prostu otwórz plik index.html w przeglądarce. Po każdym zapisie w vimie skrypt skupi się na oknie przeglądarki, odświeży je, a następnie wróci do terminala.

skrypter
źródło
Nie zadziałało (próbuję automatycznie odświeżyć chrome), w szczególności część xdotool wyszukująca chrom w klasie okna, ale udało mi się to uruchomić (część xdotool): xdotool search --name 127.0.0.1 windowactivate key F5do pracy na localhost (127.0. 0.1) tylko oczywiście. Teraz muszę to ponownie podłączyć do skryptu.
Rolf
1

Najbardziej elastycznym rozwiązaniem, jakie znalazłem, jest rozszerzenie Chrome LiveReload w połączeniu z serwerem guard .

Obejrzyj wszystkie pliki w projekcie lub tylko te, które określisz. Oto przykładowa konfiguracja Guardfile:

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

Wadą jest to, że musisz to ustawić dla każdego projektu i dobrze jest, jeśli znasz ruby.

Użyłem również rozszerzenia Chrome Tincr - ale wydaje się, że jest ściśle powiązane z ramami i strukturami plików. (Próbowałem okablować tincr dla projektu Jekyll, ale pozwoliło mi to tylko na oglądanie pojedynczego pliku pod kątem zmian, nie licząc dołączeń, częściowych lub zmian układu). Jednak Tincr działa świetnie po wyjęciu z pudełka z projektami takimi jak szyny, które mają spójne i predefiniowane struktury plików.

Tincr byłby świetnym rozwiązaniem, gdyby pozwalał na wszystkie wzorce dopasowania do ponownego wczytywania, ale projekt jest nadal ograniczony pod względem zestawu funkcji.

lfender6445
źródło
1

Można to zrobić za pomocą prostego skryptu w języku Python.

  1. Użyj pyinotify, aby monitorować określony folder.
  2. Używaj Chrome z włączonym debugowaniem. Odświeżanie można przeprowadzić za pośrednictwem połączenia internetowego.

Pełne szczegóły można znaleźć tutaj .

Sakthi Priyan H.
źródło
1

Na podstawie odpowiedzi attekei dla OSX:

$ brew install fswatch

Wrzuć to wszystko do 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.");
}

Spowoduje to ponowne załadowanie pierwszej znalezionej karty, która zaczyna się file://i kończy na pierwszym argumencie wiersza poleceń. Możesz go dostosować według potrzeb.

Wreszcie zrób coś takiego.

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

fswatch -owyświetla liczbę plików, które uległy zmianie w każdym zdarzeniu zmiany, po jednym w wierszu. Zwykle wystarczy wydrukować 1. xargsczyta te 1pliki i -n1oznacza, że ​​przekazuje je jako argument do nowego wykonania osascript(gdzie zostanie zignorowany).

Timmmm
źródło
1
Właśnie tego szukałem, dzięki! Używając tab.title.includes(argv[0])jako warunku, mogę dopasować tytuł strony, który może być mniej skomplikowany niż adres URL i działa, gdy używam lokalnego serwera zamiast file: //.
David Mirabito
0

Zainstaluj i skonfiguruj chromix

Teraz dodaj to do swojego .vimrc

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

zmień port na używany

meain
źródło
0 
(function() {
    setTimeout(function(){
        window.location.reload(true);
    }, 100);
})();

Zapisz ten kod w pliku livereload.js i dołącz go na dole skryptu HTML w następujący sposób:

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

To spowoduje odświeżenie strony co 100 mili-sekund. Wszelkie zmiany wprowadzone w kodzie są natychmiast widoczne dla oczu.

Bośniacki koder
źródło
To nie odpowiada na pytanie.
Michael Fulton
Tak, zgadza się, ale nadal uważam, że jest to przydatne w sytuacjach, gdy użytkownik chce ciągłego odświeżania swojego dokumentu HTML. Szanuję pana uczciwość.
Bosnian Coder
0

Ok, oto moje proste rozwiązanie Auto Hotkey (w systemie Linux wypróbuj Auto Key ). Po naciśnięciu skrótu klawiaturowego zapisywania aktywuj przeglądarkę, kliknij przycisk odświeżania , a następnie przełącz się z powrotem do edytora. Jestem po prostu zmęczony uruchamianiem innych rozwiązań. Nie zadziała, jeśli Twój edytor obsługuje automatyczne zapisywanie.

^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
Nils Lindemann
źródło
0

Rozwiązanie offline przy użyciu języka R

Ten kod:

  • skonfiguruj lokalny serwer przy użyciu podanego pliku .html
  • zwrócić adres serwera, abyś mógł go oglądać w przeglądarce.

  • powoduje odświeżenie przeglądarki za każdym razem, gdy zmiana jest zapisywana w pliku .html.

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

Podobne rozwiązania istnieją dla Pythona itp.

Rasmus Larsen
źródło
0

Dodaj to do swojego kodu HTML

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

Podczas edycji strona przeglądarki jest zamazana, po przełączeniu się z powrotem, aby na nią spojrzeć, uruchamiane jest zdarzenie fokusu i strona ponownie się ładuje.

pinoyyid
źródło
-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' "

następnie po prostu wprowadź katalog, który chcesz monitorować, wykonaj "watch_refresh_chrome"

Pegaz
źródło