I'm editing an HTML file in Vim and I want the browser to refresh whenever the file underneath changes.
Is there a plugin for Google Chrome that will listen for changes to the file and auto refresh the page every time I save a change to the file? I know there's XRefresh for Firefox but I could not get XRefresh to run at all.
How hard would it be to write a script to do this myself?
Pure JavaScript solution!
Just add the following to your <head>:
<script type="text/javascript" src="https://livejs.com/live.js"></script>
How? Just include Live.js and it will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server. Changes to CSS will be applied dynamically and HTML or Javascript changes will reload the page. Try it!
Where? Live.js works in Firefox, Chrome, Safari, Opera and IE6+ until proven otherwise. Live.js is independent of the development framework or language you use, whether it be Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla or what-have-you.
I copied this answer almost verbatim from here, because I think it's easier and more general than the currently accepted answer here.
With the addition of a single meta tag into your document, you can instruct the browser to automatically reload at a provided interval:
<meta http-equiv="refresh" content="3" >
Placed within the head tag of your document, this meta tag will instruct the browser to refresh every three seconds.
I know this is an old question but in case it helps someone, there is a reload npm package that solves it.
In case that you are not running it on a server or have received the error Live.js doesn't support the file protocol. It needs http.
Just install it:
npm install reload -g
and then at your index.html directory, run:
reload -b
It will start a server that will refresh every time you save your changes.
There are many other options in case you're running it on the server or anything else. Check the reference for more details!
Handy Bash one-liner for OS X, assuming that you have installed fswatch (brew install fswatch). It watches an arbitrary path/file and refreshes the active Chrome tab when there are changes:
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'
See more about fswatch here: https://stackoverflow.com/a/13807906/3510611
Update: Tincr is dead.
Tincr is a Chrome extension that will refresh the page whenever the file underneath changes.
I assume you're not on OSX? Otherwise you could do something like this with applescript:
http://brettterpstra.com/watch-for-file-changes-and-refresh-your-browser-automatically/
There is also a plugin for chrome called "auto refresh plus" where you can specify a reload every x seconds:
Use Gulp to watch the files and Browsersync to reload the browser.
The steps are:
In the command line execute
npm install --save-dev gulp browser-sync
Create gulpfile.js with the following contents:
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);
});
Run
gulp serve
Edit HTML, save and see your browser reload. The magic is done through on-the-fly injection of special tag into your HTML files.
http://livereload.com/ - native app for OS X, Alpha version for Windows. Open sourced at https://github.com/livereload/LiveReload2
If you are on GNU/Linux, you can use a pretty cool browser called Falkon. It's based on the Qt WebEngine. It's just like Firefox or Chromium - except, it auto refreshes the page when a file is updated. The auto refresh doesn't matter much whether you use vim, nano, or atom, vscode, brackets, geany, mousepad etc.
On Arch Linux, you can install Falkon pretty easily:
sudo pacman -S falkon
Here's the snap package.
Following couple of lines can do the trick:
var bfr = '';
setInterval(function () {
fetch(window.location).then((response) => {
return response.text();
}).then(r => {
if (bfr != '' && bfr != r) {
window.location.reload();
}
else {
bfr = r;
}
});
}, 1000);
This compares current response text with previously buffered response text after every second and will reload the page if there are any change in source code. You don't need any heavy duty plugins if you are just developing light weight pages.
If you are you are using visual studio code (which I highly recommend for Web Development), there is an extension by the name Live Server by Ritwick Dey with more than 9 million downloads. Just install it (recommended to restart vs code after that), and then just right-click on your main HTML file, there will be an option "open with Live Server", click it and your Website will be automatically open in a browser on a local server.
There is a java app for os x and Chrome called Refreschro. It will monitor a given set of files on the local file system and reload Chrome when a change is detected:
This works for me (in 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
You may need to install inotify and xdotool packages (sudo apt-get install inotify-tools xdotool in Ubuntu) and to change args of --class to the actual names of your preferred browser and terminal.
Start the script as described and just open index.html in a browser. After each save in vim the script will focus your browser's window, refresh it, and then return to the terminal.
In node.js, you can wire-up primus.js (websockets) with gulp.js + gulp-watch (a task runner and change listener, respectively), so that gulp lets your browser window know it should refresh whenever html, js, etc, change. This is OS agnostic and I have it working in a local project.
Here, the page is served by your web server, not loaded as a file from disk, which is actually more like the real thing.
The most flexible solution I've found is the chrome LiveReload extension paired with a guard server.
Watch all files in a project, or only the ones you specify. Here is a sample Guardfile config:
guard 'livereload' do
watch(%r{.*\.(css|js|html|markdown|md|yml)})
end
The downside is that you have to set this up per project and it helps if you're familiar with ruby.
I have also used the Tincr chrome extension - but it appears to be tightly coupled to frameworks and file structures. (I tried wiring up tincr for a jekyll project but it only allowed me to watch a single file for changes, not accounting for includes, partial or layout changes). Tincr however, works great out of the box with projects like rails that have consistent and predefined file structures.
Tincr would be a great solution if it allowed all inclusive match patterns for reloading, but the project is still limited in its feature set.
This can be done using a simple python script.
Full details can be referred here.
Based on attekei's answer for OSX:
$ brew install fswatch
Chuck all this into 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.");
}
That will reload the first tab that it finds that starts with file:// and ends with the first command line argument. You can tweak it as desired.
Finally, do something like this.
fswatch -o ~/path/to/watch | xargs -n1 osascript -l JavaScript reload.scpt myindex.html
fswatch -o outputs the number of files that have changed in each change event, one per line. Usually it will just print 1. xargs reads those 1s in and -n1 means it passes each one as an argument to a new execution of osascript (where it will be ignored).
A quick solution that I sometimes use is to divide the screen into two, and each time a change is made, click on the document xD .
<script>
document.addEventListener("click", function(){
window.location.reload();
})
</script>
Add this to your HTML
<script> window.addEventListener('focus', ()=>{document.location = document.location})</script>
While you are editing, your browser page is blurred, by switching back to look at it, the focus event is fired and the page reloads.
Ok, here is my crude Auto Hotkey solution (On Linux, try Auto Key). When the save keyboard shortcut gets pressed, activate the browser, click the reload button, then switch back to the editor. Im just tired of getting other solutions running. Wont work if your editor does autosave.
^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
Offline solution using R
This code will:
make the browser refresh everytime a change is saved to the .html-file.
install.packages("servr") servr::httw(dir = "c:/users/username/desktop/")
Similar solutions exist for python etc.
If you have Node installed on your computer, then you can use light-server.
Setp 1: Install light-server using command npm install -g light-server
Step 2: While current working directory is the folder containing the static HTML page, start light-server using command npx light-server -s . -p 5000 -w "*.css # # reloadcss" -w "*.html # # reloadhtml" -w "*.js # # reloadhtml"
Step 3: Open the web page in browser at http://localhost:5000
In Step 2,
Port can be changed using -p switch
Files that are being watched can be changed using -w switch
Server directory can be changed using -s switch
Documentation for light-server is at https://www.npmjs.com/package/light-server
Add this in your "head" section. change the time from 3000ms to any value which you prefer. A small hack to reload html file every 3secs. This is useful to me when I use vim + browser setup for JS development.
<script>
function autoreload() {
location.reload();
}
setInterval(autoreload, 3000);
</script>
Live reload works fine on js and css changes. However it was not working for laravel's blade templates. So I wrote a small script that checks for page changes and reloads if there is change. Am not sure if it is the best way, but it works. I used the script together with Live.js.
Here it is.
window.addEventListener("load", function(){
var current_url = window.location.href;
var current_data = httpGet(current_url);
var compone = current_data.length;
setInterval(function(){
var current_data_twos = httpGet(current_url);
var componecurrent_data_twos = current_data_twos.length;
if(compone !=componecurrent_data_twos ){
location.reload();
}
}, 1000);
});
function httpGet(theUrl)
{
let xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
return xmlhttp.responseText;
}
}
xmlhttp.open("GET", theUrl, false);
xmlhttp.send();
return xmlhttp.response;
}
If you're just updating an individual HTML file, Visual Studio Code (vscode) HTML Preview will automatically refresh on update -- it's quite seamless.
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' "
then just enter the directory you want to monitor execute "watch_refresh_chrome"
(function() {
setTimeout(function(){
window.location.reload(true);
}, 100);
})();
Save this code into a file livereload.js and include it at the bottom of the HTML script like so:
<script type="text/javascript" src="livereload.js"></script>
What will this do is refresh the page every 100 mili-seconds. Any changes you make in code are instantly visible to the eyes.
Live Reload Browser Page - tool 2022, for auto refreshing the browser page in real time for Google Chrome.
Additional features
auto refreshing the browser page in real time
auto HTML validation of the browser page
real-time alert on the browser page during web development
