Автоматичне перезавантаження браузера, коли я зберігаю зміни в HTML-файлі, в Chrome?

106

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

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

Наскільки важко було б написати сценарій, щоб зробити це сам?

vim  google-chrome  automation 
— Кевін Берк
джерело
2
— Чіро Сантіллі郝海东冠状病六四事件法轮功
Подивившись на деякий час для роботи всюди рішення я закодований власний: alexshulzhenko.ru/web-development-autorefresh-page-on-changes
— ТЕБ
Я також кодую свій власний: Live Reload для Chrome і Firefox: github.com/blaise-io/live-reload#readme . Повторіть URL-адресу хоста в полі URL-адреси вихідного файлу додатка, щоб контролювати себе.
— Блейз
Відмінне розширення, @Blaise. Але чому є мінімум 0,5 секунди мінімум для перезавантаження. Чому б не 0,1 секунди, щоб зробити це більш чуйним?
— Джей
@Jay Оскільки моніторинг не є дешевим, ваш сервер повинен буде генерувати відповідь кожні 0,1 секунди, і він повинен генерувати хеш статичного файлу кожні 0,1 секунди. Але ви, ймовірно, можете редагувати форму, використовуючи інструменти для розробників, щоб дозволити <0,5 с.
— Блейз

Відповіді:

24

Я припускаю, що ви не на OSX? Інакше ви можете зробити щось подібне за допомогою яблучного сценарію:

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

Також є плагін для хрому під назвою "автоматичне оновлення плюс", де ви можете вказати перезавантаження кожні x секунд:

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

— молочний пістолет
джерело
23
Схоже, цей плагін не переглядає локальну файлову систему, а замість цього періодично оновлюватиметься.
— Дан Даскалеску
Я отримував помилки під час зміни браузера на хром. Щоб виправити це, змініть keywordна watch_keywordв наступному рядку:if (URL of atab contains "#{keyword}") then
— Тім Джойс
Ухау! Я використовую сценарій з вашого першого посилання ( goo.gl/FZJvdJ ) з деякими маленькими модами для Dart-Development з Chromium. Працює як шарм!
— Майк Міттерер
2
Це досить старе питання, але синхронізація браузера - це інструмент саме для цього.
— miha
81

Чисте рішення 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 або що-небудь у вас є.

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

— леекаінтійський
джерело
5
Ви можете поставити це вгорі, а також використовувати python -m SimpleHTTPServer легкий горошок
— Marcel Valdez Orozco
2
Альтернативна версія PHPphp -S localhost:8080
— roryok
3
— carlwgeorge
1
Ого, це дуже акуратне рішення. Я здивований, що мені доводиться прокручувати так далеко, щоб знайти його.
— Trieu Nguyen
1
@arvixx Це працює з локальними файлами, якщо ви працюєте з локальним сервером http (і використовуєте http (s): //). Я погоджуюсь, що це не працює зі схемою file: // uri, якщо ви це маєте на увазі. Дивіться коментар Марселя Вальдеса Ороско вище про один простий спосіб миттєвого створення http-сервера з вашого локального каталогу.
— leekaiinthesky
23

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

— Костянтин Спірін
джерело
4
Цей інструмент дивовижний. Крім усього іншого, ви можете оновити CSS на сторінці, не оновлюючи HTML / JS.
— Грязь
виглядає багатообіцяючою, але я спробував підключити tincr для проекту jekyll - це дозволило мені переглядати лише один файл змін, не враховуючи
— включення
3
На жаль, Tincr використовує NPAPI, який застарів і відключений у Chrome за замовчуванням (з квітня 2015). І вона буде повністю видалена незабаром (вересень 2015).
— Ян Вчелак
4
Більше не доступний.
— nu everest
2
Я не знайшов його в галереї випусків, але виявив, що DevTools Autosave
— Hos Mercury
17

Зручний одношаровий 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

— atkei
джерело
Дякую! це єдина відповідь, яка працює в серпні 2017 року! Це слід позначити як відповідь.
— Ujjwal-Nadhani
простий та usefule
— Пегас
Саме те, що я шукав! Дякую!
— ThisIsFlorianK
15

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

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

Цей метатег, розміщений у головному тезі документа, дасть змогу браузеру оновлюватись кожні три секунди.

— алебагран
джерело
це також працює з локальними файлами. Для мене це правильна відповідь.
— pid
11

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

— Джибін
джерело
2
Класно, але 10 доларів? Дійсно? Так.
— платний ботанік
@ платний ботанік, здається розумним, якщо це працює. Плюс джерело є саме там, тому спробуйте перед покупкою.
— Марк Фокс
1
Також я створив безкоштовний веб-переглядач Add
— 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-файлів.

— Костянтин Спірін
джерело
2
Куди ви кладете gulpfile.js?
— nu everest
Відмінно. Саме те, що я шукав. Дякую.
— Джеремі Тоді
5

Я знаю, що це старе питання, але якщо це комусь допомагає, існує пакет npm для перезавантаження, який вирішує його.

Якщо ви не запустите його на сервері або отримали помилку Live.js doesn't support the file protocol. It needs http.

Просто встановіть його:

npm install reload -g

а потім у каталозі index.html запустіть:

reload -b

Він запустить сервер, який оновлюватиметься кожного разу, коли ви збережете свої зміни.

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

— Альваро
джерело
3

Існує програма java для os x та Chrome під назвою Refreschro. Він буде контролювати заданий набір файлів у локальній файловій системі та перезавантажувати Chrome, коли виявляється зміна:

http://neromi.com/refreschro/

— користувач2511839
джерело
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

Ось пакет оснащення.

— S.Goswami
джерело
2

Швидке рішення, яке я іноді використовую, - розділити екран на дві частини, і кожного разу, коли відбувається зміна, клацніть на документі xD.

<script>
document.addEventListener("click", function(){
    window.location.reload();
})
</script>
— sRBill1990
джерело
1

У node.js ви можете підключити primus.js (websockets) за допомогою gulp.js + gulp-watch (виконавець завдань та зміна слухача відповідно), так що gulp дозволяє вікну вашого браузера знати, що він повинен оновлюватися, коли html, js тощо, змінити. Це агностик ОС, і я працюю в локальному проекті.

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

— matanster
джерело
Чи можете ви надати посилання на сторінку, яка показує, як це зробити, а ще краще набір команд для запуску тих, хто з нас не так знайомий з вузлом?
— nu everest
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 у веб-переглядачі. Після кожного збереження in vim скрипт фокусує вікно вашого браузера, оновить його та повертається до терміналу.

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

Найбільш гнучким рішенням, який я знайшов, є розширення Chrome Chrome LiveReload у парі з охоронним сервером .

Перегляньте всі файли в проекті або лише ті, які ви вказали. Ось приклад конфігурації Guardfile:

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

Мінус полягає в тому, що ви повинні налаштувати це на проект, і це допоможе, якщо ви знайомі з рубіном.

Я також використовував хромоване розширення Tincr - але воно, здається, тісно пов'язане з рамками та структурами файлів. (Я спробував з'єднати tincr для проекту jekyll, але це дозволило мені спостерігати лише за одним файлом щодо змін, не враховуючи включення, часткові зміни чи зміни макета). Тинкр, однак, прекрасно працює з такими проектами, як рейки, які мають послідовну та заздалегідь задану структуру файлів.

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

— lfender6445
джерело
1

Це можна зробити за допомогою простого сценарію python.

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

Повні деталі можна переглянути тут .

— Sakthi Priyan H
джерело
1

На основі відповіді atkei для 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читає ті, 1що входять , і -n1означає, що вони передають кожен як аргумент до нового виконання osascript(де воно буде ігноровано).

— Тимммм
джерело
1
Це те, що я шукав, дякую! Використовуючи tab.title.includes(argv[0])як умовний, я можу відповідати заголовку сторінки, який може бути менш вибагливим, ніж URL, і працює, коли використовується локальний сервер, а не файл: //.
— Девід Мірабіто
0

Встановити та налаштувати chromix

Тепер додайте це до свого .vimrc

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

змінити порт на те, що ви використовуєте

— мейн
джерело
0 
(function() {
    setTimeout(function(){
        window.location.reload(true);
    }, 100);
})();

Збережіть цей код у файлі livereload.js і включіть його внизу HTML-скрипту так:

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

Що це буде робити - це оновлення сторінки кожні 100 мілі-секунд. Будь-які зміни, внесені в код, миттєво помітні для очей.

— Боснійський кодер
джерело
Це не дає відповіді на запитання.
— Майкл Фултон
Так правильно, але я все-таки вважаю, що це корисно в ситуаціях, коли користувач хоче постійно оновлювати свій HTML-документ. Я поважаю вашу чесність, пане.
— Боснійський
0

Гаразд, ось моє сире рішення Auto Hotkey (у Linux спробуйте автоматичний ключ ). Коли натискається комбінація клавіш збереження , активуйте браузер, натисніть кнопку перезавантажити та поверніться назад до редактора. Мені просто набридло запускати інші рішення. Не буду працювати, якщо ваш редактор автоматично зберігає.

^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>

Під час редагування сторінка веб-переглядача розмивається, перемикаючи його назад, подія фокусування запускається і сторінка перезавантажується.

— піноїд
джерело
-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"

— Пегас
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.