当我在Chrome中将更改保存到html文件时自动重载浏览器？

106

我正在Vim中编辑HTML文件，并且希望浏览器在下面的文件发生更改时刷新。

是否有适用于Google Chrome的插件，该插件会在每次将更改保存到文件时侦听文件更改并自动刷新页面？我知道有适用于Firefox的XRefresh，但我根本无法运行XRefresh。

编写脚本自己完成这项工作有多困难？

vim  google-chrome  automation 
— 凯文·伯克
source
2
— 西罗桑蒂利郝海东冠状病六四事件法轮功
在为所有地方的解决方案找了一些时间后，我编写了自己的代码：alexshulzhenko.ru/web-development-autorefresh-page-on-changes
— Tebe
我还编写了自己的代码：Chrome和Firefox的Live Reload：github.com/blaise-io/live-reload#readme。在插件的源文件URL字段中重复主机URL，以对其进行监视。
— 布莱斯
很好的扩展，@ Blaise。但是，为什么至少要有0.5秒的最小装弹时间。为什么不花0.1秒使其响应速度更快？
— 周杰伦
@Jay因为监视并不便宜，所以服务器必须每隔0.1s生成一个响应，并且就需要每隔0.1s生成静态文件的哈希。但是您可以使用开发人员工具编辑表单以允许<0.5s。
— 布莱斯

Answers:

24

我假设您不在OSX上？否则，您可以使用applescript执行以下操作：

http://brettterpstra.com/watch-for-file-changes-and-refresh-your-browser-automatically/

chrome还有一个名为“自动刷新加”的插件，您可以在其中指定每x秒重新加载一次：

https://chrome.google.com/webstore/detail/auto-refresh-plus/oilipfekkmncanaajkapbpancpelijih?hl=zh-CN

— 邮递员
source
23
该插件似乎没有监视本地文件系统，而是会定期刷新。
— Dan Dascalescu 2012年
将浏览器更改为Chrome时出现错误。为了解决这个问题，改变keyword以watch_keyword在以下行：if (URL of atab contains "#{keyword}") then
— 蒂姆·乔伊斯
au！我正在使用您的第一个链接（goo.gl/FZJvdJ）中的脚本以及一些用于Chromium的Dart开发的小模块。奇迹般有效！
— 2014年
2
这是一个很老的问题，但是浏览器同步正是解决这个问题的工具。
— miha
81

纯JavaScript解决方案！

Live.js

只需将以下内容添加到您的<head>：

<script type="text/javascript" src="http://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还是您所需要的。

我从这里几乎逐字复制了此答案，因为我认为它比此处当前接受的答案更容易，更笼统。

— 李凯因斯基
source
5
您可以将其放在顶部，也可以使用python -m SimpleHTTPServer easy peasy
— Marcel Valdez Orozco
2
另一个PHP版本是php -S localhost:8080
— roryok
3
还有python3 -m http.server，还有更多的其他语言/工具。
— carlwgeorge
1
哇，这是一个非常整洁的解决方案。我不得不滚动到很远才能找到它，对此我感到很惊讶。
— Trieu Nguyen
1
@arvixx只要运行本地http服务器（并使用http（s）：//），它就可以处理本地文件。我同意，这不是与file：// uri方案一起使用，如果那是您的意思。请参阅上面的Marcel Valdez Orozco的评论，以获得一种从本地目录即时创建http服务器的简便方法。
— leekaiinthesky
23

Tincr是一个Chrome扩展程序，只要其下的文件发生更改，它就会刷新页面。

— 康斯坦丁·斯皮林
source
4
这个工具很棒。除其他外，您可以刷新页面上的CSS而无需刷新HTML / JS。
— 2014年
看起来很有希望，但我尝试为jekyll项目连接tincr-它只允许我查看单个文件的更改，而不考虑包括，部分或布局的更改
— lfender6445，2015年
3
遗憾的是，Tincr使用的NPAPI已被弃用，默认情况下在Chrome中已禁用（自2015年4月开始）。并将很快将其完全删除（2015年9月）。
— 2015
4
不再可用。
— 珠穆朗玛峰，2016年
2
我没有在exts画廊中找到它，而是发现DevTools Autosave
— Hos Mercury
17

假设您已安装fswatch（brew install fswatch），则适用于OS X的Handy Bash一线软件。它监视任意路径/文件，并在发生更改时刷新活动的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 ://stackoverflow.com/a/13807906/3510611

— 阿特克泰
source
谢谢！这是2017年8月唯一可行的答案！这应该被标记为答案。
— Ujjwal-Nadhani
简单实用
— Pegasus
正是我想要的！谢谢！
— ThisIsFlorianK
15

通过在文档中添加单个meta标记，您可以指示浏览器以指定的时间间隔自动重新加载：

<meta http-equiv="refresh" content="3" >

该meta标记位于文档的head标记内，将指示浏览器每三秒钟刷新一次。

— 阿莱巴格兰
source
这也适用于本地文件。对我来说，这是正确的答案。
— pid
7

使用Gulp观看文件，并使用Browsersync重新加载浏览器。

这些步骤是：

在命令行中执行

npm install --save-dev gulp浏览器同步

创建具有以下内容的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文件中来实现魔术。

— 康斯坦丁·斯皮林
source
2
您将gulpfile.js放在哪里？
— 珠穆朗玛峰
优秀的。正是我想要的。谢谢。
— 杰里米然后
5

我知道这是一个古老的问题，但是如果它可以帮助某人，那么可以使用一个reload npm软件包来解决它。

如果您不在服务器上运行它或收到错误 Live.js doesn't support the file protocol. It needs http.

只需安装：

npm install reload -g

然后在index.html目录中运行：

reload -b

它将启动一个服务器，该服务器将在您每次保存更改时刷新。

万一您在服务器或其他任何设备上运行它，还有许多其他选择。检查参考以获取更多详细信息！

— 阿尔瓦罗
source
3

有一个适用于os x和Chrome的Java应用程序Refreschro。它将监视本地文件系统上的一组给定文件，并在检测到更改时重新加载Chrome：

http://neromi.com/refreschro/

— 用户名
source
1
截至2016年8月29日，这是此处最简单的免费工作选项。谢谢！
— polpetti
不信任对于Mac，请拒绝安装
— Hos Mercury
3

如果您使用的是GNU / Linux，则可以使用名为Falkon的出色浏览器。它基于Qt WebEngine。就像Firefox或Chromium一样-区别在于，它在文件更新时自动刷新页面。无论您使用vim，nano还是atom，vscode，括号，geany，mousepad等，自动刷新都无关紧要。

在Arch Linux上，您可以轻松安装Falkon：

sudo pacman -S falkon

这是快照包。

— 戈斯瓦米
source
2

我有时使用的一种快速解决方案是将屏幕分为两部分，每次进行更改时，单击文档xD。

<script>
document.addEventListener("click", function(){
    window.location.reload();
})
</script>
— 1990年
source
1

在node.js中，您可以将primus.js（websockets）与gulp.js + gulp-watch（分别是任务运行器和更改侦听器）连接起来，以便gulp让您的浏览器窗口知道它应该在html，js时刷新，等等。这与操作系统无关，我可以在本地项目中使用它。

在这里，该页面由Web服务器提供服务，而不是作为文件从磁盘加载，实际上更像是真实的东西。

— 马坦斯特
source
您能否提供指向页面的链接，该页面显示了如何执行此操作，或者为不熟悉node的我们提供了一组更好的命令来运行？
— nu珠穆朗玛峰
1

这对我有用（在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软件包（sudo apt-get install inotify-tools xdotool在Ubuntu中），并将args更改--class为首选浏览器和终端的实际名称。

按照说明启动脚本，然后在浏览器中打开index.html。每次保存在vim中后，脚本将聚焦于浏览器的窗口，刷新它，然后返回到终端。

— 脚本作者
source
没用（我正在尝试自动刷新chrome），特别是xdotool部分正在搜索窗口类Chrome，但是我能够使它工作（即xdotool部分）：xdotool search --name 127.0.0.1 windowactivate key F5在localhost（127.0 ）上工作。当然只有0.1）。现在，我必须将其重新插入脚本。
— Rolf 2015年
1

我找到的最灵活的解决方案是chrome LiveReload扩展与防护服务器配对。

观看项目中的所有文件，或仅观看您指定的文件。这是一个示例Guardfile配置：

guard 'livereload' do
  watch(%r{.*\.(css|js|html|markdown|md|yml)})
end

缺点是您必须针对每个项目进行设置，如果您熟悉ruby，这会有所帮助。

我还使用了Tincr chrome扩展名-但它似乎与框架和文件结构紧密相连。（我尝试为jekyll项目连接tincr，但是它只允许我查看单个文件的更改，而不考虑包括，部分或布局的更改）。但是，Tincr在具有一致且预定义文件结构的项目（如rails）中非常有效。

如果Tincr允许重新加载所有兼容的匹配模式，那将是一个很好的解决方案，但该项目的功能集仍然受到限制。

— lfender6445
source
1

这可以使用简单的python脚本来完成。

  1. 使用pyinotify监视特定的文件夹。
  2. 在启用调试的情况下使用Chrome。可以通过websocket连接进行刷新。

完整的细节可以在这里参考。

— Sakthi Priyan H
source
1

根据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表示将每个s 作为参数传递给的新执行osascript（在此将被忽略）。

— 蒂姆
source
1
这就是我想要的，谢谢！使用tab.title.includes(argv[0])作为条件，我可以匹配网页标题中使用本地服务器的时候，而不是文件，它可以比URL少挑剔，和作品：//。
— David Mirabito
0

安装和设置 chromix

现在添加到您的 .vimrc

autocmd BufWritePost *.html,*.js,*.css :silent ! chromix with http://localhost:4500/ reload

将端口更改为您使用的端口

— 手段
source
0 
(function() {
    setTimeout(function(){
        window.location.reload(true);
    }, 100);
})();

将此代码保存到文件livereload.js中，并将其包含在HTML脚本的底部，如下所示：

<script type="text/javascript" src="livereload.js"></script>

这是每100毫秒刷新一次页面。您对代码所做的任何更改都立即可见。

— 波斯尼亚编码员
source
这不能回答问题。
— 迈克尔·富尔顿
是的，但是我仍然认为它在用户希望不断刷新其HTML文档的情况下很有用。我尊重你的诚实先生。
— 波斯尼亚编码员，
0

好的，这是我粗略的Auto Hotkey解决方案（在Linux上，请尝试Auto Key）。当保存键盘快捷键被按下时，启动浏览器，点击重新加载按钮，再切换回编辑器。我只是讨厌让其他解决方案运行。如果您的编辑器自动保存，将无法正常工作。

^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
— 尼尔斯·林德曼
source
0

使用R的离线解决方案

该代码将：

  • 使用给定的.html文件设置本地服务器
  • 返回服务器地址，以便您可以在浏览器中观看它。

  • 每次将更改保存到.html文件时，使浏览器刷新。

    install.packages("servr")
servr::httw(dir = "c:/users/username/desktop/")

python等也存在类似的解决方案。

— 拉斯姆斯·拉森（Rasmus Larsen）
source
0

将此添加到您的HTML

<script> window.addEventListener('focus', ()=>{document.location = document.location})</script>

在编辑时，浏览器页面变模糊，方法是切换回原处，从而触发焦点事件并重新加载页面。

— 松果类
source
-1 
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”

— 飞马座
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.