Ricaricamento automatico del browser quando salvo le modifiche al file html, in Chrome?

106

Sto modificando un file HTML in Vim e voglio che il browser si aggiorni ogni volta che il file sottostante cambia.

Esiste un plug-in per Google Chrome che ascolterà le modifiche al file e aggiornerà automaticamente la pagina ogni volta che salvo una modifica al file? So che c'è XRefresh per Firefox ma non sono riuscito a far funzionare XRefresh.

Quanto sarebbe difficile scrivere una sceneggiatura per farlo da solo?

vim  google-chrome  automation 
— Kevin Burke
fonte
2
— Ciro Santilli郝海东冠状病六四事件法轮功
Dopo aver cercato un po 'di tempo per soluzioni funzionanti ovunque, ho codificato il mio: alexshulzhenko.ru/web-development-autorefresh-page-on-changes
— Tebe
Codice anche il mio: Live Reload per Chrome e Firefox: github.com/blaise-io/live-reload#readme . Ripeti l'URL dell'host nel campo URL del file di origine dell'addon per monitorare se stesso.
— Blaise
Ottima estensione, @ Blaise. Ma perché c'è un minimo di 0,5 secondi minimo per la ricarica. Perché non 0,1 secondi per renderlo più reattivo?
— Jay
@Jay Poiché il monitoraggio non è economico, il tuo server dovrebbe generare una risposta ogni 0.1s e dovrebbe generare un hash del file statico ogni 0.1s. Ma probabilmente puoi modificare il modulo utilizzando gli strumenti di sviluppo per consentire <0,5 secondi.
— Blaise

Risposte:

24

Presumo che tu non sia su OSX? Altrimenti potresti fare qualcosa di simile con applecript:

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

C'è anche un plugin per Chrome chiamato "auto refresh plus" dove puoi specificare un ricaricamento ogni x secondi:

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

— milkypostman
fonte
23
Quel plugin non sembra controllare il filesystem locale e invece si aggiorna periodicamente.
— Dan Dascalescu
Ricevo errori durante la modifica del browser in Chrome. Per risolvere il problema, modificare il keywordper watch_keywordla seguente riga:if (URL of atab contains "#{keyword}") then
— Tim Joyce
Whau! Sto usando lo script dal tuo primo collegamento ( goo.gl/FZJvdJ ) con alcune piccole modifiche per Dart-Development con Chromium. Funziona come un fascino!
— Mike Mitterer
2
È una domanda piuttosto vecchia, ma la sincronizzazione del browser è lo strumento per esattamente questo.
— miha
81

Soluzione JavaScript pura!

Live.js

Basta aggiungere quanto segue al tuo <head>:

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

Come? Basta includere Live.js e monitorerà la pagina corrente, inclusi CSS e Javascript locali, inviando richieste HEAD consecutive al server. Le modifiche al CSS verranno applicate dinamicamente e le modifiche HTML o Javascript ricaricheranno la pagina. Provalo!

Dove? Live.js funziona in Firefox, Chrome, Safari, Opera e IE6 + fino a prova contraria. Live.js è indipendente dal framework di sviluppo o dal linguaggio che utilizzi, che si tratti di Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla o what-have-you.

Ho copiato questa risposta quasi alla lettera da qui , perché penso che sia più semplice e più generale della risposta attualmente accettata qui.

— leekaiinthesky
fonte
5
Puoi metterlo in alto e usare anche python -m SimpleHTTPServer easy peasy
— Marcel Valdez Orozco
2
Una versione PHP alternativa èphp -S localhost:8080
— roryok
3
C'è anche python3 -m http.server, così come molti altri per altre lingue / strumenti .
— carlwgeorge
1
Wow, questa è una soluzione molto chiara. Sono sorpreso di dover scorrere fino a qui per trovarlo.
— Trieu Nguyen,
1
@arvixx Funziona con i file locali, purché si utilizzi un server http locale (e si utilizzi http (s): //). Sono d'accordo che non funziona con lo schema file: // uri, se è questo che intendi. Vedi il commento di Marcel Valdez Orozco sopra per un modo semplice per creare istantaneamente un server http dalla tua directory locale.
— leekaiinthesky
23

Tincr è un'estensione di Chrome che aggiornerà la pagina ogni volta che il file sottostante cambia.

— Konstantin Spirin
fonte
4
Questo strumento è fantastico. Tra le altre cose, puoi aggiornare il CSS su una pagina senza aggiornare l'HTML / JS.
— Fango
sembra promettente ma ho provato a collegare tincr per un progetto jekyll - mi ha permesso solo di guardare un singolo file per le modifiche, senza tenere conto di include, modifiche parziali o di layout
— lfender6445
3
Sfortunatamente, Tincr utilizza NPAPI che è deprecato ed è disabilitato in Chrome per impostazione predefinita (da aprile 2015). E sarà completamente rimosso presto (settembre 2015).
— Jan Včelák
4
Non più disponibile.
— nu everest
2
Non l'ho trovato nella galleria degli exts, ma ho scoperto che DevTools Autosave
— Hos Mercury
17

Handy Bash one-liner per OS X, assumendo che tu abbia installato fswatch ( brew install fswatch). Guarda un percorso / file arbitrario e aggiorna la scheda Chrome attiva quando ci sono modifiche:

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'

Scopri di più su fswatch qui: https://stackoverflow.com/a/13807906/3510611

— attekei
fonte
Grazie! questa è l'unica risposta che funziona nell'agosto 2017! Questo dovrebbe essere contrassegnato come risposta.
— Ujjwal-Nadhani
semplice e utile
— Pegasus
Esattamente quello che stavo cercando! Grazie!
— ThisIsFlorianK
15

Con l'aggiunta di un singolo meta tag nel tuo documento, puoi istruire il browser a ricaricarsi automaticamente a un intervallo specificato:

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

Inserito nel tag head del documento, questo meta tag indicherà al browser di aggiornarsi ogni tre secondi.

— alebagran
fonte
funziona anche con i file locali. Per me questa è la risposta corretta.
— pid
11

http://livereload.com/ - app nativa per OS X, versione Alpha per Windows. Sorgente aperto su https://github.com/livereload/LiveReload2

— Jibin
fonte
2
Fantastico, ma $ 10? Veramente? Sì.
— un nerd pagato il
@un nerd pagato, sembra ragionevole se funziona. Inoltre la fonte è proprio lì, quindi prova prima di acquistare.
— Mark Fox
1
C'è anche un componente aggiuntivo gratuito del browser Live Reload (collisione accidentale di nomi) che ho creato che fa lo stesso gratuitamente: github.com/blaise-io/live-reload#readme
— Blaise
7

Usa Gulp per guardare i file e Browsersync per ricaricare il browser.

I passaggi sono:

Nella riga di comando esegui

npm install --save-dev gulp browser-sync

Crea gulpfile.js con i seguenti contenuti:

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

Correre

gulp servire

Modifica HTML, salva e guarda il tuo browser ricaricare. La magia viene eseguita inserendo al volo tag speciali nei file HTML.

— Konstantin Spirin
fonte
2
Dove metti gulpfile.js?
— nu everest
Eccellente. Esattamente quello che stavo cercando. Grazie.
— Jeremy Poi
5

So che questa è una vecchia domanda, ma nel caso in cui aiuti qualcuno, c'è una ricarica pacchetto npm di che lo risolve.

Nel caso in cui non lo stai eseguendo su un server o hai ricevuto l'errore Live.js doesn't support the file protocol. It needs http.

Basta installarlo:

npm install reload -g

e quindi nella directory index.html, esegui:

reload -b

Avvierà un server che si aggiornerà ogni volta che salverai le modifiche.

Ci sono molte altre opzioni nel caso in cui lo stai eseguendo sul server o qualsiasi altra cosa. Controlla il riferimento per maggiori dettagli!

— Alvaro
fonte
3

C'è un'app java per os x e Chrome chiamata Refreschro. Monitorerà un determinato set di file sul file system locale e ricaricherà Chrome quando viene rilevata una modifica:

http://neromi.com/refreschro/

— user2511839
fonte
1
a partire dal 29 agosto 2016 questa è l'opzione di lavoro gratuita più semplice qui. Grazie!
— polpetti
Non attendibile Per mac, rifiuta l'installazione
— Hos Mercury
3

Se sei su GNU / Linux, puoi usare un browser piuttosto interessante chiamato Falkon . È basato su Qt WebEngine . È proprio come Firefox o Chromium, tranne per il fatto che aggiorna automaticamente la pagina quando un file viene aggiornato. L'aggiornamento automatico non ha molta importanza se usi vim, nano o atom, vscode, parentesi, geany, mousepad ecc.

Su Arch Linux, puoi installare Falkon abbastanza facilmente:

sudo pacman -S falkon

Ecco il pacchetto snap.

— S.Goswami
fonte
2

Una soluzione rapida che a volte uso è dividere lo schermo in due e ogni volta che viene apportata una modifica, fare clic sul documento xD.

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

In node.js, puoi collegare primus.js (websockets) con gulp.js + gulp-watch (rispettivamente un task runner e un change listener), in modo che gulp faccia sapere alla finestra del browser che dovrebbe aggiornarsi ogni volta che html, js , ecc. cambia. Questo è agnostico del sistema operativo e lo faccio funzionare in un progetto locale.

Qui, la pagina è servita dal tuo server web, non caricata come file dal disco, che in realtà è più simile alla cosa reale.

— matanster
fonte
Potresti fornire un collegamento a una pagina che mostra come farlo o meglio ancora un insieme di comandi da eseguire per quelli di noi che non hanno familiarità con node?
— nu everest
1

Questo funziona per me (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

Potrebbe essere necessario installare i pacchetti inotify e xdotool ( sudo apt-get install inotify-tools xdotoolin Ubuntu) e modificare gli argomenti di --classcon i nomi effettivi del browser e del terminale preferiti.

Avvia lo script come descritto e apri semplicemente index.html in un browser. Dopo ogni salvataggio in vim, lo script focalizzerà la finestra del browser, la aggiornerà e quindi tornerà al terminale.

— scripter
fonte
Non ha funzionato (sto cercando di aggiornare automaticamente chrome), in particolare la parte xdotool che cerca il chrome della classe della finestra, ma sono riuscito a farlo funzionare (la parte xdotool che è): xdotool search --name 127.0.0.1 windowactivate key F5per lavorare su localhost (127.0. 0.1) solo, ovviamente. Ora devo ricollegarlo allo script.
— Rolf
1

La soluzione più flessibile che ho trovato è l' estensione Chrome LiveReload abbinata a un server di guardia .

Guarda tutti i file in un progetto o solo quelli specificati. Ecco un esempio di configurazione di Guardfile:

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

Lo svantaggio è che devi impostarlo per progetto e aiuta se hai familiarità con Ruby.

Ho anche usato l'estensione Tincr chrome, ma sembra essere strettamente accoppiata a framework e strutture di file. (Ho provato a collegare tincr per un progetto jekyll ma mi ha permesso solo di guardare un singolo file per le modifiche, senza tenere conto di include, modifiche parziali o di layout). Tincr, tuttavia, funziona alla grande fuori dagli schemi con progetti come binari che hanno strutture di file coerenti e predefinite.

Tincr sarebbe un'ottima soluzione se consentisse modelli di corrispondenza all inclusive per il ricaricamento, ma il progetto è ancora limitato nel suo set di funzionalità.

— lfender6445
fonte
1

Questo può essere fatto usando un semplice script Python.

  1. Usa pyinotify per monitorare una particolare cartella.
  2. Usa Chrome con il debug abilitato. L'aggiornamento può essere effettuato tramite una connessione websocket.

I dettagli completi possono essere riportati qui .

— Sakthi Priyan H
fonte
1

Basato sulla risposta di attekei per OSX:

$ brew install fswatch

Metti tutto questo 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.");
}

Questo ricaricherà la prima scheda che trova che inizia con file://e finisce con il primo argomento della riga di comando. Puoi modificarlo come desideri.

Infine, fai qualcosa di simile.

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

fswatch -orestituisce il numero di file che sono cambiati in ogni evento di modifica, uno per riga. Di solito verrà stampato solo 1. xargslegge quei messaggi 1e -n1significa che li passa ciascuno come argomento per una nuova esecuzione di osascript(dove verrà ignorato).

— Timmmm
fonte
1
Questo è quello che stavo cercando, grazie! Usando tab.title.includes(argv[0])come condizionale posso abbinare al titolo della pagina che può essere meno complicato dell'URL e funziona quando si utilizza un server locale piuttosto che file: //.
— David Mirabito
0

Installa e configura chromix

Ora aggiungi questo al tuo file .vimrc

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

cambia la porta in quella che usi

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

Salva questo codice in un file livereload.js e includilo nella parte inferiore dello script HTML in questo modo:

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

Ciò che farà è aggiornare la pagina ogni 100 mili-secondi. Tutte le modifiche apportate al codice sono immediatamente visibili agli occhi.

— Codificatore bosniaco
fonte
Questo non risponde alla domanda.
— Michael Fulton
Sì corretto, ma continuo a pensare che sia utile in situazioni in cui l'utente desidera un aggiornamento costante del suo documento HTML. Rispetto la sua onestà, signore.
— Coder bosniaco
0

Ok, ecco la mia rozza soluzione Auto Hotkey (su Linux, prova Auto Key ). Quando viene premuta la scorciatoia da tastiera per il salvataggio , attiva il browser, fai clic sul pulsante di ricarica , quindi torna all'editor. Sono solo stanco di far funzionare altre soluzioni. Non funzionerà se il tuo editor esegue il salvataggio automatico.

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

Soluzione offline utilizzando R

Questo codice:

  • imposta un server locale utilizzando il file .html fornito
  • restituire l'indirizzo del server, in modo da poterlo guardare in un browser.

  • fai in modo che il browser si aggiorni ogni volta che una modifica viene salvata nel file .html.

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

Esistono soluzioni simili per Python ecc.

— Rasmus Larsen
fonte
0

Aggiungilo al tuo codice HTML

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

Durante la modifica, la pagina del browser è sfocata, tornando a guardarla, viene attivato l'evento di attivazione e la pagina viene ricaricata.

— pinoyyid
fonte
-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' "

quindi entra nella directory che vuoi monitorare esegui "watch_refresh_chrome"

— Pegasus
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.