Автоматически перезагружать браузер при сохранении изменений в html-файле в Chrome?

110

Я редактирую HTML-файл в Vim, и я хочу, чтобы браузер обновлялся при каждом изменении файла под ним.

Есть ли плагин для Google Chrome, который будет отслеживать изменения в файле и автоматически обновлять страницу каждый раз, когда я сохраняю изменение в файле? Я знаю, что для Firefox есть XRefresh, но мне вообще не удалось запустить XRefresh.

Насколько сложно было бы самому написать сценарий для этого?

vim google-chrome automation Кевин Берк
источник
2
Для Firefox: stackoverflow.com/questions/1346716/…
Ciro Santilli 郝海东 冠状 病 六四 法轮功
Потратив
Тебе,
Я также кодирую свой собственный: Live Reload для Chrome и Firefox: github.com/blaise-io/live-reload#readme . Повторите URL-адрес хоста в поле URL-адреса исходного файла надстройки, чтобы контролировать себя.
Blaise
Отличное расширение, @Blaise. Но почему на перезагрузку минимум 0,5 секунды? Почему бы не 0,1 секунды, чтобы сделать его более отзывчивым?
Джей
@Jay Поскольку мониторинг обходится недешево, вашему серверу придется генерировать ответ каждые 0,1 с, и ему нужно будет генерировать хэш статического файла каждые 0,1 с. Но вы, вероятно, можете отредактировать форму с помощью инструментов разработчика, чтобы разрешить <0,5 с.
Блез

Ответы:

22

Я полагаю, вы не используете 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=en

молочный почтальон
источник
24
Этот плагин, похоже, не отслеживает локальную файловую систему, а просто периодически обновляется.
Дэн Даскалеску
Я получал ошибки при смене браузера на Chrome. Чтобы исправить это, измените значение keywordна watch_keywordв следующей строке:if (URL of atab contains "#{keyword}") then
Тим Джойс
Вау! Я использую сценарий из вашей первой ссылки ( goo.gl/FZJvdJ ) с небольшими модами для Dart-Development с Chromium. Работает как шарм!
Майк Миттерер,
2
Это довольно старый вопрос, но именно для этого подойдет синхронизация браузера .
miha
82

Решение на чистом JavaScript!

Live.js

Просто добавьте в свой <head>:

<script type="text/javascript" src="http://livejs.com/live.js"></script>

Как? Просто включите Live.js, и он будет отслеживать текущую страницу, включая локальные CSS и Javascript, отправляя последовательные запросы HEAD на сервер. Изменения CSS будут применяться динамически, а изменения HTML или Javascript перезагрузят страницу. Попытайся!

Куда? Live.js работает в Firefox, Chrome, Safari, Opera и IE6 +, пока не будет доказано обратное. Live.js не зависит от среды разработки или языка, который вы используете, будь то Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla или что-нибудь еще.

Я скопировал этот ответ почти дословно отсюда , потому что я думаю, что он проще и более общий, чем принятый в настоящее время ответ здесь.

лук-порей
источник
6
Вы можете поместить это вверху, а также использовать python -m SimpleHTTPServer easy peasy
Марсель Вальдес Ороско
3
Альтернативная версия PHPphp -S localhost:8080
roryok
4
Есть также python3 -m http.serverи многие другие для других языков / инструментов .
carlwgeorge
2
Вау, это очень изящное решение. Я удивлен, что мне приходится пролистывать так далеко, чтобы найти его.
Trieu Nguyen
1
@arvixx Он действительно работает с локальными файлами, если вы используете локальный http-сервер (и используете http (s): //). Я согласен, что это не работает со схемой file: // uri, если вы это имеете в виду. См. Комментарий Марселя Вальдеса Ороско выше, чтобы узнать об одном простом способе мгновенного создания http-сервера из вашего локального каталога.
leekaiinthesky
24

Обновление : Tincr мертв.

Tincr - это расширение Chrome, которое обновляет страницу всякий раз, когда файл под ней изменяется.

Константин Спирин
источник
4
Этот инструмент потрясающий. Помимо прочего, вы можете обновлять CSS на странице без обновления HTML / JS.
Mud
выглядит многообещающе, но я попытался подключить tincr для проекта jekyll - это позволило мне увидеть изменения только в одном файле, без учета
включений
3
К сожалению, Tincr использует NPAPI, который устарел и по умолчанию отключен в Chrome (с апреля 2015 года). И вскоре он будет полностью удален (сентябрь 2015 г.).
Ян Вчелак
4
Больше недоступно.
nu everest 03
2
Я не нашел его в галерее exts, но обнаружил, что DevTools Autosave
Hos Mercury
18

Handy Bash однострочный для 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://stackoverflow.com/a/13807906/3510611

Аттекей
источник
Спасибо! это единственный ответ, который работает в августе 2017 года! Это должно быть отмечено как ответ.
Ujjwal-Nadhani
простой и полезный
Pegasus
Именно то, что я искал! Спасибо!
ThisIsFlorianK
15

Добавив в документ один метатег, вы можете указать браузеру автоматически перезагружаться с заданным интервалом:

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

Помещенный в тег заголовка вашего документа, этот метатег будет указывать браузеру на обновление каждые три секунды.

Алебагран
источник
это также работает с локальными файлами. Для меня это правильный ответ.
pid
10

http://livereload.com/ - родное приложение для OS X, альфа-версия для Windows. Открытый исходный код https://github.com/livereload/LiveReload2

Джибин
источник
2
Круто, а 10 долларов? В самом деле? Ага.
оплачиваемый ботаник
@ платный ботаник, кажется разумным, если это работает. К тому же источник здесь, так что попробуйте перед покупкой.
Марк Фокс
1
Также есть бесплатный надстройка браузера Live Reload (случайное столкновение имен), которое я создал, который делает то же самое бесплатно: github.com/blaise-io/live-reload#readme
Blaise
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-файлы на лету.

Константин Спирин
источник
3
Куда вы кладете gulpfile.js?
nu everest 03
Превосходно. Именно то, что я искал. Спасибо.
Джереми Тогда
6

Я знаю, что это старый вопрос, но если он кому-то поможет, есть перезагрузка пакет npm, который его решает.

Если вы не запускаете его на сервере или получили сообщение об ошибке Live.js doesn't support the file protocol. It needs http.

Просто установите его:

npm install reload -g

а затем в каталоге index.html запустите:

reload -b

Он запустит сервер, который будет обновляться каждый раз, когда вы сохраните изменения.

Есть много других вариантов, если вы запускаете его на сервере или где-то еще. Проверьте ссылку для получения более подробной информации!

Альваро
источник
3

Для OS X и Chrome существует Java-приложение Refreschro. Он будет отслеживать данный набор файлов в локальной файловой системе и перезагружать Chrome при обнаружении изменений:

http://neromi.com/refreschro/

user2511839
источник
1
по состоянию на 29 августа 2016 года это самый простой бесплатный рабочий вариант. Спасибо!
polpetti
Не доверяет Для Mac, откажитесь от установки
Hos Mercury
3

Если вы работаете в GNU / Linux, вы можете использовать довольно крутой браузер под названием Falkon . Он основан на Qt WebEngine . Это похоже на Firefox или Chromium, за исключением того, что он автоматически обновляет страницу при обновлении файла. Автоматическое обновление не имеет большого значения, используете ли вы vim, nano или atom, vscode, скобки, geany, коврик для мыши и т. Д.

В Arch Linux вы можете довольно легко установить Falkon:

sudo pacman -S falkon

Вот пакет оснастки.

С.Госвами
источник
2

Быстрое решение, которое я иногда использую, - это разделить экран на два и каждый раз, когда вносятся изменения, щелкать документ xD.

<script>
document.addEventListener("click", function(){
    window.location.reload();
})
</script>
sRBill1990
источник
1

В node.js вы можете подключить primus.js (веб-сокеты) с gulp.js + gulp-watch (исполнитель задач и слушатель изменений, соответственно), так что gulp позволяет окну вашего браузера знать, что он должен обновляться всякий раз, когда html, js и т. д., поменять. Это агностик ОС, и он работает в локальном проекте.

Здесь страница обслуживается вашим веб-сервером, а не загружается как файл с диска, что на самом деле больше похоже на настоящую вещь.

матанстер
источник
Не могли бы вы предоставить ссылку на страницу, которая показывает, как это сделать, или, еще лучше, набор команд для запуска для тех из нас, кто не знаком с узлом?
nu everest 03
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) и изменить аргументы--class на фактические имена вашего предпочтительного браузера и терминала.

Запустите сценарий, как описано, и просто откройте index.html в браузере. После каждого сохранения в vim скрипт будет фокусировать окно вашего браузера, обновлять его, а затем возвращаться в терминал.

скриптер
источник
Не сработало (я пытаюсь автоматически обновить хром), в частности часть xdotool, ищущая хром класса окна, но мне удалось заставить это работать (часть xdotool): xdotool search --name 127.0.0.1 windowactivate key F5для работы на localhost (127.0.0.1). 0.1) только, конечно. Теперь мне нужно снова вставить это в сценарий.
Рольф
1

Самое гибкое решение, которое я нашел, - это расширение Chrome LiveReload в сочетании с сервером защиты .

Просматривайте все файлы в проекте или только те, которые вы указали. Вот пример конфигурации Guardfile:

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

Обратной стороной является то, что вы должны настраивать это для каждого проекта, и это поможет, если вы знакомы с Ruby.

Я также использовал расширение Tincr chrome, но похоже, что оно тесно связано с фреймворками и файловыми структурами. (Я попытался подключить tincr для проекта jekyll, но это позволило мне наблюдать за изменениями только в одном файле, без учета включений, частичных изменений или изменений макета). Однако Tincr отлично работает с такими проектами, как rails, которые имеют согласованные и предопределенные файловые структуры.

Tincr был бы отличным решением, если бы он допускал повторную загрузку шаблонов соответствия, но проект по-прежнему ограничен в своем наборе функций.

lfender6445
источник
1

Это можно сделать с помощью простого скрипта на Python.

  1. Используйте pyinotify для мониторинга определенной папки.
  2. Используйте Chrome с включенной отладкой. Обновление можно выполнить через соединение через веб-сокет.

Полную информацию можно найти здесь .

Сакти Приян Х
источник
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означает, что он передает каждый из них в качестве аргумента для нового выполнения osascript(где он будет проигнорирован).

Тимммм
источник
1
Это то, что я искал, спасибо! Используя tab.title.includes(argv[0])в качестве условного условия я могу сопоставить заголовок страницы, который может быть менее привередливым, чем URL, и работает при использовании локального сервера, а не file: //.
Дэвид Мирабито,
0

Установить и настроить chromix

Теперь добавьте это в свой .vimrc

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

измените порт на тот, который вы используете

Meain
источник
0 
(function() {
    setTimeout(function(){
        window.location.reload(true);
    }, 100);
})();

Сохраните этот код в файле livereload.js и включите его внизу HTML-скрипта, например:

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

Это будет обновлять страницу каждые 100 миллисекунд. Любые изменения, которые вы вносите в код, мгновенно видны глазам.

Боснийский кодер
источник
Это не отвечает на вопрос.
Майкл Фултон
Да, правильно, но я все же считаю, что это полезно в ситуациях, когда пользователь хочет постоянно обновлять свой HTML-документ. Я уважаю вашу честность, сэр.
Bosnian Coder
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
Нильс Линдеманн
источник
0

Автономное решение с использованием R

Этот код будет:

  • настроить локальный сервер, используя данный .html-файл
  • верните адрес сервера, чтобы вы могли смотреть его в браузере.

  • заставлять браузер обновляться каждый раз при сохранении изменений в .html-файле.

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

Подобные решения существуют для Python и т. Д.

Расмус Ларсен
источник
0

Добавьте это в свой HTML

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

Пока вы редактируете, ваша страница браузера размывается, при переключении назад, чтобы посмотреть на нее, запускается событие focus и страница перезагружается.

pinoyyid
источник
-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"

Пегас
источник