web-dev-qa-db-fra.com

Comment effectuer l'actualisation automatique de Firefox lors d'un changement de fichier?

Est-ce que quelqu'un connaît une extension pour Firefox, ou un script ou un autre mécanisme, qui peut surveiller un ou plusieurs fichiers locaux. Firefox actualiserait automatiquement ou mettrait à jour son canevas lorsqu'il détecterait un changement (d'horodatage) dans les fichiers.

Pour éditer du CSS, il serait idéal que seulement le CSS puisse être rechargé, plutôt qu'un nouveau rendu HTML complet.

En effet, il permettrait un comportement similaire à Firebug avec son édition dynamique HTML/CSS, uniquement via des fichiers externes.

htmlcssfirefoxbrowser
63
Charles Roper

Live.js

Depuis le site Web:

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

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

Il a l'énorme avantage de travailler avec IETester , rafraîchissant dynamiquement chaque onglet ouvert IE.

Essayez-le en ajoutant ce qui suit à votre <head>

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

Le rechargement automatique est une extension pour Firefox qui surveille les modifications des fichiers locaux et rafraîchit le navigateur:

https://addons.mozilla.org/en-US/firefox/addon/auto-reload/

40
Harry Love

Je recommanderais livejs

Mais il présente les avantages suivants et Inconvénients

Avantages:
1. Installation facile
2. Fonctionne de manière transparente sur différents navigateurs (Live.js fonctionne dans Firefox, Chrome, Safari, Opera et IE6 +)
3. N'ajoutez pas d'intervalle irritant pour rafraîchir le navigateur spécialement lorsque vous souhaitez déboguer avec la conception
4. Actualisation uniquement lorsque vous enregistrez la modification ctrl + S
5. Enregistre directement CSS, etc. de firebug Je n'ai pas utilisé cette fonctionnalité mais j'ai lu sur leur site http://livejs.com/ qu'ils la prennent également en charge !!!

Inconvénients:
1. Cela ne fonctionnera pas sur le protocole de fichier file:///C:/Users/Admin/Desktop/livejs/live.html
2. Vous devez avoir un serveur pour l'exécuter comme http://localhost
3. Vous devez le supprimer lors du déploiement sur la mise en scène/production
4. Ne sert pas [~ # ~] cdn [~ # ~] J'ai essayé de tricher et d'appliquer un lien direct http: // livejs .com/live.js mais cela ne fonctionnera pas, vous devez télécharger et rester local pour travailler.

7
Aamir Shahzad

Xrefresh avec firebug.

6
Alysko

Firefox a une extension appelée mozRepl.

Emacs peut s'y connecter, avec le mode moz-reload-on-save-.

une fois configuré, l'enregistrement du fichier force une actualisation de la fenêtre du navigateur.

4
bob

Vous pouvez simplement placer un intervalle javascript sur votre page, le faire interroger un script local qui vérifie la dernière date de modification du fichier css et le rafraîchit s'il a changé.

exemple jQuery:

var modTime = 0;
setInterval(function(){
  $.post("isModified.php", {"file":"main.css", "time":modTime}, function(rst) {
    if (rst.time != modTime) {
      modTime = rst.time;
      // reload style tag
      $("head link[rel='stylesheet']:eq(0)").remove();
      $("head").prepend($(document.createElement("link")).attr({
          "rel":"stylesheet",
          "href":"http://sstatic.net/mso/all.css?v=4372"
        })
      );
    }
  });
}, 5000);
4
Sampson

Il existe des IDE qui contiennent cette capacité (ils auront un volet en eux ou d'autres moyens pour actualiser automatiquement une page lors de l'enregistrement).

Si vous voulez le faire vous-même, un hack rapide consiste à définir meta refresh sur la page à une valeur faible - une ou deux secondes.

# Will refresh the page content every second
<meta http-equiv="refresh" content="1" />
3
Mike Buckbee

Browsersync peut le faire du côté serveur/extérieur du navigateur.

Cela peut obtenir des résultats/choses plus répétables qui ne nécessitent pas autant de clics.

Cela servira une page et rafraîchira sur le changement

cd static_content
browser-sync start --server --files .

Il permet également un mode de script.

2
Att Righ

Jetez un œil à l'extension FileWatcher: https://addons.mozilla.org/en-US/firefox/addon/filewatcher/

  • c'est une WebExtension, donc ça marche avec le dernier Firefox
  • il a une application native (à installer localement) qui surveille les fichiers surveillés pour les changements en utilisant les appels natifs du système d'exploitation (pas d'interrogation!) et informe WebExtension de le laisser recharger la page Web
  • le rechargement est piloté par les règles : une règle contient l'URL de la page (avec le support des expressions régulières) et ses inclus/exclus fichiers source locaux
  • open source: https://github.com/coolsoft-ita/filewatcher

AVERTISSEMENT: je suis l'auteur de l'extension;)

0
nicorac

Je pense que vous pouvez le résoudre en utilisant certaines requêtes ajax après un intervalle déterminé. Vous pouvez faire une demande aux fichiers CSS et ensuite si vous n'obtenez pas l'en-tête "non modifié" vous supprimez votre CSS et le chargez à nouveau. Pour les fichiers dynamiques, vous faites une demande et stockez la réponse, puis chaque fois que vous faites une demande à ce fichier, vous comparez la réponse à la dernière.

0
mck89