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

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

73 голосов
/ 08 апреля 2011

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

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

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

Ответы [ 20 ]

50 голосов
/ 06 апреля 2015

Чистое решение 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 или что у вас есть.

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

24 голосов
/ 08 апреля 2011

Я полагаю, вы не на OSX? В противном случае вы можете сделать что-то вроде этого с appleScriptcript:

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

22 голосов
/ 06 июля 2013

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

12 голосов
/ 21 сентября 2016

Однострочная версия 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

11 голосов
/ 23 марта 2012

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

8 голосов
/ 30 июня 2015

С добавлением одного метатега в ваш документ вы можете настроить браузер на автоматическую перезагрузку через заданный интервал: 

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

Этот метатег будет помещен в заголовочный тег вашего документа.поручить браузеру обновляться каждые три секунды.

4 голосов
/ 16 сентября 2015

Расширение LivePage Chrome можно легко настроить для отслеживания изменений в локальных файлах.

3 голосов
/ 22 июня 2013

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

http://neromi.com/refreschro/

2 голосов
/ 02 июня 2016

Используйте 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);
});

Запустить

gulp serve

Редактировать HTML, сохранить и увидеть перезагрузку браузера.Волшебство достигается за счет внедрения специального тега в ваши HTML-файлы.

1 голос
/ 04 декабря 2014

Это работает для меня (в 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 скрипт будет фокусироваться на окне вашего браузера, обновлять его и затем возвращаться в терминал.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...