How do I make Firefox auto-refresh on file change?

前端 未结 10 613
半阙折子戏
半阙折子戏 2020-11-29 18:43

Does anyone know of an extension for Firefox, or a script or some other mechanism, that can monitor one or more local files. Firefox would auto-refresh or otherwise update i

相关标签:
10条回答
  • 2020-11-29 18:55

    You can use live.js with a tampermonkey script to avoid having to include https://livejs.com/live.js in your HTML file.

    // ==UserScript==
    // @name         Auto reload
    // @author       weirane
    // @version      0.1
    // @match        http://127.0.0.1/*
    // @grant        none
    // ==/UserScript==
    
    (function() {
        'use strict';
        if (Number(window.location.port) === 8000) {
            const script = document.createElement('script');
            script.src = 'https://livejs.com/live.js';
            document.body.appendChild(script);
        }
    })();
    

    With this tampermonkey script, the live.js script will be automatically inserted to pages whose address matches http://127.0.0.1:8000/*. You can change the port according to your need.

    0 讨论(0)
  • 2020-11-29 18:57

    Live.js

    From the website:

    How? Just include Live.js and it will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server. Changes to CSS will be applied dynamically and HTML or Javascript changes will reload the page. Try it!

    Where? Live.js works in Firefox, Chrome, Safari, Opera and IE6+ until proven otherwise. Live.js is independent of the development framework or language you use, whether it be Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla or what-have-you.

    It has the huge benefit of working with IETester, dynamically refreshing each open IE tab.

    Try it out by adding the following to your <head>

    <script type="text/javascript" src="http://livejs.com/live.js"></script>
    
    0 讨论(0)
  • 2020-11-29 18:58

    Firefox has an extension called mozRepl.

    Emacs can plug into this, with moz-reload-on-save-mode.

    when it's set up, saving the file forces a refresh of the browser window.

    0 讨论(0)
  • 2020-11-29 18:58

    You could just place a javascript interval on your page, have it query a local script which checks the last date modified of the css file, and refreshes it if it changed.

    jQuery Example:

    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);
    
    0 讨论(0)
  • 2020-11-29 18:59

    Browsersync can do this from the server side / outside of the browser.

    This can achieve more repeatable results / things that don't require so much clicking.

    This will serve a page and refresh on change

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

    It also allows a scripting mode.

    0 讨论(0)
  • 2020-11-29 19:02

    I would recommend livejs

    But it has following Advantages and Disadvantages

    Advantages:
    1. Easy setup
    2. Works seamlessly on different browsers (Live.js works in Firefox, Chrome, Safari, Opera and IE6+)
    3. Don't add irritating interval for refreshing browser specially when you want to debug along with designing
    4. Only refreshing when you save change ctrl + S
    5. Directly saves CSS etc from firebug I have not used that feature but read on their site http://livejs.com/ that they support it too!!!

    Disadvantages:
    1. It will not work on file protocol file:///C:/Users/Admin/Desktop/livejs/live.html
    2. You need to have server to run it like http://localhost
    3. You have to remove it while deploying on staging/production
    4. Doesn't serves CDN I have tried cheating & applying direct link http://livejs.com/live.js but it will not work you have to download and keep on local to work.

    0 讨论(0)
提交回复
热议问题