当我在 Chrome 中保存对 html 文件的更改时自动重新加载浏览器？
Posted
技术标签:
【中文标题】当我在 Chrome 中保存对 html 文件的更改时自动重新加载浏览器？【英文标题】：Auto-reload browser when I save changes to html file, in Chrome? 【发布时间】：2011-08-01 02:42:44 【问题描述】：我正在 Vim 中编辑一个 html 文件，我希望浏览器在下面的文件更改时刷新。
是否有用于 Google Chrome 的插件来监听文件的更改并在我每次保存对文件的更改时自动刷新页面？我知道 Firefox 有 XRefresh，但我根本无法运行 XRefresh。
自己编写一个脚本来做这件事有多难？
【问题讨论】：
对于火狐：***.com/questions/1346716/… 在寻找了一些时间来寻找无处不在的解决方案后，我编写了自己的代码：alexshulzhenko.ru/web-development-autorefresh-page-on-changes 我也编写了自己的代码：Chrome 和 Firefox 的 Live Reload：github.com/blaise-io/live-reload#readme。在插件的源文件 URL 字段中重复主机 URL 以监控自身。 伟大的扩展，@Blaise。但是为什么重新加载最少需要 0.5 秒。为什么不用 0.1 秒让它更灵敏呢？ @Jay 因为监控并不便宜，您的服务器必须每 0.1 秒生成一个响应，并且它需要每 0.1 秒生成一个静态文件的哈希值。但是您可能可以使用开发人员工具编辑表单以允许 【参考方案1】：我假设您不在 OSX 上？否则你可以用applescript做这样的事情：
http://brettterpstra.com/watch-for-file-changes-and-refresh-your-browser-automatically/
还有一个名为“auto refresh plus”的 chrome 插件，您可以在其中指定每 x 秒重新加载一次：
https://chrome.google.com/webstore/detail/auto-refresh-plus/oilipfekkmncanaajkapbpancpelijih?hl=en
【讨论】：
该插件似乎不监视本地文件系统，而是定期刷新。 将浏览器更改为 chrome 时出现错误。要修复它，请将以下行中的keyword 更改为 watch_keyword：if (URL of atab contains "#keyword") then
哇！我正在使用您的第一个链接 (goo.gl/FZJvdJ) 中的脚本和一些用于 Dart-Development with Chromium 的小模块。像魅力一样工作！
这是一个相当古老的问题，但browser-sync 正是解决这个问题的工具。【参考方案2】：
http://livereload.com/ - 适用于 OS X 的本机应用程序，适用于 Windows 的 Alpha 版本。开源于https://github.com/livereload/LiveReload2
【讨论】：
很酷，但是 10 美元？真的吗？是的。 @a 付费书呆子，如果可行的话似乎是合理的。另外，来源就在那儿，所以在购买之前先尝试一下。 我还创建了一个免费的 Live Reload（意外名称冲突）浏览器插件，它可以免费做同样的事情：github.com/blaise-io/live-reload#readme【参考方案3】：有一个用于 os x 和 Chrome 的 Java 应用程序，名为 Refreschro。它将监视本地文件系统上的一组给定文件，并在检测到更改时重新加载 Chrome：
http://neromi.com/refreschro/
【讨论】：
截至 2016 年 8 月 29 日，这是这里最简单的免费工作选项。谢谢！ 不信任 对于mac，拒绝安装【参考方案4】：更新：Tincr 已死。
Tincr 是一个 Chrome 扩展程序，只要下面的文件发生更改，它就会刷新页面。
【讨论】：
这个工具很棒。除此之外，您可以在不刷新 HTML/JS 的情况下刷新页面上的 CSS。 看起来很有希望，但我尝试为 jekyll 项目连接 tincr - 它只允许我查看单个文件的更改，而不考虑包含、部分或布局更改 不幸的是，Tincr 使用已弃用的 NPAPI，默认情况下在 Chrome 中已禁用（自 2015 年 4 月起）。并且很快将被完全删除（2015 年 9 月）。 不再可用。 我在 exts 的图库中没有找到，但是发现 DevTools 自动保存【参考方案5】：在 node.js 中，您可以将 primus.js (websockets) 与 gulp.js + gulp-watch（分别是任务运行器和更改侦听器）连接起来，以便 gulp 让您的浏览器窗口知道它应该随时刷新html，js等，改变。这与操作系统无关，我让它在本地项目中工作。
在这里，页面由您的网络服务器提供服务，而不是作为文件从磁盘加载，这实际上更像是真实的。
【讨论】：
您能否提供一个指向页面的链接，该页面显示如何执行此操作，或者为我们这些不熟悉节点的人提供一组更好的命令来运行？【参考方案6】：我发现最灵活的解决方案是chrome LiveReload extension 与guard server 配对。
查看项目中的所有文件，或仅查看您指定的文件。这是一个示例 Guardfile 配置：
guard 'livereload' do
watch(%r.*\.(css|js|html|markdown|md|yml))
end
缺点是您必须为每个项目设置它，如果您熟悉 ruby，它会有所帮助。
我也使用了 Tincr chrome 扩展 - 但它似乎与框架和文件结构紧密耦合。 （我尝试为 jekyll 项目连接 tincr，但它只允许我查看单个文件的更改，而不考虑包含、部分或布局更改）。然而，Tincr 与具有一致和预定义文件结构的项目（如 rails）开箱即用效果很好。
如果 Tincr 允许重新加载所有包容性匹配模式，那将是一个很好的解决方案，但该项目的功能集仍然有限。
【讨论】：
【参考方案7】：这对我有用（在 Ubuntu 中）：
#!/bin/bash
#
# Watches the folder or files passed as arguments to the script and when it
# detects a change it automatically refreshes the current selected Chrome tab or
# window.
#
# Usage:
# ./chrome-refresher.sh /folder/to/watch
TIME_FORMAT='%F %H:%M'
OUTPUT_FORMAT='%T Event(s): %e fired for file: %w. Refreshing.'
while inotifywait --exclude '.+\.swp$' -e modify -q \
-r --timefmt "$TIME_FORMAT" --format "$OUTPUT_FORMAT" "$@"; do
xdotool search --onlyvisible --class chromium windowactivate --sync key F5 \
search --onlyvisible --class gnome-terminal windowactivate
done
您可能需要安装 inotify 和 xdotool 软件包（在 Ubuntu 中为 sudo apt-get install inotify-tools xdotool）并将 --class 的参数更改为您首选浏览器的实际名称和终端。
按照描述启动脚本，然后在浏览器中打开 index.html。每次在 vim 中保存后，脚本都会聚焦您的浏览器窗口，刷新它，然后返回终端。
【讨论】：
没有用（我正在尝试自动刷新 chrome），特别是搜索窗口类 chromium 的 xdotool 部分，但我能够让它工作（即 xdotool 部分） ：xdotool search --name 127.0.0.1 windowactivate key F5 仅用于在 localhost (127.0.0.1) 上工作，当然。现在我必须将它重新插入到脚本中。【参考方案8】：
纯 JavaScript 解决方案！
Live.js
只需将以下内容添加到您的<head>：
<script type="text/javascript" src="https://livejs.com/live.js"></script>
怎么样？ 只需包含 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 还是您所拥有的。
我从here 几乎逐字复制了这个答案，因为我认为它比这里当前接受的答案更容易、更通用。
【讨论】：
你可以把它放在顶部，也可以使用 python -m SimpleHTTPServer easy peasy 另一种 PHP 版本是php -S localhost:8080
还有python3 -m http.server，还有many more for other languages/tools。
哇，这是一个非常巧妙的解决方案。我很惊讶我必须滚动这么远才能找到它。
@arvixx 它确实适用于本地文件，只要您运行本地 http 服务器（并使用 http(s)://）。我同意它不适用于 file:// uri 方案，如果这就是你的意思。请参阅上面 Marcel Valdez Orozco 的评论，了解一种从本地目录即时创建 http 服务器的简单方法。【参考方案9】：
通过在文档中添加单个元标记，您可以指示浏览器以提供的时间间隔自动重新加载：
<meta http-equiv="refresh" content="3" >
放置在文档的 head 标记中，此元标记将指示浏览器每三秒刷新一次。
【讨论】：
这也适用于本地文件。对我来说，这是正确的答案。 这适用于快速原型设计；但是，由于计划刷新（而不是响应保存事件），因此使用 Chrome DevTools 的能力受到限制。【参考方案10】：这可以使用一个简单的 python 脚本来完成。
-
使用pyinotify 监控特定文件夹。
在启用调试的情况下使用 Chrome。可以通过 websocket 连接完成刷新。
详情可参考here。
【讨论】：
【参考方案11】：安装和设置chromix
现在将此添加到您的.vimrc
autocmd BufWritePost *.html,*.js,*.css :silent ! chromix with http://localhost:4500/ reload
将端口更改为您使用的端口
【讨论】：
【参考方案12】：使用Gulp 观看文件并使用Browsersync 重新加载浏览器。
步骤如下：
在命令行中执行
npm install --save-dev gulp browser-sync
使用以下内容创建 gulpfile.js：
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('serve', function()
browserSync.init(
server:
baseDir: "./"
);
gulp.watch("*.html").on("change", reload);
);
运行
一饮而尽
编辑 HTML，保存并查看您的浏览器重新加载。魔术是通过在您的 HTML 文件中即时注入特殊标签来完成的。
【讨论】：
你把 gulpfile.js 放在哪里了？ 优秀。正是我想要的。谢谢。【参考方案13】：Handy Bash one-liner for OS X，假设你已经安装了 fswatch (brew install fswatch)。它监视任意路径/文件并在发生更改时刷新活动的 Chrome 选项卡：
fswatch -o ~/path/to/watch | xargs -n1 -I osascript -e 'tell application "Google Chrome" to tell the active tab of its first window to reload'
在此处查看有关 fswatch 的更多信息：https://***.com/a/13807906/3510611
【讨论】：
谢谢！这是 2017 年 8 月唯一有效的答案！这应该被标记为答案。 简单实用 正是我想要的！谢谢！【参考方案14】：基于 attekei 对 OSX 的回答：
$ brew install fswatch
将所有这些都放入reload.scpt：
function run(argv)
if (argv.length < 1)
console.log("Please supply a (partial) URL to reload");
return;
console.log("Trying to reload: " + argv[0]);
let a = Application("Google Chrome");
for (let i = 0; i < a.windows.length; i++)
let win = a.windows[i];
for (let j = 0; j < win.tabs.length; j++)
let tab = win.tabs[j];
if (tab.url().startsWith("file://") && tab.url().endsWith(argv[0]))
console.log("Reloading URL: " + tab.url());
tab.reload();
return;
console.log("Tab not found.");
这将重新加载它找到的第一个以file:// 开头并以第一个命令行参数结尾的选项卡。您可以根据需要对其进行调整。
最后，做这样的事情。
fswatch -o ~/path/to/watch | xargs -n1 osascript -l JavaScript reload.scpt myindex.html
fswatch -o 输出每个更改事件中已更改的文件数，每行一个。通常它只会打印1。 xargs 读取那些 1s 和 -n1 意味着它将每个作为参数传递给 osascript 的新执行（它将被忽略）。
【讨论】：
这就是我要找的，谢谢！使用tab.title.includes(argv[0]) 作为条件，我可以匹配页面标题，它比 URL 更不挑剔，并且在使用本地服务器而不是 file:// 时工作。【参考方案15】：
pip install https://github.com/joh/when-changed/archive/master.zip
alias watch_refresh_chrome=" when-changed -v -r -1 -s ./ osascript -e 'tell application \"Google Chrome\" to tell the active tab of its first window to reload' "
然后进入你要监控的目录执行“watch_refresh_chrome”
【讨论】：
【参考方案16】：(function()
setTimeout(function()
window.location.reload(true);
, 100);
)();
将此代码保存到文件 livereload.js 中，并将其包含在 HTML 脚本的底部，如下所示：
<script type="text/javascript" src="livereload.js"></script>
这样做的目的是每 100 毫秒刷新一次页面。您对代码所做的任何更改都立即可见。
【讨论】：
这不能回答问题。 是的，但我仍然认为它在用户想要不断刷新他的 HTML 文档的情况下很有用。先生，我尊重你的诚实。【参考方案17】：我有时使用的一个快速解决方案是将屏幕划分为 二、每次修改，点击文档xD。
<script>
document.addEventListener("click", function()
window.location.reload();
)
</script>
【讨论】：
【参考方案18】：好的，这是我粗略的Auto Hotkey 解决方案（在 Linux 上，尝试Auto Key）。当按下 save 键盘快捷键时，激活浏览器，单击 reload 按钮，然后切换回编辑器。我只是厌倦了让其他解决方案运行。如果您的编辑器自动保存，则无法正常工作。
^s:: ; '^' means ctrl key. '!' is alt, '+' is shift. Can be combined.
MouseGetPos x,y
Send ^s
; if your IDE is not that fast with saving, increase.
Sleep 100
; Activate the browser. This may differ on your system. Can be found with AHK Window Spy.
WinActivate ahk_class Chrome_WidgetWin_1
WinWaitActive ahk_class Chrome_WidgetWin_1
Sleep 100 ; better safe than sorry.
;~ Send ^F5 ; I dont know why this doesnt work ...
Click 92,62 ; ... so lets click the reload button instead.
; Switch back to Editor. Can be found with AHK Window Spy.
WinActivate ahk_class zc-frame
WinWaitActive ahk_class zc-frame
Sleep 100 ; better safe than sorry.
MouseMove x,y
return
【讨论】：
【参考方案19】：我知道这是一个老问题，但如果它对某人有帮助，有一个 reload npm 包可以解决它。
如果您没有在服务器上运行它或收到错误Live.js doesn't support the file protocol. It needs http.
只需安装它：
npm install reload -g
然后在您的 index.html 目录中运行：
reload -b
它将启动一个服务器，每次保存更改时都会刷新。
如果您在服务器或其他任何设备上运行它，还有许多其他选项。查看参考资料了解更多详情！
【讨论】：
完美解决方案 这个很完美。谢谢 非常适合我【参考方案20】：如果您使用的是 GNU/Linux，则可以使用一个非常酷的浏览器，名为 Falkon。它基于Qt WebEngine。它就像 Firefox 或 Chromium - 除了，它会在文件更新时自动刷新页面。无论您使用 vim、nano 还是 atom、vscode、括号、geany、鼠标垫等，自动刷新都无关紧要。
在 Arch Linux 上，您可以非常轻松地安装 Falkon：
sudo pacman -S falkon
Here's snap 包。
【讨论】：
【参考方案21】：使用 R 的离线解决方案
此代码将：
使用给定的 .html 文件设置本地服务器 返回服务器地址，以便您在浏览器中观看。每次将更改保存到 .html 文件时让浏览器刷新。
install.packages("servr") servr::httw(dir = "c:/users/username/desktop/")
python 等也存在类似的解决方案。
【讨论】：
【参考方案22】：将此添加到您的 HTML
<script> window.addEventListener('focus', ()=>document.location = document.location)</script>
在您编辑时，您的浏览器页面会变得模糊，通过切换回查看它，会触发焦点事件并重新加载页面。
【讨论】：
【参考方案23】：如果您的计算机上安装了 Node，那么您可以使用 light-server。
Setp 1： 使用命令 npm install -g light-server 安装 light-server
第2步：当前工作目录是包含静态HTML页面的文件夹，使用命令npx light-server -s . -p 5000 -w "*.css # # reloadcss" -w "*.html # # reloadhtml" -w "*.js # # reloadhtml"启动light-server
第 3 步： 在浏览器中打开网页 http://localhost:5000
在第 2 步中，
可以使用 -p 开关更改端口
可以使用 -w 开关更改正在监视的文件
可以使用 -s 开关更改服务器目录
轻服务器的文档位于 https://www.npmjs.com/package/light-server
【讨论】：
【参考方案24】：如果您正在使用 Visual Studio 代码（我强烈推荐用于 Web 开发），Ritwick Dey 有一个名为 Live Server 的扩展，下载量超过 900 万。安装就行（建议重启vs code之后），然后右击你的主HTML文件，会有一个“用Live Server打开”的选项，点击它，你的网站会自动在浏览器中打开本地服务器。
【讨论】：
【参考方案25】：将此添加到您的“头部”部分。 将时间从 3000 毫秒更改为您喜欢的任何值。 每 3 秒重新加载 html 文件的小技巧。当我使用 vim + 浏览器设置进行 JS 开发时，这对我很有用。
<script>
function autoreload()
location.reload();
setInterval(autoreload, 3000);
</script>
【讨论】：
【参考方案26】：以下几行可以解决问题：
var bfr = '';
setInterval(function ()
fetch(window.location).then((response) =>
return response.text();
).then(r =>
if (bfr != '' && bfr != r)
window.location.reload();
else
bfr = r;
);
, 1000);
这会在每秒后将当前响应文本与先前缓冲的响应文本进行比较，如果源代码有任何更改，将重新加载页面。如果您只是在开发轻量级页面，则不需要任何重型插件。
【讨论】：
【参考方案27】：实时重新加载适用于 js 和 css 更改。但是它不适用于 laravel 的刀片模板。所以我写了一个小脚本来检查页面的变化，如果有变化就重新加载。 我不确定这是否是最好的方法，但它确实有效。 我将脚本与 Live.js 一起使用。
在这里。
window.addEventListener("load", function()
var current_url = window.location.href;
var current_data = httpGet(current_url);
var compone = current_data.length;
setInterval(function()
var current_data_twos = httpGet(current_url);
var componecurrent_data_twos = current_data_twos.length;
if(compone !=componecurrent_data_twos )
location.reload();
, 1000);
);
function httpGet(theUrl)
let xmlhttp;
if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
else // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
if (xmlhttp.readyState==4 && xmlhttp.status==200)
return xmlhttp.responseText;
xmlhttp.open("GET", theUrl, false);
xmlhttp.send();
return xmlhttp.response;
【讨论】：
以上是关于当我在 Chrome 中保存对 html 文件的更改时自动重新加载浏览器？的主要内容，如果未能解决你的问题，请参考以下文章
为啥 Visual Studio 不将我的更改应用于 HTML 文件？
当我在 Chrome 中单击检查时，如何让 Beautiful soup html 解析器与显示的代码相同？