Chrome में HTML फ़ाइल में परिवर्तन सहेजने पर स्वतः पुनः लोड होने वाला ब्राउज़र?


106

मैं विम में एक HTML फ़ाइल संपादित कर रहा हूं और मैं चाहता हूं कि जब भी परिवर्तन हो, तो ब्राउज़र को रीफ़्रेश करें।

क्या Google Chrome के लिए कोई ऐसा प्लगइन है जो फ़ाइल में परिवर्तन करने और पृष्ठ को स्वत: रीफ़्रेश करने के लिए हर बार फ़ाइल को बदलने से बचाएगा? मुझे पता है कि फ़ायरफ़ॉक्स के लिए एक्सफ़्रेश है लेकिन मुझे एक्सफ़्रेश बिल्कुल नहीं मिल सकता था।

खुद ऐसा करने के लिए स्क्रिप्ट लिखना कितना मुश्किल होगा?


2
फ़ायरफ़ॉक्स के लिए: stackoverflow.com/questions/1346716/…
Ciro Santilli 郝海东 flow flow flow '11

हर जगह के समाधान के लिए कुछ समय की तलाश के बाद मैंने खुद को कोडित किया: alexshulzhenko.ru/web-development-autorefresh-page-on-changes
Tebe

मैं अपना स्वयं का कोड भी देता हूं: क्रोम और फ़ायरफ़ॉक्स के लिए लाइव रीलोड: github.com/blaise-io/live-reload##me । अपने आप को मॉनिटर करने के लिए addon के स्रोत फ़ाइल URL फ़ील्ड में होस्ट URL को दोहराएं।
Blaise

महान विस्तार, @ आशीर्वाद। लेकिन फिर से लोडिंग के लिए न्यूनतम 0.5 सेकंड न्यूनतम क्यों है। इसे और अधिक संवेदनशील बनाने के लिए 0.1 सेकंड क्यों नहीं?
Jay

@Jay निगरानी सस्ता नहीं होने के कारण, आपके सर्वर को हर 0.1s पर एक प्रतिक्रिया उत्पन्न करनी होगी और इसे हर 0.1s में स्थिर फ़ाइल का हैश उत्पन्न करना होगा। लेकिन आप संभवतः <0.5s की अनुमति देने के लिए डेवलपर टूल का उपयोग करके फ़ॉर्म को संपादित कर सकते हैं।
Blaise

जवाबों:


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=en


23
वह प्लगइन स्थानीय फाइल सिस्टम को देखने के लिए प्रतीत नहीं होता है, और इसके बजाय समय-समय पर ताज़ा होगा।
दान डैस्कलेस्कु

ब्राउजर को क्रोम में बदलते समय मुझे त्रुटियाँ हो रही थीं। इसे ठीक करने के keywordलिए watch_keyword, निम्नलिखित पंक्ति में बदलें :if (URL of atab contains "#{keyword}") then
टिम जॉइस

Whau! मैं आपके पहले लिंक ( goo.gl/FZJvdJ ) से स्क्रिप्ट का उपयोग क्रोमियम के लिए डार्ट-डेवलपमेंट के लिए कुछ छोटे मॉड के साथ कर रहा हूं । एक जादू की तरह काम करता है!
माइक मेटरर

2
यह एक बहुत पुराना प्रश्न है, लेकिन ब्राउज़र-सिंक वास्तव में इसके लिए उपकरण है।
मील

81

शुद्ध जावास्क्रिप्ट समाधान!

Live.js

बस अपने निम्नलिखित जोड़ें <head>:

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

कैसे? बस Live.js शामिल करें और यह सर्वर पर लगातार HEAD अनुरोध भेजकर स्थानीय CSS और जावास्क्रिप्ट सहित वर्तमान पृष्ठ की निगरानी करेगा। CSS में परिवर्तन गतिशील रूप से लागू किए जाएंगे और HTML या जावास्क्रिप्ट परिवर्तन पृष्ठ को फिर से लोड करेंगे। कोशिश करो!

कहाँ पे? Live.js फ़ायरफ़ॉक्स, क्रोम, सफारी, ओपेरा और IE6 + में काम करता है जब तक अन्यथा साबित न हो। Live.js आपके द्वारा उपयोग किए जाने वाले विकास ढांचे या भाषा से स्वतंत्र है, चाहे वह रूबी, हैंडक्राफ्ट, पायथन, Django, NET, Java, Php, Drupal, Joomla या आपके पास है या नहीं।

मैंने इस उत्तर को यहाँ से लगभग शब्दशः कॉपी कर लिया, क्योंकि मुझे लगता है कि यह वर्तमान में स्वीकृत उत्तर की तुलना में आसान और सामान्य है।


5
आप इसे शीर्ष पर रख सकते हैं और अजगर का उपयोग भी कर सकते हैं -M SimpleHTTPServer आसान मटर
Marcel Valdez Orozco

2
एक वैकल्पिक PHP संस्करण हैphp -S localhost:8080
roryok

3
वहाँ भी है python3 -m http.server, साथ ही अन्य भाषाओं / उपकरणों के लिए और भी बहुत कुछ
carlwgeorge

1
वाह, यह बहुत साफ समाधान है। मुझे आश्चर्य है कि मुझे इसे खोजने के लिए दूर तक स्क्रॉल करना होगा।
त्रिगुट गुयेन

1
@arvixx यह स्थानीय फ़ाइलों के साथ काम करता है, जब तक कि आप एक स्थानीय http सर्वर चला रहे हैं (और http (s): //) का उपयोग करें। मैं मानता हूं कि यह फ़ाइल के साथ काम नहीं करता है: // uri योजना हालांकि, अगर आपका मतलब है। मार्सेल वाल्डेज़ ओरोज़्को के ऊपर एक टिप्पणी के लिए एक आसान तरीका देखें अपने स्थानीय निर्देशिका से तुरंत एक HTTP सर्वर बनाने के लिए।
लीकाईइंथेस्की

23

Tincr एक क्रोम एक्सटेंशन है जो पेज को तब भी रिफ्रेश करेगा जब फाइल में बदलाव नहीं होगा।


4
यह उपकरण अद्भुत है। अन्य बातों के अलावा, आप HTML / JS को रीफ़्रेश किए बिना किसी पृष्ठ पर CSS को रीफ़्रेश कर सकते हैं।
मुद

होनहार लग रहा है, लेकिन मैं एक jekyll परियोजना के लिए tincr तारों की कोशिश की - यह केवल मुझे परिवर्तन के लिए एक फ़ाइल देखने की अनुमति दी, शामिल नहीं, आंशिक या लेआउट परिवर्तन के लिए लेखांकन
lfender6445

3
दुर्भाग्य से, Tincr NPAPI का उपयोग करता है जो कि पदावनत है और क्रोम में डिफ़ॉल्ट रूप से अक्षम है (अप्रैल 2015 के बाद से)। और इसे जल्द ही पूरी तरह से हटा दिया जाएगा (Sep 2015)।
Jan Včelák

4
अब उपलब्ध नहीं है।
एनयू एवरेस्ट

2
मैं इसे exts की गैलरी में नहीं मिला था, लेकिन पाया गया कि DevTools स्वत: सहेजना
अस्पताल बुध

17

ओएस एक्स के लिए हैंडी बैश वन-लाइनर, यह मानते हुए कि आपने फ़ॉस्वाच ( 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'

अधिक जानकारी के लिए यहां देखें: https://stackoverflow.com/a/13807906/3510611


धन्यवाद! यह एकमात्र उत्तर है जो अगस्त 2017 में काम करता है! इसे उत्तर के रूप में चिह्नित किया जाना चाहिए।
उज्जवल-नधनी

सरल और उपयोगी
पेगासस

ठीक वही जो मेरे द्वारा खोजा जा रहा था! धन्यवाद!
ThisIsFlorianK

15

अपने दस्तावेज़ में एक एकल मेटा टैग जोड़ने के साथ, आप ब्राउज़र को दिए गए अंतराल पर स्वचालित रूप से पुनः लोड करने का निर्देश दे सकते हैं:

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

आपके दस्तावेज़ के मुख्य टैग के भीतर स्थित, यह मेटा टैग ब्राउज़र को हर तीन सेकंड में ताज़ा करने का निर्देश देगा।


यह स्थानीय फ़ाइलों के साथ भी काम करता है। मेरे लिए, यह सही उत्तर है।
pid

11

http://livereload.com/ - ओएस एक्स के लिए मूल ऐप, विंडोज के लिए अल्फा संस्करण। Https://github.com/livereload/LiveReload2 पर खुली हुई


2
शांत, लेकिन $ 10? वास्तव में? Yeesh।
एक भुगतान किया बेवकूफ

@a ने nerd का भुगतान किया, अगर यह काम करता है तो उचित लगता है। प्लस स्रोत वहीं है, इसलिए खरीदने से पहले प्रयास करें।
मार्क फॉक्स

1
एक मुफ्त लाइव रीलोड (आकस्मिक नाम टक्कर) ब्राउज़र एडऑन भी है जो मैंने बनाया है जो मुफ्त में ऐसा ही करता है: github.com/blaise-io/live-reload#readme
Blaise

7

ब्राउजर को फिर से लोड करने के लिए फाइल और ब्राउजर सिंक देखने के लिए गुलप का इस्तेमाल करें ।

कदम हैं:

कमांड लाइन में निष्पादित करें

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

Daud

गुलाल परोसें

HTML संपादित करें, अपने ब्राउज़र को पुनः लोड करें और देखें। मैजिक आपके HTML फ़ाइलों में विशेष टैग के ऑन-द-फ्लाई इंजेक्शन के माध्यम से किया जाता है।


2
तुम कहाँ gulpfile.js डालते हैं?
nu सदाबहार

अति उत्कृष्ट। ठीक वही जो मेरे द्वारा खोजा जा रहा था। धन्यवाद।
जेरेमी फिर 5


5

मुझे पता है कि यह एक पुराना सवाल है, लेकिन अगर यह किसी की मदद करता है, तो एक पुनः लोड एनपीएम पैकेज है जो इसे हल करता है।

उस स्थिति में जब आप इसे सर्वर पर नहीं चला रहे हैं या त्रुटि प्राप्त कर चुके हैं Live.js doesn't support the file protocol. It needs http.

बस इसे स्थापित करें:

npm install reload -g

और फिर अपने index.html निर्देशिका में, चलाएँ:

reload -b

यह एक सर्वर शुरू करेगा जो आपके परिवर्तनों को सहेजने के लिए हर बार ताज़ा करेगा।

यदि आप इसे सर्वर या किसी अन्य चीज़ पर चला रहे हैं तो कई अन्य विकल्प हैं। अधिक जानकारी के लिए संदर्भ देखें!


3

Os x और Chrome के लिए एक जावा ऐप है जिसे Refreschro कहा जाता है। यह स्थानीय फ़ाइल सिस्टम पर फ़ाइलों के दिए गए सेट की निगरानी करेगा और परिवर्तन का पता चलने पर Chrome को फिर से लोड करेगा:

http://neromi.com/refreschro/


1
29 अगस्त 2016 तक यह यहाँ पर सबसे आसान काम करने वाला विकल्प है। धन्यवाद!
21

मैक के लिए विश्वसनीय नहीं, स्थापित करने से इंकार करें
होश मर्करी

3

यदि आप GNU / Linux पर हैं, तो आप एक बहुत अच्छा ब्राउज़र का उपयोग कर सकते हैं, जिसे फ़ॉकन कहा जाता है । यह Qt WebEngine पर आधारित है । यह फ़ायरफ़ॉक्स या क्रोमियम की तरह ही है - सिवाय इसके कि यह किसी फ़ाइल के अपडेट होने पर पेज को ऑटो रिफ्रेश कर दे। ऑटो रिफ्रेश ज्यादा मायने नहीं रखता है कि आप vim, nano, या atom, vscode, ब्रैकेट, geany, माउस आदि का उपयोग करते हैं या नहीं।

आर्क लिनक्स पर, आप फाल्कॉन को बहुत आसानी से स्थापित कर सकते हैं:

sudo pacman -S falkon

यहाँ स्नैप पैकेज है।


2

एक त्वरित समाधान जो मैं कभी-कभी उपयोग करता हूं, स्क्रीन को दो में विभाजित करना है, और हर बार एक बदलाव किया जाता है, दस्तावेज़ xD पर क्लिक करें।

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

1

नोड.जेएस में, आप gulp.js + gulp-watch (एक कार्य धावक और क्रमशः श्रोता बदल सकते हैं) के साथ primus.js (websockets) तार कर सकते हैं, ताकि gulp आपके ब्राउज़र को यह पता कर सके कि जब भी html, js आदि, परिवर्तन। यह OS अज्ञेयवादी है और मेरे पास यह एक स्थानीय परियोजना में काम कर रहा है।

यहां, पृष्ठ को आपके वेब सर्वर द्वारा सेव किया गया है, डिस्क से फाइल के रूप में लोड नहीं किया गया है, जो वास्तव में वास्तविक चीज की तरह अधिक है।


क्या आप उस पृष्ठ का लिंक प्रदान कर सकते हैं जो यह दिखाता है कि यह कैसे करना है या बेहतर अभी तक हम में से उन लोगों के लिए चलाने के लिए कमांड का एक सेट जो नोड से परिचित नहीं है?
एनयू एवरेस्ट

1

यह मेरे लिए (उबंटू में) काम करता है:

#!/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

आपको अपने पसंदीदा ब्राउज़र और टर्मिनल के वास्तविक नामों के args को बदलने के लिए inotify और xdotool संकुल ( sudo apt-get install inotify-tools xdotoolउबंटू में) स्थापित करने की आवश्यकता हो सकती है --class

बताए अनुसार स्क्रिप्ट शुरू करें और एक ब्राउज़र में index.html खोलें। Vim में प्रत्येक सेव के बाद स्क्रिप्ट आपके ब्राउज़र की विंडो को फोकस करेगी, उसे रिफ्रेश करेगी और फिर टर्मिनल पर वापस आ जाएगी।


काम नहीं किया (मैं ऑटो रिफ्रेश क्रोम के लिए कोशिश कर रहा हूं), विशेष रूप से विंडो क्लास क्रोमियम के लिए खोज करने वाला xdotool हिस्सा, लेकिन मैं इसे काम में लाने में सक्षम था (xdotool हिस्सा जो है): xdotool search --name 127.0.0.1 windowactivate key F5स्थानीयहोस्ट (127.0 ) पर काम करने के लिए। 0.1) केवल, निश्चित रूप से। अब मुझे उस स्क्रिप्ट में वापस लौटना होगा।
रॉल्फ

1

सबसे अधिक लचीला समाधान जो मैंने पाया है वह है क्रोम लाइवरेलड एक्सटेंशन जिसे एक गार्ड सर्वर के साथ जोड़ा गया है ।

एक परियोजना में सभी फ़ाइलों को देखें, या केवल आपके द्वारा निर्दिष्ट। यहाँ एक नमूना गार्डफाइल विन्यास है:

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

नकारात्मक पक्ष यह है कि आपको इसे प्रति प्रोजेक्ट सेट करना होगा और यह मदद करेगा यदि आप माणिक से परिचित हों।

मैंने Tincr chrome एक्सटेंशन का भी उपयोग किया है - लेकिन यह फ्रेमवर्क और फ़ाइल संरचनाओं के लिए कसकर युग्मित प्रतीत होता है। (मैं एक jyyll परियोजना के लिए tincr वायरिंग की कोशिश की, लेकिन यह केवल मुझे परिवर्तनों के लिए एक फ़ाइल देखने की अनुमति देता है, जिसमें आंशिक या लेआउट परिवर्तन शामिल नहीं हैं)। Tincr हालांकि, रेल जैसी परियोजनाओं के साथ बड़े पैमाने पर काम करता है जिसमें निरंतर और पूर्वनिर्धारित फ़ाइल संरचनाएं होती हैं।

यदि यह सभी समावेशी मैच पैटर्न को फिर से लोड करने की अनुमति देता है, तो टिंचर एक शानदार समाधान होगा, लेकिन परियोजना अभी भी अपने फीचर सेट में सीमित है।


1

यह एक साधारण अजगर स्क्रिप्ट का उपयोग करके किया जा सकता है।

  1. किसी विशेष फ़ोल्डर की निगरानी के लिए pyinotify का उपयोग करें ।
  2. सक्षम डिबगिंग के साथ क्रोम का उपयोग करें। ताज़ा एक websocket कनेक्शन के माध्यम से किया जा सकता है।

पूर्ण विवरण यहां संदर्भित किया जा सकता है


1

OSX के लिए attekei के उत्तर पर आधारित:

$ 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फ़ाइलों की संख्या जो प्रत्येक परिवर्तन घटना में बदल गई है, प्रति पंक्ति एक आउटपुट। आमतौर पर यह सिर्फ प्रिंट होगा 1xargsउन 1एस को पढ़ता है और -n1इसका मतलब है कि यह एक नए निष्पादन के तर्क के रूप में प्रत्येक को पारित करता है osascript(जहां इसे अनदेखा किया जाएगा)।


1
यह वही है जिसकी मुझे तलाश थी, धन्यवाद! tab.title.includes(argv[0])सशर्त के रूप में उपयोग करते हुए मैं पृष्ठ शीर्षक पर मेल कर सकता हूं जो URL की तुलना में कम बारीक हो सकता है, और फ़ाइल के बजाय स्थानीय सर्वर का उपयोग करते समय काम करता है। //।
डेविड Mirabito

0

स्थापित करें और स्थापित करें chromix

अब इसे अपने में शामिल करें .vimrc

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

आपके द्वारा उपयोग किए जाने वाले पोर्ट को बदल दें


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

इस कोड को एक फाइल लिवरेलड.जेएस में सहेजें और इसे HTML स्क्रिप्ट के निचले भाग में शामिल करें:

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

यह क्या करेगा पृष्ठ को हर 100 मिली-सेकंड ताज़ा करता है। आपके द्वारा कोड में किए गए कोई भी परिवर्तन आंखों को तुरंत दिखाई देते हैं।


इस सवाल का जवाब नहीं है।
माइकल फुल्टन

हाँ सही है, लेकिन मुझे अभी भी लगता है कि यह उन स्थितियों में उपयोगी है जहाँ उपयोगकर्ता अपने HTML दस्तावेज़ को लगातार ताज़ा करना चाहता है। मैं आपकी ईमानदारी का सम्मान करता हूं सर।
बोस्नियाई कोडर

0

ठीक है, यहाँ मेरा क्रूड ऑटो हॉटकी समाधान है (लिनक्स पर, ऑटो की कोशिश करें )। जब सहेजें कीबोर्ड शॉर्टकट दबाया जाता है, तो ब्राउज़र को सक्रिय करें, फिर से लोड करें बटन पर क्लिक करें, फिर संपादक पर वापस जाएं। Im सिर्फ अन्य समाधान चल रहा है थक गया। अगर आपका संपादक ऑटोसैव करता है तो काम न करें।

^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

आर का उपयोग करके ऑफ़लाइन समाधान

यह कोड होगा:

  • दिए गए .html फ़ाइल का उपयोग करके एक स्थानीय सर्वर सेटअप करें
  • सर्वर एड्रेस लौटाएं, ताकि आप इसे एक ब्राउज़र में देख सकें।
  • ब्राउज़र को हर बार रीफ़्रेश करने के लिए .html-फ़ाइल में एक परिवर्तन सहेजा जाता है।

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

अजगर आदि के लिए भी इसी तरह के समाधान मौजूद हैं।


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 Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.