Tự động tải lại trình duyệt khi tôi lưu các thay đổi vào tệp html, trong Chrome?

106

Tôi đang chỉnh sửa tệp HTML trong Vim và tôi muốn trình duyệt làm mới bất cứ khi nào tệp bên dưới thay đổi.

Có plugin nào dành cho Google Chrome sẽ lắng nghe các thay đổi đối với tệp và tự động làm mới trang mỗi khi tôi lưu thay đổi vào tệp không? Tôi biết có XRefresh cho Firefox nhưng tôi không thể làm cho XRefresh chạy được.

Thật khó để viết một kịch bản để làm điều này?

vim  google-chrome  automation 
— Kevin Burke
nguồn
2
— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Sau khi tìm kiếm một số thời gian cho các công trình ở khắp mọi nơi giải pháp tôi mã của riêng tôi: alexshulzhenko.ru/web-development-autorefresh-page-on-changes
— Tebe
Tôi cũng viết mã của riêng mình: Tải lại trực tiếp cho Chrome và Firefox: github.com/blaise-io/live-reload#readme . Lặp lại URL máy chủ trong trường URL tệp nguồn của trình bổ trợ để tự giám sát.
— Blaise
Tiện ích mở rộng tuyệt vời, @Blaise. Nhưng tại sao lại có tối thiểu 0,5 giây tối thiểu cho việc tải lại. Tại sao không 0,1 giây để làm cho nó phản hồi nhanh hơn?
— Jay
@Jay Bởi vì việc giám sát không hề rẻ, máy chủ của bạn sẽ phải tạo phản hồi sau mỗi 0,1 giây và nó sẽ cần tạo một hàm băm của tệp tĩnh sau mỗi 0,1 giây. Nhưng bạn có thể chỉnh sửa biểu mẫu bằng cách sử dụng các công cụ dành cho nhà phát triển để cho phép <0,5 giây.
— Blaise

Câu trả lời:

24

Tôi cho rằng bạn không sử dụng OSX? Nếu không, bạn có thể làm điều gì đó như thế này với applecript:

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

Ngoài ra còn có một plugin cho chrome được gọi là "auto refresh plus", nơi bạn có thể chỉ định tải lại sau mỗi x giây:

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

— người bán sữa
nguồn
23
Plugin đó dường như không theo dõi hệ thống tệp cục bộ và thay vào đó sẽ chỉ làm mới định kỳ.
— Dan Dascalescu
Tôi gặp lỗi khi thay đổi trình duyệt sang chrome. Để khắc phục, hãy thay đổi keywordthành watch_keywordtrong dòng sau:if (URL of atab contains "#{keyword}") then
— Tim Joyce
Cái gì! Tôi đang sử dụng tập lệnh từ liên kết đầu tiên của bạn ( goo.gl/FZJvdJ ) với một số mod nhỏ cho Dart-Development với Chromium. Hoạt động như một sự quyến rũ!
— Mike Mitterer
2
Đó là một câu hỏi khá cũ, nhưng đồng bộ hóa trình duyệt là công cụ chính xác cho điều đó.
— miha
81

Giải pháp JavaScript thuần túy!

Live.js

Chỉ cần thêm thông tin sau vào <head>:

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

Làm sao? Chỉ cần bao gồm Live.js và nó sẽ giám sát trang hiện tại bao gồm CSS và Javascript cục bộ bằng cách gửi các yêu cầu HEAD liên tiếp đến máy chủ. Các thay đổi đối với CSS sẽ được áp dụng động và các thay đổi HTML hoặc Javascript sẽ tải lại trang. Thử nó!

Ở đâu? Live.js hoạt động trên Firefox, Chrome, Safari, Opera và IE6 + cho đến khi được chứng minh ngược lại. Live.js độc lập với khung phát triển hoặc ngôn ngữ mà bạn sử dụng, cho dù đó là Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla hay what-have-you.

Tôi đã sao chép câu trả lời này gần như nguyên văn từ đây , vì tôi nghĩ nó dễ hơn và tổng quát hơn câu trả lời hiện được chấp nhận ở đây.

— leekaiinthesky
nguồn
5
Bạn có thể đặt này ở phía trên và cũng sử dụng python -m SimpleHTTPServer dễ dàng peasy
— Marcel Valdez Orozco
2
Một phiên bản PHP thay thế làphp -S localhost:8080
— roryok
3
Ngoài ra còn có python3 -m http.server, cũng như nhiều ngôn ngữ / công cụ khác .
— carlwgeorge
1
Wow, đây là một giải pháp rất gọn gàng. Tôi ngạc nhiên rằng tôi phải cuộn đến đây để tìm nó.
— Triệu Nguyên
1
@arvixx Nó hoạt động với các tệp cục bộ, miễn là bạn đang chạy một máy chủ http cục bộ (và sử dụng http (s): //). Tôi đồng ý rằng nó không hoạt động với lược đồ tệp: // uri, nếu đó là ý bạn. Xem bình luận của Marcel Valdez Orozco ở trên để biết một cách dễ dàng để tạo ngay lập tức một máy chủ http từ thư mục cục bộ của bạn.
— leekaiinthesky
23

Tincr là một tiện ích mở rộng của Chrome sẽ làm mới trang bất cứ khi nào tệp bên dưới thay đổi.

— Konstantin Spirin
nguồn
4
Công cụ này thật tuyệt vời. Trong số những thứ khác, bạn có thể làm mới CSS trên một trang mà không cần làm mới HTML / JS.
— Bùn
vẻ hứa hẹn nhưng tôi đã cố gắng dây lên tincr cho một dự án Jekyll - nó chỉ cho phép tôi xem một tập tin duy nhất cho sự thay đổi, không chiếm thay đổi bao gồm, một phần hoặc bố trí
— lfender6445
3
Rất tiếc, Tincr sử dụng NPAPI không được dùng nữa và bị tắt trong Chrome theo mặc định (kể từ tháng 4 năm 2015). Và nó sẽ sớm bị loại bỏ hoàn toàn (tháng 9 năm 2015).
— Jan Včelák
4
Không còn hiệu lực.
— nu everest
2
Tôi không tìm thấy nó trong bộ sưu tập của EXTS, nhưng thấy rằng DevTools Tự động lưu
— Hos Thủy
17

Handy Bash one-liner cho OS X, giả sử rằng bạn đã cài đặt fswatch ( brew install fswatch). Nó xem một đường dẫn / tệp tùy ý và làm mới tab Chrome đang hoạt động khi có các thay đổi:

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'

Xem thêm về fswatch tại đây: https://stackoverflow.com/a/13807906/3510611

— tham dự
nguồn
Cảm ơn bạn! đây là câu trả lời duy nhất hoạt động vào tháng 8 năm 2017! Đây nên được đánh dấu là câu trả lời.
— Ujjwal-Nadhani
đơn giản và kính
— Pegasus
Chính xác những gì tôi đang tìm kiếm! Cảm ơn!
— ThisIsFlorianK
15

Với việc thêm một thẻ meta duy nhất vào tài liệu của mình, bạn có thể hướng dẫn trình duyệt tự động tải lại ở một khoảng thời gian nhất định:

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

Được đặt trong thẻ head của tài liệu, thẻ meta này sẽ hướng dẫn trình duyệt làm mới ba giây một lần.

— alebagran
nguồn
điều này cũng hoạt động với các tệp cục bộ. Đối với tôi, đây là câu trả lời chính xác.
— pid
11

http://livereload.com/ - ứng dụng gốc cho OS X, phiên bản Alpha cho Windows. Mở nguồn tại https://github.com/livereload/LiveReload2

— Jibin
nguồn
2
Tuyệt, nhưng $ 10? Có thật không? Yeesh.
— một mọt sách được trả tiền vào
@a mọt sách trả tiền, có vẻ hợp lý nếu nó hoạt động. Thêm vào đó là nguồn ngay tại đó, vì vậy hãy thử trước khi mua.
— Mark Fox
1
Ngoài ra còn có một miễn phí trực Nạp lại (tình cờ va chạm tên) Trình duyệt addon mà tôi tạo ra mà không giống nhau miễn phí: github.com/blaise-io/live-reload#readme
— Blaise
7

Sử dụng Gulp để xem các tệp và B browserync để tải lại trình duyệt.

Các bước là:

Trong dòng lệnh thực thi

npm install --save-dev gulp browser-sync

Tạo gulpfile.js với nội dung sau:

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

Chạy

nuốt nước bọt

Chỉnh sửa HTML, lưu và xem trình duyệt của bạn tải lại. Điều kỳ diệu được thực hiện thông qua việc đưa thẻ đặc biệt vào các tệp HTML của bạn.

— Konstantin Spirin
nguồn
2
Bạn đặt gulpfile.js ở đâu?
— nu everest
Thông minh. Chính xác những gì tôi đang tìm kiếm. Cảm ơn.
— Jeremy Then
5

Tôi biết đây là một câu hỏi cũ nhưng trong trường hợp nó giúp được ai đó, có một gói npm tải lại sẽ giải quyết nó.

Trong trường hợp bạn không chạy nó trên máy chủ hoặc gặp lỗi Live.js doesn't support the file protocol. It needs http.

Chỉ cần cài đặt nó:

npm install reload -g

và sau đó tại thư mục index.html của bạn, hãy chạy:

reload -b

Nó sẽ khởi động một máy chủ sẽ làm mới mỗi khi bạn lưu các thay đổi của mình.

Có nhiều tùy chọn khác trong trường hợp bạn đang chạy nó trên máy chủ hoặc bất kỳ thứ gì khác. Kiểm tra tài liệu tham khảo để biết thêm chi tiết!

— Alvaro
nguồn
3

Có một ứng dụng java cho OS x và Chrome có tên là Refreschro. Nó sẽ giám sát một tập hợp các tệp nhất định trên hệ thống tệp cục bộ và tải lại Chrome khi phát hiện thấy thay đổi:

http://neromi.com/refreschro/

— người dùng2511839
nguồn
1
kể từ ngày 29 tháng 8 năm 2016, đây là tùy chọn làm việc miễn phí dễ dàng nhất tại đây. Cảm ơn bạn!
— polpetti
Không đáng tin cậy dành cho Mac, từ chối để cài đặt
— Hos Thủy
3

Nếu bạn đang sử dụng GNU / Linux, bạn có thể sử dụng một trình duyệt khá thú vị có tên là Falkon . Nó dựa trên Qt WebEngine . Nó cũng giống như Firefox hoặc Chromium - ngoại trừ, nó tự động làm mới trang khi một tệp được cập nhật. Tự động làm mới không quan trọng lắm cho dù bạn sử dụng vim, nano hay nguyên tử, vscode, dấu ngoặc, geany, mousepad, v.v.

Trên Arch Linux, bạn có thể cài đặt Falkon khá dễ dàng:

sudo pacman -S falkon

Đây là gói snap.

— S.Goswami
nguồn
2

Một giải pháp nhanh chóng mà tôi đôi khi sử dụng là chia màn hình thành hai và mỗi khi thực hiện thay đổi, hãy nhấp vào tài liệu xD.

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

Trong node.js, bạn có thể kết nối primus.js (websockets) với gulp.js + gulp-watch (trình chạy tác vụ và trình nghe thay đổi, tương ứng), để gulp cho phép cửa sổ trình duyệt của bạn biết nó sẽ làm mới bất cứ khi nào html, js , v.v., thay đổi. Đây là hệ điều hành bất khả tri và tôi có nó đang hoạt động trong một dự án cục bộ.

Ở đây, trang được phục vụ bởi máy chủ web của bạn, không được tải dưới dạng tệp từ đĩa, mà thực sự giống như thật hơn.

— matanster
nguồn
Bạn có thể cung cấp một liên kết đến một trang hướng dẫn cách thực hiện việc này hoặc tốt hơn là một tập hợp các lệnh để chạy cho những người trong chúng ta không quen thuộc với nút không?
— nu everest
1

Điều này phù hợp với tôi (trong 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

Bạn có thể cần cài đặt các gói inotify và xdotool ( sudo apt-get install inotify-tools xdotooltrong Ubuntu) và thay đổi các --classnhóm thành tên thực của trình duyệt và thiết bị đầu cuối ưa thích của bạn.

Bắt đầu tập lệnh như được mô tả và chỉ cần mở index.html trong trình duyệt. Sau mỗi lần lưu trong vim, tập lệnh sẽ tập trung vào cửa sổ trình duyệt của bạn, làm mới nó và sau đó quay lại thiết bị đầu cuối.

— người viết kịch bản
nguồn
Không hoạt động (tôi đang cố gắng tự động làm mới chrome), cụ thể là phần xdotool đang tìm kiếm chromium lớp cửa sổ, nhưng tôi có thể làm cho điều này hoạt động (phần xdotool đó là): xdotool search --name 127.0.0.1 windowactivate key F5để làm việc trên localhost (127.0. 0,1), tất nhiên. Bây giờ tôi phải cắm lại nó vào script.
— Rolf
1

Giải pháp linh hoạt nhất mà tôi đã tìm thấy là tiện ích mở rộng Chrome LiveReload được ghép nối với một máy chủ bảo vệ .

Xem tất cả các tệp trong một dự án hoặc chỉ những tệp bạn chỉ định. Đây là cấu hình Guardfile mẫu:

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

Nhược điểm là bạn phải thiết lập điều này cho mỗi dự án và nó sẽ hữu ích nếu bạn đã quen với ruby.

Tôi cũng đã sử dụng phần mở rộng Tincr chrome - nhưng nó dường như được kết hợp chặt chẽ với các khung và cấu trúc tệp. (Tôi đã thử nối dây tincr cho một dự án jekyll nhưng nó chỉ cho phép tôi xem một tệp duy nhất cho các thay đổi, không tính đến các thay đổi bao gồm, một phần hoặc bố cục). Tuy nhiên, Tincr hoạt động tuyệt vời với các dự án như đường ray có cấu trúc tệp nhất quán và được xác định trước.

Tincr sẽ là một giải pháp tuyệt vời nếu nó cho phép tải lại tất cả các mẫu đối sánh bao gồm, nhưng dự án vẫn bị giới hạn trong bộ tính năng của nó.

— lfender6445
nguồn
1

Điều này có thể được thực hiện bằng cách sử dụng một tập lệnh python đơn giản.

  1. Sử dụng pyinotify để theo dõi một thư mục cụ thể.
  2. Sử dụng Chrome đã bật gỡ lỗi. Làm mới có thể được thực hiện thông qua kết nối websocket.

Chi tiết đầy đủ có thể được tham khảo tại đây .

— Sakthi Priyan H
nguồn
1

Dựa trên câu trả lời của Atkei cho OSX:

$ brew install fswatch

Chuck tất cả những điều này vào 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.");
}

Điều đó sẽ tải lại tab đầu tiên mà nó tìm thấy bắt đầu bằng file://và kết thúc bằng đối số dòng lệnh đầu tiên. Bạn có thể tinh chỉnh nó như mong muốn.

Cuối cùng, làm một cái gì đó như thế này.

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

fswatch -oxuất ra số lượng tệp đã thay đổi trong mỗi sự kiện thay đổi, một tệp trên mỗi dòng. Thông thường nó sẽ chỉ in 1. xargsđọc các 1s đó trong và -n1có nghĩa là nó chuyển từng cái dưới dạng đối số cho một thực thi mới của osascript(nơi nó sẽ bị bỏ qua).

— Timmmm
nguồn
1
Đây là những gì tôi đã tìm kiếm, cảm ơn! Sử dụng tab.title.includes(argv[0])làm điều kiện tôi có thể khớp trên tiêu đề trang có thể ít phức tạp hơn URL và hoạt động khi sử dụng máy chủ cục bộ thay vì tệp: //.
— David Mirabito
0

Cài đặt và thiết lập chromix

Bây giờ hãy thêm cái này vào .vimrc

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

thay đổi cổng thành những gì bạn sử dụng

— khúc khuỷu
nguồn
0 
(function() {
    setTimeout(function(){
        window.location.reload(true);
    }, 100);
})();

Lưu mã này vào tệp livereload.js và đưa nó vào cuối tập lệnh HTML như sau:

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

Điều này sẽ làm là làm mới trang sau mỗi 100 mili-giây. Bất kỳ thay đổi nào bạn thực hiện trong mã đều có thể nhìn thấy ngay bằng mắt.

— Người viết mã tiếng Bosnia
nguồn
Điều này không trả lời câu hỏi.
— Michael Fulton
Đúng vậy, nhưng tôi vẫn nghĩ nó hữu ích trong những trường hợp người dùng muốn liên tục làm mới tài liệu HTML của mình. Tôi tôn trọng sự trung thực của bạn, thưa ngài.
— Bosnian Coder
0

Ok, đây là giải pháp Auto Hotkey thô sơ của tôi (Trên Linux, hãy thử Auto Key ). Khi phím tắt lưu được nhấn, hãy kích hoạt trình duyệt, nhấp vào nút tải lại , sau đó quay lại trình chỉnh sửa. Tôi chỉ mệt mỏi khi chạy các giải pháp khác. Sẽ không hoạt động nếu trình chỉnh sửa của bạn tự động lưu.

^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
nguồn
0

Giải pháp ngoại tuyến sử dụng R

Mã này sẽ:

  • thiết lập một máy chủ cục bộ bằng cách sử dụng tệp .html đã cho
  • trả về địa chỉ máy chủ để bạn có thể xem nó trong trình duyệt.

  • làm cho trình duyệt làm mới mỗi khi thay đổi được lưu vào tệp .html.

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

Các giải pháp tương tự tồn tại cho python, v.v.

— Rasmus Larsen
nguồn
0

Thêm cái này vào HTML của bạn

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

Trong khi bạn đang chỉnh sửa, trang trình duyệt của bạn bị mờ, bằng cách quay lại để xem nó, sự kiện tiêu điểm sẽ được kích hoạt và trang sẽ tải lại.

— pinoyyid
nguồn
-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' "

sau đó chỉ cần nhập thư mục bạn muốn giám sát thực thi "watch_refresh_chrome"

— Pegasus
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.