Browser automatisch neu laden, wenn ich Änderungen an der HTML-Datei in Chrome speichere?

106

Ich bearbeite eine HTML-Datei in Vim und möchte, dass der Browser aktualisiert wird, wenn sich die darunter liegende Datei ändert.

Gibt es ein Plugin für Google Chrome, das auf Änderungen an der Datei wartet und die Seite jedes Mal automatisch aktualisiert, wenn ich eine Änderung an der Datei speichere? Ich weiß, dass es XRefresh für Firefox gibt, aber ich konnte XRefresh überhaupt nicht zum Laufen bringen.

Wie schwer wäre es, ein Skript zu schreiben, um dies selbst zu tun?

vim  google-chrome  automation 
— Kevin Burke
quelle
2
— Ciro Santilli 法轮功 冠状 病 六四 事件 11
Nachdem ich einige Zeit für die Arbeit überall Lösung gesucht hatte, codierte ich meine eigene: alexshulzhenko.ru/web-development-autorefresh-page-on-changes
— Tebe
Ich codiere auch meine eigenen: Live Reload für Chrome und Firefox: github.com/blaise-io/live-reload#readme . Wiederholen Sie die Host-URL im Feld Quelldatei-URL des Addons, um sich selbst zu überwachen.
— Blaise

Antworten:

24

Ich nehme an, Sie sind nicht unter OSX? Andernfalls könnten Sie mit Applescript so etwas tun:

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

Es gibt auch ein Plugin für Chrome namens "Auto Refresh Plus", in dem Sie alle x Sekunden ein erneutes Laden angeben können:

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

— Milchpfleger
quelle
23
Dieses Plugin scheint das lokale Dateisystem nicht zu überwachen und wird stattdessen nur regelmäßig aktualisiert.
— Dan Dascalescu
Beim Ändern des Browsers auf Chrome wurden Fehler angezeigt. Um dies zu beheben, ändern Sie das keywordin watch_keywordin der folgenden Zeile:if (URL of atab contains "#{keyword}") then
— Tim Joyce
Whau! Ich verwende das Skript von Ihrem ersten Link ( goo.gl/FZJvdJ ) mit einigen kleinen Mods für die Dart-Entwicklung mit Chromium. Klappt wunderbar!
— Mike Mitterer
2
Es ist eine ziemlich alte Frage, aber die Browsersynchronisierung ist das Werkzeug dafür.
— Miha
81

Reine JavaScript-Lösung!

Live.js

Fügen Sie einfach Folgendes zu Ihrem hinzu <head>:

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

Wie? Fügen Sie einfach Live.js hinzu, und die aktuelle Seite einschließlich lokalem CSS und Javascript wird überwacht, indem aufeinanderfolgende HEAD-Anforderungen an den Server gesendet werden. Änderungen an CSS werden dynamisch angewendet und HTML- oder Javascript-Änderungen laden die Seite neu. Versuch es!

Wo? Live.js funktioniert in Firefox, Chrome, Safari, Opera und IE6 +, bis das Gegenteil bewiesen ist. Live.js ist unabhängig von dem von Ihnen verwendeten Entwicklungsframework oder der verwendeten Sprache, sei es Ruby, Handcraft, Python, Django, NET, Java, PHP, Drupal, Joomla oder What-Have-You.

Ich habe diese Antwort von hier aus fast wörtlich kopiert , weil ich denke, dass sie einfacher und allgemeiner ist als die derzeit akzeptierte Antwort hier.

— leekaiinthesky
quelle
5
Sie können dies an die Spitze setzen und auch Python -m SimpleHTTPServer easy peasy verwenden
— Marcel Valdez Orozco
2
Eine alternative PHP-Version istphp -S localhost:8080
— Roryok
3
Es gibt auch python3 -m http.server, sowie viele weitere für andere Sprachen / Tools .
— Carlwgeorge
1
Wow, das ist eine sehr nette Lösung. Ich bin überrascht, dass ich so weit scrollen muss, um es zu finden.
— Trieu Nguyen
1
@arvixx Es funktioniert mit lokalen Dateien, solange Sie einen lokalen http-Server ausführen (und http (s): // verwenden). Ich bin damit einverstanden, dass es mit dem file: // uri-Schema nicht funktioniert, wenn Sie das meinen. In Marcel Valdez Orozcos Kommentar oben finden Sie eine einfache Möglichkeit, sofort einen http-Server aus Ihrem lokalen Verzeichnis zu erstellen.
— Leekaiinthesky
23

Tincr ist eine Chrome-Erweiterung, die die Seite aktualisiert, wenn sich die darunter liegende Datei ändert.

— Konstantin Spirin
quelle
4
Dieses Tool ist unglaublich. Unter anderem können Sie das CSS auf einer Seite aktualisieren, ohne HTML / JS zu aktualisieren.
— Schlamm
sieht vielversprechend aus, aber ich habe versucht, tincr für ein Jekyll-Projekt zu verkabeln - es erlaubte mir nur, eine einzelne Datei auf Änderungen zu
— überprüfen, ohne Einschluss-
3
Leider verwendet Tincr NPAPI, das veraltet und in Chrome standardmäßig deaktiviert ist (seit April 2015). Und es wird bald vollständig entfernt (Sep 2015).
— Jan Včelák
4
Nicht länger verfügbar.
— Nu Everest
2
Ich habe es nicht in der Galerie der Exts gefunden, aber festgestellt, dass DevTools Autosave
— Hos Mercury
17

Handy Bash Einzeiler für OS X, vorausgesetzt, Sie haben fswatch ( brew install fswatch) installiert . Es überwacht einen beliebigen Pfad / eine beliebige Datei und aktualisiert die aktive Chrome-Registerkarte, wenn Änderungen vorgenommen werden:

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'

Weitere Informationen zu fswatch finden Sie hier: https://stackoverflow.com/a/13807906/3510611

— attekei
quelle
Danke dir! Dies ist die einzige Antwort, die im August 2017 funktioniert! Dies sollte als Antwort markiert werden.
— Ujjwal-Nadhani
einfach und nützlich
— Pegasus
Genau das, wonach ich gesucht habe! Vielen Dank!
— ThisIsFlorianK
15

Durch Hinzufügen eines einzelnen Meta-Tags zu Ihrem Dokument können Sie den Browser anweisen, in einem bestimmten Intervall automatisch neu zu laden:

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

Dieses Meta-Tag befindet sich im Head-Tag Ihres Dokuments und weist den Browser an, alle drei Sekunden eine Aktualisierung durchzuführen.

— Alebagran
quelle
Dies funktioniert auch mit lokalen Dateien. Für mich ist das die richtige Antwort.
— Pid
11

http://livereload.com/ - native App für OS X, Alpha-Version für Windows. Open Source unter https://github.com/livereload/LiveReload2

— Jibin
quelle
2
Cool, aber 10 Dollar? "Ja wirklich?" Ja.
— Ein bezahlter Nerd
@ ein bezahlter Nerd, scheint vernünftig, wenn es funktioniert. Außerdem ist die Quelle genau dort, versuchen Sie es also, bevor Sie kaufen.
— Mark Fox
1
Es gibt auch ein kostenloses Live-Reload-Browser-Addon (versehentliche Namenskollision), das ich erstellt habe und das das gleiche kostenlos macht: github.com/blaise-io/live-reload#readme
— Blaise
7

Verwenden Sie Gulp , um die Dateien anzusehen, und Browsersync , um den Browser neu zu laden.

Die Schritte sind:

In der Kommandozeile ausführen

npm install --save-dev gulp browser-sync

Erstellen Sie gulpfile.js mit den folgenden Inhalten:

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

Lauf

Schluck servieren

Bearbeiten Sie HTML, speichern Sie und sehen Sie, wie Ihr Browser neu geladen wird. Die Magie wird durch das spontane Einfügen eines speziellen Tags in Ihre HTML-Dateien erreicht.

— Konstantin Spirin
quelle
2
Wo legst du die gulpfile.js ab?
— Nu Everest
Ausgezeichnet. Genau das, wonach ich gesucht habe. Vielen Dank.
— Jeremy Dann
5

Ich weiß, dass dies eine alte Frage ist, aber falls es jemandem hilft, gibt es ein Reload- npm-Paket, das sie löst.

Falls Sie es nicht auf einem Server ausführen oder den Fehler erhalten haben Live.js doesn't support the file protocol. It needs http.

Einfach installieren:

npm install reload -g

Führen Sie dann in Ihrem index.html-Verzeichnis Folgendes aus:

reload -b

Es wird ein Server gestartet, der jedes Mal aktualisiert wird, wenn Sie Ihre Änderungen speichern.

Es gibt viele andere Optionen, falls Sie es auf dem Server oder etwas anderem ausführen. Überprüfen Sie die Referenz für weitere Details!

— Alvaro
quelle
3

Es gibt eine Java-App für OS X und Chrome namens Refreschro. Es überwacht einen bestimmten Satz von Dateien im lokalen Dateisystem und lädt Chrome neu, wenn eine Änderung festgestellt wird:

http://neromi.com/refreschro/

— user2511839
quelle
1
Ab dem 29. August 2016 ist dies die einfachste freie Arbeitsoption hier. Danke dir!
— Polpetti
Nicht vertrauenswürdig Für Mac, weigern Sie sich zu installieren
— Hos Mercury
3

Wenn Sie unter GNU / Linux arbeiten, können Sie einen ziemlich coolen Browser namens Falkon verwenden . Es basiert auf der Qt WebEngine . Es ist genau wie bei Firefox oder Chromium - außer dass die Seite automatisch aktualisiert wird, wenn eine Datei aktualisiert wird. Die automatische Aktualisierung spielt keine Rolle, ob Sie Vim, Nano oder Atom, Vscode, Klammern, Geany, Mousepad usw. verwenden.

Unter Arch Linux können Sie Falkon ganz einfach installieren:

sudo pacman -S falkon

Hier ist das Snap-Paket.

— S. Goswami
quelle
2

Eine schnelle Lösung, die ich manchmal verwende, besteht darin, den Bildschirm in zwei Teile zu teilen. Jedes Mal, wenn eine Änderung vorgenommen wird, klicken Sie auf das Dokument xD.

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

In node.js können Sie primus.js (Websockets) mit gulp.js + gulp-watch (einem Task-Runner bzw. einem Listener ändern) verbinden, sodass gulp Ihrem Browserfenster mitteilt, dass es aktualisiert werden soll, wann immer HTML, js usw. ändern. Dies ist OS-unabhängig und ich habe es in einem lokalen Projekt arbeiten.

Hier wird die Seite von Ihrem Webserver bereitgestellt und nicht als Datei von der Festplatte geladen, was eigentlich eher der Realität entspricht.

— Matanster
quelle
Könnten Sie einen Link zu einer Seite bereitstellen, die zeigt, wie dies zu tun ist, oder besser noch eine Reihe von Befehlen, die für diejenigen von uns ausgeführt werden sollen, die mit dem Knoten nicht so vertraut sind?
— Nu Everest
1

Das funktioniert bei mir (in 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

Möglicherweise müssen Sie die Pakete inotify und xdotool ( sudo apt-get install inotify-tools xdotoolin Ubuntu) installieren und die Argumente--class in die tatsächlichen Namen Ihres bevorzugten Browsers und Terminals ändern .

Starten Sie das Skript wie beschrieben und öffnen Sie einfach index.html in einem Browser. Nach jedem Speichern in vim fokussiert das Skript das Fenster Ihres Browsers, aktualisiert es und kehrt dann zum Terminal zurück.

— Scripter
quelle
Hat nicht funktioniert (ich versuche, Chrome automatisch zu aktualisieren), insbesondere der xdotool-Teil, der nach Fensterklasse-Chrom sucht, aber ich konnte dies zum Laufen bringen (der xdotool-Teil also): xdotool search --name 127.0.0.1 windowactivate key F5für die Arbeit an localhost (127.0). 0.1) natürlich nur. Jetzt muss ich das wieder in das Skript einstecken.
— Rolf
1

Die flexibelste Lösung, die ich gefunden habe, ist die Chrome LiveReload-Erweiterung in Verbindung mit einem Guard-Server .

Beobachten Sie alle Dateien in einem Projekt oder nur die von Ihnen angegebenen. Hier ist ein Beispiel für eine Guardfile-Konfiguration:

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

Der Nachteil ist, dass Sie dies pro Projekt einrichten müssen und es hilft, wenn Sie mit Ruby vertraut sind.

Ich habe auch die Tincr-Chrome-Erweiterung verwendet - aber sie scheint eng mit Frameworks und Dateistrukturen verbunden zu sein. (Ich habe versucht, tincr für ein Jekyll-Projekt zu verkabeln, aber es erlaubte mir nur, eine einzelne Datei auf Änderungen zu überprüfen, ohne Einschluss-, Teil- oder Layoutänderungen zu berücksichtigen.) Tincr funktioniert jedoch sofort mit Projekten wie Rails, die konsistente und vordefinierte Dateistrukturen aufweisen.

Tincr wäre eine großartige Lösung, wenn es All-Inclusive-Übereinstimmungsmuster zum erneuten Laden zulassen würde, aber das Projekt ist in seinem Funktionsumfang immer noch begrenzt.

— lfender6445
quelle
1

Dies kann mit einem einfachen Python-Skript erfolgen.

  1. Verwenden Sie pyinotify , um einen bestimmten Ordner zu überwachen.
  2. Verwenden Sie Chrome mit aktiviertem Debugging. Die Aktualisierung kann über eine Websocket-Verbindung erfolgen.

Ausführliche Informationen finden Sie hier .

— Sakthi Priyan H.
quelle
1

Basierend auf der Antwort von attekei für OSX:

$ brew install fswatch

Chuck all das in 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.");
}

Dadurch wird die erste gefundene Registerkarte neu geladen, die file://mit dem ersten Befehlszeilenargument beginnt und mit diesem endet. Sie können es nach Wunsch anpassen.

Zum Schluss machen Sie so etwas.

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

fswatch -oGibt die Anzahl der Dateien aus, die sich in jedem Änderungsereignis geändert haben, eine pro Zeile. Normalerweise wird nur gedruckt 1. xargsliest diese 1s ein und -n1bedeutet, dass sie jedes als Argument an eine neue Ausführung von übergeben osascript(wo es ignoriert wird).

— Timmmm
quelle
1
Das habe ich gesucht, danke! Unter Verwendung tab.title.includes(argv[0])als bedingte ich auf Seitentitel anzeigen lassen kann , die als URL weniger heikel sein kann, und arbeitet als einen lokalen Server verwenden , anstatt file: //.
— David Mirabito
0

Installieren und einrichten chromix

Fügen Sie dies nun zu Ihrem hinzu .vimrc

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

Ändern Sie den Port auf das, was Sie verwenden

— meain
quelle
0 
(function() {
    setTimeout(function(){
        window.location.reload(true);
    }, 100);
})();

Speichern Sie diesen Code in einer Datei Livereload.js und fügen Sie ihn wie folgt am Ende des HTML-Skripts ein:

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

Dadurch wird die Seite alle 100 Millisekunden aktualisiert. Alle Änderungen, die Sie am Code vornehmen, sind für die Augen sofort sichtbar.

— Bosnischer Codierer
quelle
Dies beantwortet die Frage nicht.
— Michael Fulton
Ja, richtig, aber ich denke immer noch, dass es in Situationen nützlich ist, in denen der Benutzer sein HTML-Dokument ständig aktualisieren möchte. Ich respektiere Ihre Ehrlichkeit, Sir.
— Bosnian Coder
0

Ok, hier ist meine grobe Auto-Hotkey- Lösung (unter Linux versuchen Sie es mit Auto Key ). Wenn die Tastenkombination zum Speichern gedrückt wird, aktivieren Sie den Browser, klicken Sie auf die Schaltfläche zum erneuten Laden und wechseln Sie zurück zum Editor. Ich bin es einfach leid, andere Lösungen zum Laufen zu bringen. Funktioniert nicht, wenn Ihr Editor automatisch speichert.

^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
quelle
0

Offline-Lösung mit R.

Dieser Code wird:

  • Richten Sie einen lokalen Server mit der angegebenen HTML-Datei ein
  • Geben Sie die Serveradresse zurück, damit Sie sie in einem Browser anzeigen können.

  • Lassen Sie den Browser jedes Mal aktualisieren, wenn eine Änderung in der HTML-Datei gespeichert wird.

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

Ähnliche Lösungen gibt es für Python usw.

— Rasmus Larsen
quelle
0

Fügen Sie dies Ihrem HTML hinzu

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

Während Sie bearbeiten, wird Ihre Browserseite unscharf. Wenn Sie zurückschalten, um sie anzuzeigen, wird das Fokusereignis ausgelöst und die Seite neu geladen.

— Pinoyyid
quelle
-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' "

Geben Sie dann einfach das zu überwachende Verzeichnis ein und führen Sie "watch_refresh_chrome" aus.

— Pegasus
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.