¿Recargar automáticamente el navegador cuando guardo los cambios en el archivo html, en Chrome?

106

Estoy editando un archivo HTML en Vim y quiero que el navegador se actualice cada vez que cambie el archivo debajo.

¿Existe un complemento para Google Chrome que escuche los cambios en el archivo y actualice automáticamente la página cada vez que guarde un cambio en el archivo? Sé que existe XRefresh para Firefox, pero no pude hacer que XRefresh se ejecutara en absoluto.

¿Qué tan difícil sería escribir un guión para hacerlo yo mismo?

vim google-chrome automation Kevin Burke
fuente
2
Para Firefox: stackoverflow.com/questions/1346716/…
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Después de buscar por un tiempo la solución de trabajos en todas partes, codifiqué la mía propia: alexshulzhenko.ru/web-development-autorefresh-page-on-changes
Tebe
También codifico el mío: Live Reload para Chrome y Firefox: github.com/blaise-io/live-reload#readme . Repita la URL del host en el campo URL del archivo de origen del complemento para supervisarse a sí mismo.
Blaise
Gran extensión, @Blaise. Pero, ¿por qué hay un mínimo de 0,5 segundos como mínimo para la recarga? ¿Por qué no 0,1 segundos para que responda mejor?
Jay
@Jay Debido a que el monitoreo no es barato, su servidor tendría que generar una respuesta cada 0.1s y necesitaría generar un hash del archivo estático cada 0.1s. Pero probablemente pueda editar el formulario usando herramientas de desarrollador para permitir <0.5s.
Blaise

Respuestas:

24

¿Asumo que no estás en OSX? De lo contrario, podría hacer algo como esto con Applecript:

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

También hay un complemento para Chrome llamado "actualización automática más" donde puede especificar una recarga cada x segundos:

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

cartero lechoso
fuente
23
Ese complemento no parece vigilar el sistema de archivos local y, en cambio, solo se actualizará periódicamente.
Dan Dascalescu
Recibí errores al cambiar el navegador a Chrome. Para solucionarlo, cambie keyworda watch_keyworden la siguiente línea:if (URL of atab contains "#{keyword}") then
Tim Joyce
¡Whau! Estoy usando el script de su primer enlace ( goo.gl/FZJvdJ ) con algunas pequeñas modificaciones para Dart-Development con Chromium. ¡Funciona de maravilla!
Mike Mitterer
2
Es una pregunta bastante antigua, pero la sincronización del navegador es la herramienta para eso exactamente.
miha
81

¡Solución pura de JavaScript!

Live.js

Simplemente agregue lo siguiente a su <head>:

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

¿Cómo? Simplemente incluya Live.js y supervisará la página actual, incluidos CSS y Javascript locales, enviando solicitudes HEAD consecutivas al servidor. Los cambios en CSS se aplicarán de forma dinámica y los cambios en HTML o Javascript volverán a cargar la página. ¡Intentalo!

¿Dónde? Live.js funciona en Firefox, Chrome, Safari, Opera e IE6 + hasta que se demuestre lo contrario. Live.js es independiente del marco de desarrollo o del lenguaje que utilice, ya sea Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla o lo que sea.

Copié esta respuesta casi literalmente de aquí , porque creo que es más fácil y más general que la respuesta actualmente aceptada aquí.

leekaiinthesky
fuente
5
Puede poner esto en la parte superior y también usar python -m SimpleHTTPServer easy peasy
Marcel Valdez Orozco
2
Una versión alternativa de PHP esphp -S localhost:8080
roryok
3
También hay python3 -m http.server, así como muchos más para otros lenguajes / herramientas .
carlwgeorge
1
Vaya, esta es una solución muy buena. Me sorprende tener que desplazarme hasta aquí para encontrarlo.
Trieu Nguyen
1
@arvixx Funciona con archivos locales, siempre que esté ejecutando un servidor http local (y use http (s): //). Sin embargo, estoy de acuerdo en que no funciona con el esquema file: // uri, si eso es lo que quieres decir. Vea el comentario de Marcel Valdez Orozco arriba para una manera fácil de crear instantáneamente un servidor http desde su directorio local.
leekaiinthesky
23

Tincr es una extensión de Chrome que actualizará la página cada vez que cambie el archivo debajo.

Konstantin Spirin
fuente
4
Esta herramienta es asombrosa. Entre otras cosas, puede actualizar el CSS en una página sin actualizar el HTML / JS.
Barro
parece prometedor, pero intenté conectar tincr para un proyecto jekyll; solo me permitió ver un solo archivo para ver los cambios, sin tener en cuenta los cambios de
inclusión
3
Desafortunadamente, Tincr usa NPAPI, que está en desuso y está deshabilitado en Chrome de forma predeterminada (desde abril de 2015). Y pronto se eliminará por completo (septiembre de 2015).
Jan Včelák
4
Ya no está disponible.
Nu Everest
2
No lo encontré en la galería de extensiones, pero encontré que DevTools Autosave
Hos Mercury
17

Handy Bash de una sola línea para OS X, suponiendo que haya instalado fswatch ( brew install fswatch). Observa una ruta / archivo arbitrario y actualiza la pestaña activa de Chrome cuando hay cambios:

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'

Vea más sobre fswatch aquí: https://stackoverflow.com/a/13807906/3510611

attekei
fuente
¡Gracias! ¡esta es la única respuesta que funciona en agosto de 2017! Esto debe marcarse como la respuesta.
Ujjwal-Nadhani
simple y útil
Pegasus
¡Exactamente lo que estaba buscando! ¡Gracias!
ThisIsFlorianK
15

Con la adición de una única metaetiqueta en su documento, puede indicar al navegador que se recargue automáticamente en un intervalo proporcionado:

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

Situada dentro de la etiqueta principal de su documento, esta metaetiqueta le indicará al navegador que se actualice cada tres segundos.

alebagran
fuente
esto también funciona con archivos locales. Para mí, esta es la respuesta correcta.
pid
11

http://livereload.com/ - aplicación nativa para OS X, versión Alpha para Windows. Fuente abierta en https://github.com/livereload/LiveReload2

Jibin
fuente
2
Genial, pero ¿$ 10? De Verdad? Yeesh.
un nerd pagado
@un nerd pagado, parece razonable si funciona. Además, la fuente está ahí, así que pruébelo antes de comprar.
Mark Fox
1
También hay un complemento de navegador Live Reload (colisión accidental de nombres) que creé y que hace lo mismo de forma gratuita: github.com/blaise-io/live-reload#readme
Blaise
7

Utilice Gulp para ver los archivos y Browsersync para volver a cargar el navegador.

Los pasos son:

En la línea de comando ejecutar

npm install --save-dev gulp browser-sync

Cree gulpfile.js con el siguiente contenido:

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

correr

trago servir

Edite HTML, guarde y vea cómo se recarga su navegador. La magia se realiza mediante la inyección sobre la marcha de una etiqueta especial en sus archivos HTML.

Konstantin Spirin
fuente
2
¿Dónde pones el archivo gulpfile.js?
nu everest
Excelente. Exactamente lo que estaba buscando. Gracias.
Jeremy Luego
5

La extensión LivePage Chrome se puede configurar fácilmente para monitorear cambios en archivos locales.

Serge Stroobandt
fuente
5

Sé que esta es una pregunta antigua, pero en caso de que ayude a alguien, hay un paquete npm de recarga que lo resuelve.

En caso de que no lo esté ejecutando en un servidor o haya recibido el error Live.js doesn't support the file protocol. It needs http.

Solo instálalo:

npm install reload -g

y luego en su directorio index.html, ejecute:

reload -b

Iniciará un servidor que se actualizará cada vez que guarde sus cambios.

Hay muchas otras opciones en caso de que lo esté ejecutando en el servidor o cualquier otra cosa. ¡Consulte la referencia para obtener más detalles!

Álvaro
fuente
3

Hay una aplicación Java para OS X y Chrome llamada Refreschro. Supervisará un conjunto determinado de archivos en el sistema de archivos local y volverá a cargar Chrome cuando se detecte un cambio:

http://neromi.com/refreschro/

usuario2511839
fuente
1
a partir del 29 de agosto de 2016, esta es la opción de trabajo gratuita más fácil aquí. ¡Gracias!
polpetti
No es de confianza Para mac, se niega a instalar
Hos Mercury
3

Si está en GNU / Linux, puede usar un navegador bastante bueno llamado Falkon . Está basado en Qt WebEngine . Es como Firefox o Chromium, excepto que actualiza automáticamente la página cuando se actualiza un archivo. La actualización automática no importa mucho si usa vim, nano o atom, vscode, brackets, geany, mousepad, etc.

En Arch Linux, puede instalar Falkon con bastante facilidad:

sudo pacman -S falkon

Aquí está el paquete instantáneo.

S.Goswami
fuente
2

Una solución rápida que utilizo a veces es dividir la pantalla en dos, y cada vez que se realiza un cambio, hacer clic en el documento xD.

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

En node.js, puede conectar primus.js (websockets) con gulp.js + gulp-watch (un ejecutor de tareas y un oyente de cambio, respectivamente), de modo que gulp le permite a la ventana de su navegador saber que debe actualizarse cada vez que html, js , etc., cambiar. Esto es independiente del sistema operativo y lo tengo funcionando en un proyecto local.

Aquí, la página es servida por su servidor web, no cargada como un archivo desde el disco, que en realidad se parece más a lo real.

matanster
fuente
¿Podría proporcionar un enlace a una página que muestre cómo hacer esto o mejor aún, un conjunto de comandos para ejecutar para aquellos de nosotros que no estamos tan familiarizados con el nodo?
nu everest
1

Esto funciona para mí (en 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

Es posible que deba instalar los paquetes inotify y xdotool ( sudo apt-get install inotify-tools xdotoolen Ubuntu) y cambiar args de --classpor los nombres reales de su navegador y terminal preferidos.

Inicie el script como se describe y simplemente abra index.html en un navegador. Después de cada guardado en vim, el script enfocará la ventana de su navegador, la actualizará y luego regresará a la terminal.

guionista
fuente
No funcionó (estoy tratando de actualizar automáticamente Chrome), específicamente la parte xdotool que busca cromo de clase de ventana, pero pude hacer que esto funcione (la parte xdotool que es): xdotool search --name 127.0.0.1 windowactivate key F5para trabajar en localhost (127.0. 0.1) solo, por supuesto. Ahora tengo que volver a conectarlo al guión.
Rolf
1

La solución más flexible que he encontrado es la extensión Chrome LiveReload emparejada con un servidor de guardia .

Observe todos los archivos de un proyecto, o solo los que especifique. Aquí hay una configuración de Guardfile de muestra:

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

La desventaja es que debe configurar esto por proyecto y ayuda si está familiarizado con ruby.

También he usado la extensión de cromo Tincr, pero parece estar estrechamente acoplada a marcos y estructuras de archivos. (Intenté conectar tincr para un proyecto jekyll, pero solo me permitió ver un solo archivo para ver los cambios, sin tener en cuenta los cambios de inclusión, parciales o de diseño). Sin embargo, Tincr funciona muy bien desde el primer momento con proyectos como rieles que tienen estructuras de archivos consistentes y predefinidas.

Tincr sería una gran solución si permitiera la recarga de patrones de coincidencia con todo incluido, pero el proyecto aún está limitado en su conjunto de características.

lfender6445
fuente
1

Esto se puede hacer usando un simple script de Python.

  1. Use pyinotify para monitorear una carpeta en particular.
  2. Utilice Chrome con la depuración habilitada. La actualización se puede realizar a través de una conexión websocket.

Los detalles completos se pueden consultar aquí .

Sakthi Priyan H
fuente
1

Basado en la respuesta de attekei para OSX:

$ brew install fswatch

Arroja todo esto en 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.");
}

Eso recargará la primera pestaña que encuentre que comience file://y termine con el primer argumento de la línea de comando. Puede modificarlo como desee.

Finalmente, haz algo como esto.

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

fswatch -ogenera el número de archivos que han cambiado en cada evento de cambio, uno por línea. Por lo general, solo se imprimirá 1. xargslee esos 1s en y -n1significa que pasa cada uno como un argumento a una nueva ejecución de osascript(donde será ignorado).

Timmmm
fuente
1
Esto es lo que estaba buscando, gracias! Usando tab.title.includes(argv[0])como condicional, puedo hacer coincidir el título de la página, que puede ser menos delicado que la URL, y funciona cuando se usa un servidor local en lugar de file: //.
David Mirabito
0

Instalar y configurar chromix

Ahora agregue esto a su .vimrc

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

cambia el puerto al que usas

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

Guarde este código en un archivo livereload.js e inclúyalo en la parte inferior del script HTML así:

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

Lo que hará es actualizar la página cada 100 milisegundos. Cualquier cambio que realice en el código es visible instantáneamente a los ojos.

Codificador bosnio
fuente
Esto no responde a la pregunta.
Michael Fulton
Sí, correcto, pero sigo pensando que es útil en situaciones en las que el usuario desea una actualización constante de su documento HTML. Respeto su honestidad señor.
Codificador bosnio
0

Ok, aquí está mi cruda solución Auto Hotkey (en Linux, pruebe Auto Key ). Cuando se presione el atajo de teclado para guardar , active el navegador, haga clic en el botón de recarga y luego vuelva al editor. Estoy cansado de poner en marcha otras soluciones. No funcionará si su editor guarda automáticamente.

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

Solución sin conexión con R

Este código:

  • configurar un servidor local usando el archivo .html dado
  • devuelva la dirección del servidor, para que pueda verlo en un navegador.

  • hacer que el navegador se actualice cada vez que se guarde un cambio en el archivo .html.

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

Existen soluciones similares para Python, etc.

Rasmus Larsen
fuente
0

Agrega esto a tu HTML

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

Mientras edita, la página de su navegador se vuelve borrosa, al volver a mirarla, el evento de enfoque se activa y la página se vuelve a cargar.

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

luego ingrese el directorio que desea monitorear ejecute "watch_refresh_chrome"

Pegaso
fuente