Recharger automatiquement le navigateur lorsque j'enregistre les modifications apportées au fichier html, dans Chrome?

106

J'édite un fichier HTML dans Vim et je veux que le navigateur se rafraîchisse chaque fois que le fichier en dessous change.

Existe-t-il un plugin pour Google Chrome qui écoutera les modifications apportées au fichier et actualisera automatiquement la page chaque fois que j'enregistre une modification dans le fichier? Je sais qu'il y a XRefresh pour Firefox mais je n'ai pas du tout pu faire fonctionner XRefresh.

Serait-il difficile d'écrire un script pour le faire moi-même?

vim google-chrome automation Kevin Burke
la source
2
Pour Firefox: stackoverflow.com/questions/1346716/…
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Après avoir cherché un peu de temps pour la solution fonctionne partout, j'ai codé le mien: alexshulzhenko.ru/web-development-autorefresh-page-on-changes
Tebe
Je code également le mien: Live Reload pour Chrome et Firefox: github.com/blaise-io/live-reload#readme . Répétez l'URL de l'hôte dans le champ URL du fichier source de l'addon pour se surveiller.
Blaise
Belle extension, @Blaise. Mais pourquoi y a-t-il un minimum de 0,5 seconde minimum pour le rechargement. Pourquoi pas 0,1 seconde pour le rendre plus réactif?
Jay
@Jay Parce que la surveillance n'est pas bon marché, votre serveur devrait générer une réponse toutes les 0,1 s et il devrait générer un hachage du fichier statique toutes les 0,1 s. Mais vous pouvez probablement modifier le formulaire à l'aide des outils de développement pour autoriser <0,5s.
Blaise

Réponses:

23

Je suppose que vous n'êtes pas sur OSX? Sinon, vous pourriez faire quelque chose comme ça avec applescript:

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

Il existe également un plugin pour Chrome appelé «auto refresh plus» où vous pouvez spécifier un rechargement toutes les x secondes:

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

laitier
la source
23
Ce plugin ne semble pas surveiller le système de fichiers local, et se rafraîchira plutôt périodiquement.
Dan Dascalescu
J'obtenais des erreurs lors du passage du navigateur à chrome. Pour résoudre ce problème, remplacez le keywordpar watch_keyworddans la ligne suivante:if (URL of atab contains "#{keyword}") then
Tim Joyce
Whau! J'utilise le script de votre premier lien ( goo.gl/FZJvdJ ) avec quelques petits mods pour Dart-Development avec Chromium. Fonctionne comme un charme!
Mike Mitterer
2
C'est une question assez ancienne, mais la synchronisation du navigateur est l'outil pour exactement cela.
miha
81

Solution JavaScript pure!

Live.js

Ajoutez simplement ce qui suit à votre <head>:

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

Comment? Incluez simplement Live.js et il surveillera la page actuelle, y compris le CSS local et le Javascript, en envoyant des requêtes HEAD consécutives au serveur. Les modifications apportées au CSS seront appliquées dynamiquement et les modifications HTML ou Javascript rechargeront la page. Essayez-le!

Où? Live.js fonctionne dans Firefox, Chrome, Safari, Opera et IE6 + jusqu'à preuve du contraire. Live.js est indépendant du framework de développement ou du langage que vous utilisez, que ce soit Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla ou what-have-you.

J'ai copié cette réponse presque textuellement d' ici , car je pense que c'est plus facile et plus général que la réponse actuellement acceptée ici.

poireau
la source
5
Vous pouvez mettre cela en haut et également utiliser python -m SimpleHTTPServer easy peasy
Marcel Valdez Orozco
2
Une version alternative de PHP estphp -S localhost:8080
roryok
3
Il y en a aussi python3 -m http.server, ainsi que beaucoup d'autres pour d'autres langages / outils .
carlwgeorge
1
Wow, c'est une solution très soignée. Je suis surpris de devoir faire défiler jusqu'ici pour le trouver.
Trieu Nguyen
1
@arvixx Cela fonctionne avec les fichiers locaux, tant que vous exécutez un serveur http local (et utilisez http (s): //). Je suis d'accord que cela ne fonctionne pas avec le schéma file: // uri, si c'est ce que vous voulez dire. Voir le commentaire de Marcel Valdez Orozco ci-dessus pour un moyen simple de créer instantanément un serveur http à partir de votre répertoire local.
leekaiinthesky
23

Mise à jour : Tincr est mort.

Tincr est une extension Chrome qui rafraîchira la page chaque fois que le fichier en dessous change.

Konstantin Spirin
la source
4
Cet outil est incroyable. Entre autres choses, vous pouvez actualiser le CSS sur une page sans actualiser le HTML / JS.
Mud
semble prometteur mais j'ai essayé de câbler tincr pour un projet jekyll - cela ne m'a permis de regarder qu'un seul fichier pour les changements, sans tenir compte des changements d'
inclusion
3
Malheureusement, Tincr utilise NPAPI qui est obsolète et est désactivé par défaut dans Chrome (depuis avril 2015). Et il sera entièrement supprimé bientôt (septembre 2015).
Jan Včelák
4
Plus disponible.
nu everest
2
Je ne l'ai pas trouvé dans la galerie des exts, mais j'ai trouvé que DevTools Autosave
Hos Mercury
16

Handy Bash one-liner pour OS X, en supposant que vous ayez installé fswatch ( brew install fswatch). Il surveille un chemin / fichier arbitraire et actualise l'onglet Chrome actif lorsqu'il y a des modifications:

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'

En savoir plus sur fswatch ici: https://stackoverflow.com/a/13807906/3510611

attekei
la source
Je vous remercie! c'est la seule réponse qui fonctionne en août 2017! Cela devrait être marqué comme la réponse.
Ujjwal-Nadhani
simple et utile
Pegasus
Exactement ce que je cherchais! Merci!
ThisIsFlorianK
15

En ajoutant une seule balise Meta à votre document, vous pouvez demander au navigateur de se recharger automatiquement à un intervalle donné:

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

Placée dans la balise head de votre document, cette balise meta demandera au navigateur d'actualiser toutes les trois secondes.

Alebagran
la source
cela fonctionne également avec les fichiers locaux. Pour moi, c'est la bonne réponse.
pid
10

http://livereload.com/ - application native pour OS X, version Alpha pour Windows. Open source à https://github.com/livereload/LiveReload2

Jibin
la source
2
Cool, mais 10 $? Vraiment? Yeesh.
un nerd payé le
@un nerd payé, semble raisonnable si cela fonctionne. De plus, la source est là, alors essayez avant d'acheter.
Mark Fox
1
Il y a aussi un addon de navigateur gratuit Live Reload (collision de nom accidentelle) que j'ai créé et qui fait la même chose gratuitement: github.com/blaise-io/live-reload#readme
Blaise
7

Utilisez Gulp pour regarder les fichiers et Browsersync pour recharger le navigateur.

Les étapes sont:

Dans la ligne de commande, exécutez

npm install --save-dev gulp browser-sync

Créez gulpfile.js avec le contenu suivant:

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

Courir

avaler servir

Modifiez le HTML, enregistrez et voyez votre navigateur se recharger. La magie se fait grâce à l'injection à la volée d'une balise spéciale dans vos fichiers HTML.

Konstantin Spirin
la source
2
Où mettez-vous le gulpfile.js?
nu everest
Excellent. Exactement ce que je cherchais. Merci.
Jeremy puis le
6

Je sais que c'est une vieille question, mais au cas où cela aiderait quelqu'un, il existe un package reload npm qui la résout.

Dans le cas où vous ne l'exécutez pas sur un serveur ou avez reçu l'erreur Live.js doesn't support the file protocol. It needs http.

Installez-le simplement:

npm install reload -g

puis dans votre répertoire index.html, exécutez:

reload -b

Il démarrera un serveur qui s'actualisera à chaque fois que vous enregistrez vos modifications.

Il existe de nombreuses autres options au cas où vous l'exécuteriez sur le serveur ou autre chose. Consultez la référence pour plus de détails!

Alvaro
la source
5

L' extension LivePage Chrome peut facilement être configurée pour surveiller les modifications des fichiers locaux.

Serge Stroobandt
la source
3

Il existe une application java pour os x et Chrome appelée Refreschro. Il surveillera un ensemble donné de fichiers sur le système de fichiers local et rechargera Chrome lorsqu'une modification est détectée:

http://neromi.com/refreschro/

user2511839
la source
1
au 29 août 2016, c'est l'option de travail gratuite la plus simple ici. Je vous remercie!
polpetti
Pas de confiance Pour mac, refuser d'installer
Hos Mercury
3

Si vous êtes sous GNU / Linux, vous pouvez utiliser un navigateur assez sympa appelé Falkon . Il est basé sur le WebEngine Qt . C'est comme Firefox ou Chromium - sauf qu'il actualise automatiquement la page lorsqu'un fichier est mis à jour. L'actualisation automatique n'a pas beaucoup d'importance que vous utilisiez vim, nano ou atom, vscode, brackets, geany, mousepad, etc.

Sur Arch Linux, vous pouvez installer Falkon assez facilement:

sudo pacman -S falkon

Voici le package snap.

S. Goswami
la source
2

Une solution rapide que j'utilise parfois est de diviser l'écran en deux, et à chaque fois qu'une modification est apportée, cliquez sur le document xD.

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

Dans node.js, vous pouvez câbler primus.js (websockets) avec gulp.js + gulp-watch (un exécuteur de tâches et un écouteur de changement, respectivement), de sorte que gulp informe la fenêtre de votre navigateur qu'elle doit être actualisée chaque fois que html, js , etc., changez. Ceci est indépendant du système d'exploitation et je le fais travailler dans un projet local.

Ici, la page est servie par votre serveur Web, et non chargée en tant que fichier à partir du disque, ce qui ressemble plus à la réalité.

matanster
la source
Pourriez-vous fournir un lien vers une page qui montre comment faire cela ou, mieux encore, un ensemble de commandes à exécuter pour ceux d'entre nous qui ne sont pas aussi familiers avec node?
nu everest
1

Cela fonctionne pour moi (dans 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

Vous devrez peut-être installer les packages inotify et xdotool ( sudo apt-get install inotify-tools xdotooldans Ubuntu) et remplacer les arguments de --classpar les noms réels de votre navigateur et terminal préférés.

Démarrez le script comme décrit et ouvrez simplement index.html dans un navigateur. Après chaque enregistrement dans vim, le script focalisera la fenêtre de votre navigateur, l'actualisera, puis retournera au terminal.

scripteur
la source
Cela n'a pas fonctionné (j'essaie d'actualiser automatiquement le chrome), en particulier la partie xdotool recherchant le chrome de la classe de fenêtre, mais j'ai pu faire fonctionner cela (la partie xdotool qui est): xdotool search --name 127.0.0.1 windowactivate key F5pour travailler sur localhost (127.0. 0.1) uniquement, bien sûr. Maintenant, je dois le rebrancher dans le script.
Rolf
1

La solution la plus flexible que j'ai trouvée est l' extension chrome LiveReload associée à un serveur de garde .

Regardez tous les fichiers d'un projet ou uniquement ceux que vous spécifiez. Voici un exemple de configuration Guardfile:

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

L'inconvénient est que vous devez configurer cela par projet et cela aide si vous êtes familier avec ruby.

J'ai également utilisé l'extension Tincr chrome - mais elle semble être étroitement liée aux frameworks et aux structures de fichiers. (J'ai essayé de câbler tincr pour un projet jekyll mais cela ne m'a permis de regarder qu'un seul fichier pour les changements, sans tenir compte des inclusions, des changements partiels ou de mise en page). Cependant, Tincr fonctionne très bien dès la sortie de la boîte avec des projets tels que des rails qui ont des structures de fichiers cohérentes et prédéfinies.

Tincr serait une excellente solution s'il permettait des modèles de correspondance tout compris pour le rechargement, mais le projet est toujours limité dans son ensemble de fonctionnalités.

lfender6445
la source
1

Cela peut être fait en utilisant un simple script python.

  1. Utilisez pyinotify pour surveiller un dossier particulier.
  2. Utilisez Chrome avec le débogage activé. L'actualisation peut être effectuée via une connexion Websocket.

Tous les détails peuvent être consultés ici .

Sakthi Priyan H
la source
1

Basé sur la réponse d'Attekei pour OSX:

$ brew install fswatch

Jetez tout cela dans 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.");
}

Cela rechargera le premier onglet qu'il trouve qui commence par file://et se termine par le premier argument de ligne de commande. Vous pouvez le modifier à votre guise.

Enfin, faites quelque chose comme ça.

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

fswatch -orenvoie le nombre de fichiers qui ont changé à chaque événement de modification, un par ligne. Habituellement, il s'imprimera simplement 1. xargslit ces 1s dans et -n1signifie qu'il passe chacun d'eux comme argument à une nouvelle exécution de osascript(où il sera ignoré).

Timmmm
la source
1
C'est ce que je cherchais, merci! En utilisant tab.title.includes(argv[0])comme conditionnel, je peux faire correspondre le titre de la page qui peut être moins difficile que l'URL, et fonctionne lorsque vous utilisez un serveur local plutôt que file: //.
David Mirabito le
0

Installer et configurer chromix

Maintenant, ajoutez ceci à votre .vimrc

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

changez le port pour ce que vous utilisez

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

Enregistrez ce code dans un fichier livereload.js et incluez-le en bas du script HTML comme ceci:

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

Cela va rafraîchir la page toutes les 100 mili-secondes. Toutes les modifications que vous apportez au code sont instantanément visibles aux yeux.

Codeur bosniaque
la source
Cela ne répond pas à la question.
Michael Fulton
Oui, c'est correct, mais je pense toujours que c'est utile dans les situations où l'utilisateur souhaite une actualisation constante de son document HTML. Je respecte votre honnêteté monsieur.
Bosnian Coder
0

Ok, voici ma solution brute de raccourci clavier automatique (sous Linux, essayez la clé automatique ). Lorsque vous appuyez sur le raccourci clavier de sauvegarde , activez le navigateur, cliquez sur le bouton de rechargement , puis revenez à l'éditeur. Je suis juste fatigué de faire fonctionner d'autres solutions. Ne fonctionnera pas si votre éditeur effectue une sauvegarde automatique.

^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
la source
0

Solution hors ligne utilisant R

Ce code va:

  • configurer un serveur local en utilisant le fichier .html donné
  • renvoyez l'adresse du serveur, afin que vous puissiez la regarder dans un navigateur.

  • actualisez le navigateur à chaque fois qu'une modification est enregistrée dans le fichier .html.

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

Des solutions similaires existent pour python, etc.

Rasmus Larsen
la source
0

Ajoutez ceci à votre HTML

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

Pendant que vous modifiez, la page de votre navigateur est floue, en revenant pour la regarder, l'événement de mise au point est déclenché et la page se recharge.

pinoyyid
la source
-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' "

puis entrez simplement le répertoire que vous souhaitez surveiller exécutez "watch_refresh_chrome"

Pégase
la source