it-swarm.com.de

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

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 XRefresh konnte überhaupt nicht ausgeführt werden.

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

70
Kevin Burke

Ich gehe davon aus, dass Sie nicht unter OSX sind. Ansonsten könnte man mit applescript so etwas machen:

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 Neuladen angeben können:

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

24
milkypostman

Reine JavaScript-Lösung!

Live.js

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

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

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

Woher? Live.js funktioniert in Firefox, Chrome, Safari, Opera und IE6 +, sofern nicht anders angegeben. Live.js ist unabhängig von dem verwendeten Entwicklungs-Framework oder der verwendeten Sprache, egal ob Ruby, Handcraft, Python, Django, NET, Java, PHP, Drupal, Joomla oder was Sie haben.

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

34
leekaiinthesky

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

22

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

11
Jibin

Handy Bash One-Liner 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 sich Änderungen ergeben:

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

9
attekei

Mit dem Hinzufügen eines einzelnen Meta-Tags in Ihr Dokument können Sie den Browser anweisen, in einem angegebenen Intervall automatisch neu zu laden:

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

Dieses Meta-Tag befindet sich innerhalb des Head-Tags Ihres Dokuments und weist den Browser an, alle drei Sekunden zu aktualisieren.

6
alebagran

Die Erweiterung " LivePage Chrome" kann einfach eingestellt werden, um Änderungen in lokalen Dateien zu überwachen.

4

Es gibt eine Java-App für os x und Chrome mit dem Namen Refreschro. Es überwacht eine bestimmte Gruppe von Dateien im lokalen Dateisystem und lädt Chrome erneut, wenn eine Änderung erkannt wird:

http://neromi.com/refreschro/

3
user2511839

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 die sofortige Einfügung eines speziellen Tags in Ihre HTML-Dateien erreicht.

2

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

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

In node.js können Sie primus.js (websockets) mit gulp.js + gulp-watch (jeweils ein Task-Runner und Change-Listener) verbinden, so dass gulp Ihrem Browser-Fenster mitteilt, dass es aktualisiert wird, wenn es HTML, js ist usw. ändern. Dies ist OS-agnostisch und ich habe es in einem lokalen Projekt. 

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

1
matanster

Die flexibelste Lösung, die ich gefunden habe, ist die chrome LiveReload-Erweiterung gepaart mit einem Guard-Server

Überwachen 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. Dies ist hilfreich, wenn Sie mit Ruby vertraut sind.

Ich habe auch die Tincr-Chrome-Erweiterung verwendet - sie scheint jedoch eng mit Frameworks und Dateistrukturen verbunden zu sein. (Ich habe versucht, Tincr für ein Jekyll-Projekt zu verdrahten, aber es erlaubte mir nur, eine einzelne Datei auf Änderungen zu prüfen, nicht auf Include-, Teil- oder Layoutänderungen. Tincr funktioniert jedoch hervorragend mit Projekten wie Rails, die konsistente und vordefinierte Dateistrukturen haben. 

Tincr wäre eine großartige Lösung, wenn allseitige Übereinstimmungsmuster für das Neuladen zulässig wären, das Projekt jedoch noch in seinen Features begrenzt ist. 

1
lfender6445

Das funktioniert für mich (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}" "[email protected]"; do
    xdotool search --onlyvisible --class chromium windowactivate --sync key F5 \
    search --onlyvisible --class gnome-terminal windowactivate
done

Sie müssen möglicherweise inotify und xdotool packages (Sudo apt-get install inotify-tools xdotool in Ubuntu) installieren und die Argumente von --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 zum Terminal zurück.

1
scripter

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.

Vollständige Details können hier abgerufen werden.

1
Sakthi Priyan H

Basierend auf der Antwort von attekei für OSX:

$ brew install fswatch

Chuck all dies 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 Registerkarte, die mit file:// beginnt, neu geladen und endet mit dem ersten Befehlszeilenargument. Sie können es nach Wunsch anpassen.

Zum Abschluss noch etwas tun.

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

fswatch -o gibt die Anzahl der Dateien aus, die sich bei jedem Änderungsereignis geändert haben (eine pro Zeile). Normalerweise wird nur 1 gedruckt. xargs liest diese 1s in und -n1 bedeutet, dass jedes Argument als Argument an eine neue Ausführung von osascript übergeben wird (wobei es ignoriert wird).

0
Timmmm
(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>

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

0

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

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

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 für den Fall, dass Sie es auf dem Server oder etwas anderem ausführen. Überprüfen Sie die Referenz für weitere Details!

0
Alvaro

Ok, hier ist meine grobe Auto Hotkey Lösung (unter Linux versuchen Sie Auto Key ). Wenn die Tastenkombination save gedrückt wird, aktivieren Sie den Browser, klicken Sie auf die Schaltfläche reload 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
0
Nils

Installieren und einrichten von chromix

Fügen Sie dies nun Ihrem .vimrc hinzu.

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

den Port auf den von Ihnen verwendeten ändern

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' "

geben Sie dann einfach das Verzeichnis ein, das Sie überwachen möchten, und führen Sie "watch_refresh_chrome" aus.

0
Pegasus