【发布时间】：2010-11-23 17:17:39
【问题描述】：
有谁知道可以监控一个或多个本地文件的 Firefox 扩展、脚本或其他机制。当 Firefox 检测到文件中的（时间戳）更改时，它会自动刷新或以其他方式更新其画布。
对于编辑 CSS，最好只重新加载 CSS，而不是重新渲染完整的 HTML。
实际上，它可以通过动态 HTML/CSS 编辑实现与 Firebug 类似的行为，仅通过外部文件。
【问题讨论】：
【发布时间】：2010-11-23 17:17:39
【问题描述】：
来自网站：
怎么样？ 只需包含 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 有一个简单的解决方法。 -
为什么我花了这么长时间才得到这个答案！！
看看 FileWatcher 扩展： https://addons.mozilla.org/en-US/firefox/addon/filewatcher/
- 它是一个 WebExtension，因此它适用于最新的 Firefox
- 它有一个本机应用程序（将安装在本地），使用本机操作系统调用（无轮询！）监视监视文件的更改，并通知 WebExtension 让它重新加载网页
- 重新加载由规则驱动：规则包含页面 URL（支持正则表达式）及其包含/排除的本地源文件
- 开源：https://github.com/coolsoft-ita/filewatcher
免责声明：我是扩展程序的作者；）
【讨论】：
我会推荐 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 标头似乎都不会在文件更新时发生变化:-(
Xrefresh 与萤火虫。
【讨论】：
-
有没有偶然的 linux 替代品？
-
它已被 LiveReload 取代，这是 Mac 的共享软件：10 美元。不知道其他平台是否免费。我正在使用另一条评论建议的免费Auto Reload。
Firefox 有一个名为 mozRepl 的扩展。
Emacs 可以通过 moz-reload-on-save-mode 插入。
设置完成后，保存文件会强制刷新浏览器窗口。
【讨论】：
-
对于 Vim，它在以下位置被提及：vim.wikia.com/wiki/…
有一些 IDE 包含此功能（它们将有一个窗格或其他一些在保存时自动刷新页面的方法）。
如果您想自己执行此操作，一个快速的技巧是将页面上的meta refresh 设置为较低的值 - 1 或 2 秒。
# Will refresh the page content every second
<meta http-equiv="refresh" content="1" />
【讨论】：
-
如果我没记错的话，如果页面有滚动条，这会导致页面跳转。
您可以在您的页面上放置一个 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
Browsersync 可以从服务器端/浏览器外部执行此操作。
这可以实现更多可重复的结果/不需要太多点击的事情。
这将提供一个页面并在更改时刷新
cd static_content
browser-sync start --server --files .
它还允许脚本模式。
【讨论】：
您可以将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/* 匹配的页面。您可以根据需要更改端口。
【讨论】：
-
这看起来是最直接的答案。但是，将它添加到我的烧瓶应用程序会导致多个调用被发送到后端，这些调用错误表明函数没有返回有效响应。我会假设脚本想要传递给后端的东西来工作。
这当然是 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 <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 上测试过。）
【讨论】：
我认为您可以通过在确定的时间间隔后使用一些 ajax 请求来解决它。您可以向 CSS 文件发出请求，然后如果您没有获得“未修改”标头，则删除您的 CSS 并再次加载它。对于动态文件，您发出请求并存储响应，然后每次向该文件发出请求时，您都会将响应与最新的响应进行比较。
【讨论】：