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

Posted

技术标签:

【中文标题】如何让 Firefox 在文件更改时自动刷新？【英文标题】：How do I make Firefox auto-refresh on file change? 【发布时间】：2010-11-23 17:17:39 【问题描述】：

有谁知道可以监控一个或多个本地文件的 Firefox 扩展、脚本或其他机制。当 Firefox 检测到文件中的（时间戳）更改时，它会自动刷新或以其他方式更新其画布。

对于编辑 CSS，最好只重新加载 CSS，而不是重新渲染完整的 html。

实际上，它可以通过动态 HTML/CSS 编辑实现与 Firebug 类似的行为，仅通过外部文件。

【问题讨论】：

【参考方案1】：

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>

【讨论】：

这是我一直在寻找很长一段时间的东西，效果很好！！！它检测页面的更改和保存并立即重新加载页面，这为我节省了大量的时间，而不必在每次进行更改时重新加载页面！非常感谢分享！ 哇，谢谢！同样对于所有将使用它的人，请注意，Live.js doesn't support the file protocol. It needs http. 我没用，所以我写了 php 脚本和 js 脚本。 JS 脚本每隔 N 秒向 php 脚本发出请求，并且 php 脚本检查文件是否被更改。如果他们这样做了，请让 js 知道该页面应该被刷新。您可以指定要观看的扩展名和目录。您只需将两个文件放入您的项目中即可。您的系统中没有依赖项，也没有第三方软件。更多详情：alexshulzhenko.ru/web-development-autorefresh-page-on-changes @antongorodezkiy 确实如此，但是通过从python -m SimpleHTTPServer 中加载 HTML 有一个简单的解决方法。 为什么我花了这么长时间才得到这个答案！！【参考方案2】：

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

它是一个 WebExtension，因此它适用于最新的 Firefox 它有一个本机应用程序（将安装在本地），使用本机操作系统调用（无轮询！）监视监视文件的更改，并通知 WebExtension 让它重新加载网页 重新加载由规则驱动：规则包含页面 URL（支持正则表达式）及其包含/排除的本地源文件 开源：https://github.com/coolsoft-ita/filewatcher

免责声明：我是扩展程序的作者；）

【讨论】：

【参考方案3】：

我会推荐 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 我试过作弊并应用直接链接http://livejs.com/live.js 但它不起作用，你必须下载并保持在本地才能工作。

【讨论】：

缺点 #1 和 #2 对我来说还可以。 #3 可以通过条件包含服务器端轻松解决（例如，仅当 domain=localhost 时才包含）。但比这些更糟糕的是：我无法在我的本地 EasyPhp 开发安装上运行它：ETag 和 Last-Modified 标头似乎都不会在文件更新时发生变化:-(【参考方案4】：

Xrefresh 与萤火虫。

【讨论】：

有没有偶然的 linux 替代品？ 它已被 LiveReload 取代，这是 Mac 的共享软件：10 美元。不知道其他平台是否免费。我正在使用另一条评论建议的免费Auto Reload。【参考方案5】：

Firefox 有一个名为 mozRepl 的扩展。

Emacs 可以通过 moz-reload-on-save-mode 插入。

设置完成后，保存文件会强制刷新浏览器窗口。

【讨论】：

对于 Vim，它在以下位置被提及：vim.wikia.com/wiki/…【参考方案6】：

有一些 IDE 包含此功能（它们将有一个窗格或其他一些在保存时自动刷新页面的方法）。

如果您想自己执行此操作，一个快速的技巧是将页面上的meta refresh 设置为较低的值 - 1 或 2 秒。 

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

【讨论】：

如果我没记错的话，如果页面有滚动条，这会导致页面跳转。【参考方案7】：

您可以在您的页面上放置一个 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);

【讨论】：

是的，当然可以。虽然它需要在页面上加载 jQuery。 @CharlesRoper 这是您要查找的书签：pagereboot.com【参考方案8】：

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

这可以实现更多可重复的结果/不需要太多点击的事情。

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

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

它还允许脚本模式。

【讨论】：

【参考方案9】：

您可以将live.js 与tampermonkey 脚本一起使用，以避免在您的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】：

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

您将需要两个小工具（几乎所有分发存储库中都有）：inotify-tools 和 xdotool。

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

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

根据运行的进程数量，您将获得一个或多个窗口ID。使用xdotool windowactivate &lt;ID&gt; 知道您想要哪一个（焦点更改为相应的窗口）。

使用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 上测试过。）

【讨论】：

【参考方案11】：

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

【讨论】：

以上是关于如何让 Firefox 在文件更改时自动刷新？的主要内容，如果未能解决你的问题，请参考以下文章

当我在 Chrome 中保存对 html 文件的更改时自动重新加载浏览器？

如何让访问网站时页面自动刷新两次？

当其 ItemsSource 更改时自动刷新 Datagrid

Rails：视图（和相关）文件更改时自动刷新浏览器

文件更改时如何自动重新加载Django？

iOS：如何在其附件视图更改时触发 tableViewCell 的约束/自动布局刷新？