如何在文件更改时自动刷新Firefox?

时间:2009-08-28 12:29:52

标签: html css firefox browser

有没有人知道可以监控一个或多个本地文件的Firefox或脚本或其他一些机制的扩展。 Firefox会在检测到文件中的(时间戳)更改时自动刷新或以其他方式更新其画布。

对于编辑CSS,如果只是重新加载CSS而不是完整的HTML重新渲染,那将是理想的。

实际上,只有通过外部文件才能通过动态HTML / CSS编辑实现与Firebug类似的行为。

12 个答案:

答案 0 :(得分:70)

<强> Live.js

来自网站:

  

如何?   只需包含Live.js,它将通过向服务器发送连续的HEAD请求来监控当前页面,包括本地CSS和Javascript。 CSS的更改将动态应用,HTML或Javascript更改将重新加载页面。试试吧!

     

在哪儿?   Live.js适用于Firefox,Chrome,Safari,Opera和IE6 +,直到证明不是这样。 Live.js独立于您使用的开发框架或语言,无论是Ruby,Handcraft,Python,Django,.NET,Java,Php,Drupal,Joomla还是您有什么。

使用IETester,可以动态刷新每个打开的IE标签,这有很大的好处。

通过在<head>

中添加以下内容来试用
<script type="text/javascript" src="http://livejs.com/live.js"></script>

答案 1 :(得分:39)

Auto Reload是Firefox的扩展,用于监控本地文件更改并刷新浏览器:

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

答案 2 :(得分:7)

我建议 livejs

但它具有以下优势缺点

<强>优点:
1.设置简单
2.在不同的浏览器上无缝工作(Live.js适用于Firefox,Chrome,Safari,Opera和IE6 +) 3.当您想要与设计一起调试时,请不要为刷新浏览器添加刺激性间隔 4.仅在保存更改时刷新ctrl + S
5.直接从firebug中保存CSS等我没有使用该功能,但在他们的网站http://livejs.com/上阅读他们也支持它!

<强>缺点:
1.它不适用于文件协议file:///C:/Users/Admin/Desktop/livejs/live.html
2.您需要让服务器像http://localhost一样运行它 3.在登台/生产时部署时必须将其删除 4.不服务 CDN 我曾尝试作弊&amp;应用直接链接http://livejs.com/live.js但是无法下载并继续本地工作。

答案 3 :(得分:6)

Xrefresh与萤火虫。

答案 4 :(得分:5)

看看FileWatcher扩展名: https://addons.mozilla.org/en-US/firefox/addon/filewatcher/

  • 这是一个WebExtension,因此可与最新的Firefox一起使用
  • 它具有一个本机应用程序(将在本地安装),该应用程序使用本机OS调用监视观看的文件中的更改(无轮询!),并通知WebExtension以重新加载网页
  • 重新加载由规则驱动:规则包含页面URL(具有正则表达式支持)及其包含/排除的本地源文件
  • 开源:https://github.com/coolsoft-ita/filewatcher

免责声明:我是扩展程序的作者;)

答案 5 :(得分:4)

您可以在页面上放置一个javascript间隔,让它查询本地脚本,该脚本检查css文件的最后修改日期,如果更改则刷新它。

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

答案 6 :(得分:4)

Firefox有一个名为mozRepl的扩展程序。

Emacs可以使用moz-reload-on-save-mode插入此功能。

设置时,保存文件会强制刷新浏览器窗口。

答案 7 :(得分:3)

有一些IDE包含此功能(它们内部有一个窗格或其他一些方法可以在保存时自动刷新页面)。

如果您想自己快速做到这一点,请将页面上的meta refresh设置为较低的值 - 一到两秒。

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

答案 8 :(得分:1)

Browsersync可以从浏览器的服务器端/外部执行此操作。

这可以获得更多可重复的结果/不需要点击的东西。

这将提供页面并在更改时刷新

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

它还允许脚本模式。

答案 9 :(得分:1)

您可以将live.jstampermonkey脚本一起使用,以避免在HTML文件中包含https://livejs.com/live.js

// ==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);
    }
})();

使用此tampermonkey脚本,live.js脚本将自动插入地址与http://127.0.0.1:8000/*匹配的页面。您可以根据需要更改端口。

答案 10 :(得分:0)

我认为您可以在确定的间隔后使用一些ajax请求来解决它。您可以对CSS文件发出请求,然后如果您没有获得“未修改”标题,则删除您的CSS并再次加载它。对于动态文件,您执行请求并存储响应,然后每次向该文件发出请求时,都会将响应与最新响应进行比较。

答案 11 :(得分:0)

这当然是hacky,但是如果您想在不发出任何外部请求的情况下在本地工作(例如向 live.js),或者运行任何本地服务器,我认为这可能是有用。这并非特定于 Web 开发,您可以对任何其他工作流程采用类似的策略。

您将需要两个小工具(几乎在所有发行版存储库中都有):inotify-toolsxdotool

首先使用 ID 获取 Firefox 的 xdotool 和编辑器窗口。

$ xdotool search --name "Mozilla Firefox"
60817411
60817836
$ xdotool search --name "Pluma"  # Pluma is my editor
94371842

根据运行的进程数,您将获得一个或多个窗口 ID。使用 xdotool windowactivate <ID> 来了解您想要哪个(焦点更改到相应的窗口)。

使用 inotifywait -e close_write 监视对本地文件的更改,当您使用编辑器保存文件时,将焦点更改为浏览器,重新加载 xdotool key CTRL+R 并将焦点返回到编辑器。 这太瞬间了,你什么都不会注意到。

此外,inotifywait 在更改时退出,因此您可能必须在循环中执行此操作。这是一个最小的工作示例(在您的工作目录中的 Bash 中)。

while /usr/bin/true
do
    inotifywait -e close_write index.html;
    xdotool windowactivate 60917411;  # Switch to Firefox
    xdotool key CTRL+R;               # Reload Firefox
    xdotool windowactivate 94371842   # Switch back to Pluma
done
  • 您可以使用 inotifywait 来监视整个目录或目录中的某些选定文件。
  • 您可以编写一个可以轻松实现自动化的脚本。
  • 这适用于 Linux(我已经在 Void Linux 上测试过。)