Muat ulang browser secara otomatis saat saya menyimpan perubahan pada file html, di Chrome?

106

Saya mengedit file HTML di Vim dan saya ingin browser menyegarkan setiap kali file di bawahnya berubah.

Apakah ada plugin untuk Google Chrome yang akan mendengarkan perubahan pada file dan menyegarkan halaman secara otomatis setiap kali saya menyimpan perubahan pada file? Saya tahu ada XRefresh untuk Firefox tapi saya tidak bisa menjalankan XRefresh sama sekali.

Seberapa sulit menulis skrip untuk melakukan ini sendiri?

vim google-chrome automation Kevin Burke
sumber
2
Untuk Firefox: stackoverflow.com/questions/1346716/…
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Setelah mencari beberapa waktu untuk solusi bekerja di mana-mana, saya membuat kode saya sendiri: alexshulzhenko.ru/web-development-autorefresh-page-on-changes
Tebe
Saya juga membuat kode sendiri: Live Reload untuk Chrome dan Firefox: github.com/blaise-io/live-reload#readme . Ulangi URL host di bidang URL file sumber dari addon untuk memantau dirinya sendiri.
Blaise
Ekstensi yang bagus, @Blaise. Tetapi mengapa ada minimum 0,5 detik minimum untuk memuat ulang. Mengapa tidak 0,1 detik agar lebih responsif?
Jay
@Jay Karena pemantauan tidak murah, server Anda harus menghasilkan respons setiap 0,1 detik dan perlu menghasilkan hash file statis setiap 0,1 detik. Tetapi Anda mungkin dapat mengedit formulir menggunakan alat pengembang untuk mengizinkan <0,5s.
Blaise

Jawaban:

24

Saya berasumsi Anda tidak menggunakan OSX? Jika tidak, Anda dapat melakukan sesuatu seperti ini dengan applescript:

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

Ada juga plugin untuk chrome yang disebut "penyegaran otomatis plus" tempat Anda dapat menentukan muat ulang setiap x detik:

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

tukang susu
sumber
23
Plugin itu tampaknya tidak mengawasi sistem file lokal, dan sebaliknya akan menyegarkan secara berkala.
Dan Dascalescu
Saya mendapatkan kesalahan saat mengubah browser ke chrome. Untuk memperbaikinya, ubah keywordmenjadi watch_keyworddi baris berikut:if (URL of atab contains "#{keyword}") then
Tim Joyce
Whau! Saya menggunakan skrip dari tautan pertama Anda ( goo.gl/FZJvdJ ) dengan beberapa mod kecil untuk Pengembangan Dart dengan Chromium. Bekerja seperti pesona!
Mike Mitterer
2
Ini adalah pertanyaan yang cukup lama, tetapi sinkronisasi browser adalah alat untuk itu.
miha
81

Solusi JavaScript murni!

Live.js

Cukup tambahkan yang berikut ini ke Anda <head>:

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

Bagaimana? Cukup sertakan Live.js dan itu akan memantau halaman saat ini termasuk CSS lokal dan Javascript dengan mengirimkan permintaan HEAD berturut-turut ke server. Perubahan pada CSS akan diterapkan secara dinamis dan perubahan HTML atau Javascript akan memuat ulang halaman. Cobalah!

Dimana? Live.js berfungsi di Firefox, Chrome, Safari, Opera dan IE6 + hingga terbukti sebaliknya. Live.js tidak bergantung pada kerangka kerja pengembangan atau bahasa yang Anda gunakan, baik itu Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla atau what-have-you.

Saya menyalin jawaban ini hampir secara kata demi kata dari sini , karena menurut saya ini lebih mudah dan lebih umum daripada jawaban yang diterima saat ini di sini.

leekaiinthesky
sumber
5
Anda dapat meletakkan ini di atas dan juga menggunakan python -m SimpleHTTPServer easy peasy
Marcel Valdez Orozco
2
Versi PHP alternatif adalahphp -S localhost:8080
roryok
3
Ada juga python3 -m http.server, serta banyak lagi untuk bahasa / alat lain .
carlwgeorge
1
Wow, ini solusi yang sangat bagus. Saya terkejut bahwa saya harus menggulir sejauh ini untuk menemukannya.
Trieu Nguyen
1
@arvixx Ia bekerja dengan file lokal, selama Anda menjalankan server http lokal (dan menggunakan http (s): //). Saya setuju itu tidak bekerja dengan file: // skema uri, jika itu yang Anda maksud. Lihat komentar Marcel Valdez Orozco di atas untuk mengetahui satu cara mudah membuat server http secara instan dari direktori lokal Anda.
leekaiinthesky
23

Tincr adalah ekstensi Chrome yang akan menyegarkan halaman setiap kali file di bawahnya berubah.

Konstantin Spirin
sumber
4
Alat ini luar biasa. Antara lain, Anda dapat menyegarkan CSS pada halaman tanpa menyegarkan HTML / JS.
Lumpur
terlihat menjanjikan tetapi saya mencoba memasang tincr untuk proyek jekyll - itu hanya memungkinkan saya untuk menonton satu file untuk perubahan, tidak memperhitungkan
penyertaan
3
Sayangnya, Tincr menggunakan NPAPI yang sudah usang dan dinonaktifkan di Chrome secara default (sejak Apr 2015). Dan itu akan segera dihapus seluruhnya (Sep 2015).
Jan Včelák
4
Tidak lagi tersedia.
nu everest
2
Saya tidak menemukannya di galeri exts, tetapi menemukan bahwa DevTools Autosave
Hos Mercury
17

Handy Bash one-liner untuk OS X, dengan asumsi Anda telah menginstal fswatch ( brew install fswatch). Itu melihat jalur / file sewenang-wenang dan menyegarkan tab Chrome aktif ketika ada perubahan:

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'

Lihat lebih lanjut tentang fswatch di sini: https://stackoverflow.com/a/13807906/3510611

attekei
sumber
Terima kasih! ini adalah satu-satunya jawaban yang berhasil di Agustus 2017! Ini harus ditandai sebagai jawabannya.
Ujjwal-Nadhani
sederhana dan berguna
Pegasus
Persis apa yang saya cari! Terima kasih!
ThisIsFlorianK
15

Dengan tambahan satu tag meta ke dalam dokumen Anda, Anda dapat menginstruksikan browser untuk memuat ulang secara otomatis pada interval yang disediakan:

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

Ditempatkan di dalam tag kepala dokumen Anda, tag meta ini akan memerintahkan browser untuk menyegarkan setiap tiga detik.

alebagran.dll
sumber
ini juga berfungsi dengan file lokal. Bagi saya, inilah jawaban yang benar.
pid
11

http://livereload.com/ - aplikasi asli untuk OS X, versi Alpha untuk Windows. Buka bersumber di https://github.com/livereload/LiveReload2

Jibin
sumber
2
Keren, tapi $ 10? Betulkah? Yeesh.
kutu buku yang dibayar
@ kutu buku berbayar, sepertinya masuk akal jika berhasil. Ditambah sumbernya ada di sana, jadi cobalah sebelum Anda membeli.
Mark Fox
1
Ada juga addon browser Live Reload (tabrakan nama tidak disengaja) gratis yang saya buat yang melakukan hal yang sama secara gratis: github.com/blaise-io/live-reload#readme
Blaise
7

Gunakan Gulp untuk melihat file dan Browsersync untuk memuat ulang browser.

Langkah-langkahnya adalah:

Di baris perintah, jalankan

npm install --save-dev gulp browser-sync

Buat gulpfile.js dengan konten berikut:

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);
});

Lari

teguk melayani

Edit HTML, simpan dan lihat browser Anda dimuat ulang. Keajaiban dilakukan melalui injeksi tag khusus secara langsung ke dalam file HTML Anda.

Konstantin Spirin
sumber
2
Di mana Anda meletakkan gulpfile.js?
nu everest
Luar biasa. Persis apa yang saya cari. Terima kasih.
Jeremy Kemudian
5

The LivePage ekstensi Chrome dapat dengan mudah diatur untuk memantau perubahan file lokal.

Serge Stroobandt
sumber
5

Saya tahu ini adalah pertanyaan lama tetapi jika itu membantu seseorang, ada isi ulang paket npm yang menyelesaikannya.

Jika Anda tidak menjalankannya di server atau menerima kesalahan Live.js doesn't support the file protocol. It needs http.

Instal saja:

npm install reload -g

dan kemudian di direktori index.html Anda, jalankan:

reload -b

Ini akan memulai server yang akan menyegarkan setiap kali Anda menyimpan perubahan Anda.

Ada banyak opsi lain jika Anda menjalankannya di server atau yang lainnya. Lihat referensi untuk lebih jelasnya!

Alvaro
sumber
3

Ada aplikasi java untuk os x dan Chrome bernama Refreschro. Ini akan memantau sekumpulan file tertentu pada sistem file lokal dan memuat ulang Chrome ketika perubahan terdeteksi:

http://neromi.com/refreschro/

pengguna2511839
sumber
1
per 29 Agustus 2016 ini adalah opsi kerja gratis termudah di sini. Terima kasih!
polpetti
Tidak tepercaya Untuk mac, tolak penginstalan
Hos Mercury
3

Jika Anda menggunakan GNU / Linux, Anda dapat menggunakan browser yang cukup keren bernama Falkon . Ini didasarkan pada Qt WebEngine . Ini seperti Firefox atau Chromium - kecuali, itu menyegarkan halaman secara otomatis ketika file diperbarui. Refresh otomatis tidak terlalu menjadi masalah apakah Anda menggunakan vim, nano, atau atom, vscode, brackets, geany, mousepad, dll.

Di Arch Linux, Anda dapat menginstal Falkon dengan cukup mudah:

sudo pacman -S falkon

Ini paket snap.

S.Goswami
sumber
2

Solusi cepat yang terkadang saya gunakan adalah membagi layar menjadi dua, dan setiap kali ada perubahan, klik pada dokumen xD.

<script>
document.addEventListener("click", function(){
    window.location.reload();
})
</script>
sRBill1990
sumber
1

Di node.js, Anda dapat memasang primus.js (websockets) dengan gulp.js + gulp-watch (masing-masing menjalankan tugas dan mengubah pendengar), sehingga gulp memungkinkan jendela browser Anda tahu bahwa itu harus menyegarkan setiap kali html, js , dll, berubah. Ini adalah OS agnostik dan saya memilikinya bekerja di proyek lokal.

Di sini, halaman disajikan oleh server web Anda, bukan dimuat sebagai file dari disk, yang sebenarnya lebih mirip aslinya.

matanster
sumber
Bisakah Anda memberikan link ke halaman yang menunjukkan cara melakukan ini atau lebih baik lagi serangkaian perintah untuk dijalankan bagi kita yang tidak begitu familiar dengan node?
nu everest
1

Ini berfungsi untuk saya (di 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

Anda mungkin perlu menginstal paket inotify dan xdotool ( sudo apt-get install inotify-tools xdotooldi Ubuntu) dan mengubah argumen --classke nama sebenarnya dari browser dan terminal pilihan Anda.

Mulai skrip seperti yang dijelaskan dan buka index.html di browser. Setelah setiap penyimpanan di vim, skrip akan memfokuskan jendela browser Anda, menyegarkannya, dan kemudian kembali ke terminal.

penulis skenario
sumber
Tidak berfungsi (saya mencoba menyegarkan chrome secara otomatis), khususnya bagian xdotool mencari kromium kelas jendela, tetapi saya bisa membuatnya berfungsi (bagian xdotool yaitu): xdotool search --name 127.0.0.1 windowactivate key F5untuk bekerja di localhost (127.0.0.0). 0.1) saja, tentu saja. Sekarang saya harus menyambungkannya kembali ke skrip.
Rolf
1

Solusi paling fleksibel yang saya temukan adalah ekstensi Chrome LiveReload yang dipasangkan dengan server penjaga .

Tonton semua file dalam sebuah proyek, atau hanya yang Anda tentukan. Berikut adalah contoh konfigurasi Guardfile:

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

Kelemahannya adalah Anda harus mengatur ini per proyek dan ini membantu jika Anda terbiasa dengan ruby.

Saya juga telah menggunakan ekstensi chrome Tincr - tetapi tampaknya ekstensi tersebut terkait erat dengan kerangka kerja dan struktur file. (Saya mencoba memasang tincr untuk proyek jekyll tetapi itu hanya memungkinkan saya untuk menonton satu file untuk perubahan, tidak memperhitungkan penyertaan, perubahan parsial atau tata letak). Tincr bagaimanapun, bekerja sangat baik di luar kotak dengan proyek seperti rel yang memiliki struktur file yang konsisten dan telah ditentukan sebelumnya.

Tincr akan menjadi solusi yang bagus jika mengizinkan semua pola pencocokan inklusif untuk memuat ulang, tetapi proyek tersebut masih terbatas dalam kumpulan fiturnya.

lfender6445.dll
sumber
1

Ini dapat dilakukan dengan menggunakan skrip python sederhana.

  1. Gunakan pyinotify untuk memantau folder tertentu.
  2. Gunakan Chrome dengan debugging diaktifkan. Refresh dapat dilakukan melalui koneksi websocket.

Detail lengkapnya dapat dirujuk di sini .

Sakthi Priyan H.
sumber
1

Berdasarkan jawaban attekei untuk OSX:

$ brew install fswatch

Masukkan semua ini ke 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.");
}

Itu akan memuat ulang tab pertama yang ditemukannya yang dimulai dengan file://dan diakhiri dengan argumen baris perintah pertama. Anda dapat menyesuaikannya sesuai keinginan.

Terakhir, lakukan sesuatu seperti ini.

fswatch -o ~/path/to/watch | xargs -n1 osascript -l JavaScript reload.scpt myindex.html

fswatch -omengeluarkan jumlah file yang telah berubah di setiap peristiwa perubahan, satu per baris. Biasanya hanya akan mencetak 1. xargsmembaca 1s in dan -n1berarti meneruskan masing-masing sebagai argumen ke eksekusi baru osascript(di mana ia akan diabaikan).

Timmmm
sumber
1
Ini yang saya cari, terima kasih! Menggunakan tab.title.includes(argv[0])sebagai kondisional, saya dapat mencocokkan judul halaman yang tidak terlalu rumit daripada URL, dan berfungsi saat menggunakan server lokal daripada file: //.
David Mirabito
0

Pasang dan siapkan chromix

Sekarang tambahkan ini ke file .vimrc

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

ubah port menjadi apa yang Anda gunakan

meain
sumber
0 
(function() {
    setTimeout(function(){
        window.location.reload(true);
    }, 100);
})();

Simpan kode ini ke dalam file livereload.js dan sertakan di bagian bawah script HTML seperti ini:

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

Apa yang akan dilakukan ini adalah menyegarkan halaman setiap 100 mili-detik. Setiap perubahan yang Anda buat dalam kode akan langsung terlihat oleh mata.

Pembuat Kode Bosnia
sumber
Ini tidak menjawab pertanyaan itu.
Michael Fulton
Ya benar, tapi saya masih berpikir itu berguna dalam situasi di mana pengguna ingin terus-menerus menyegarkan dokumen HTML-nya. Saya menghormati kejujuran Anda, Tuan.
Coder Bosnia
0

Ok, ini solusi Auto Hotkey mentah saya (Di Linux, coba Auto Key ). Saat pintasan simpan keyboard ditekan, aktifkan browser, klik tombol muat ulang , lalu alihkan kembali ke editor. Saya hanya lelah menjalankan solusi lain. Tidak akan berfungsi jika editor Anda menyimpan otomatis.

^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
Nils Lindemann
sumber
0

Solusi offline menggunakan R

Kode ini akan:

  • setup server lokal menggunakan .html-file
  • mengembalikan alamat server, sehingga Anda dapat melihatnya di browser.

  • buat browser disegarkan setiap kali ada perubahan yang disimpan ke file .html.

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

Solusi serupa ada untuk python dll.

Rasmus Larsen
sumber
0

Tambahkan ini ke HTML Anda

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

Saat Anda mengedit, halaman browser Anda diburamkan, dengan beralih kembali untuk melihatnya, peristiwa fokus diaktifkan dan halaman dimuat ulang.

pinoyyid.dll
sumber
-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' "

lalu masukkan saja direktori yang ingin Anda pantau, jalankan "watch_refresh_chrome"

Pegasus
sumber