Auto-reload browser when I save changes to html file, in Chrome?

vim google-chrome automation

104,301

Solution 1

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:

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

Solution 2

Pure JavaScript solution!

Live.js

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.

Solution 3

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.

Solution 4

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

Solution 5

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!

View more solutions

104,301

Author by

Kevin Burke

I build reliable software and design great experiences. I'm available for hire: https://burke.services

Updated on February 16, 2022

Comments

Kevin Burke about 2 years

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?
a paid nerd about 12 years

Cool, but $10? Really? Yeesh.
Dan Dascalescu over 11 years

That plugin doesn't seem to watch the local filesystem, and will instead just refresh periodically.
Tim Joyce over 11 years

I was getting errors when changing the browser to chrome. To fix it, change the keyword to watch_keyword in the following line: if (URL of atab contains "#{keyword}") then
Mark Fox over 11 years

@a paid nerd, seems reasonable if it works. Plus the source is right there, so try before you buy.
Mud over 10 years

This tool is amazing. Among other things, you can refresh the CSS on a page without refreshing the HTML/JS.
Mike Mitterer about 10 years

Whau! I'm using the script from your first link (goo.gl/FZJvdJ) with some little mods for Dart-Development with Chromium. Works like a charm!
lfender6445 about 9 years

looks promising but I tried wiring up tincr for a jekyll project - it only allowed me to watch a single file for changes, not accounting for includes, partial or layout changes
Jan Včelák about 9 years

Unfortunately, Tincr uses NPAPI which is deprecated and is disabled in Chrome by default (since Apr 2015). And it will be entirely removed soon (Sep 2015).
Rolf about 9 years

Didn't work (I'm trying to auto-refresh chrome), specifically the xdotool part searching for window class chromium, but I was able to get this to work (the xdotool part that is): xdotool search --name 127.0.0.1 windowactivate key F5 for working on localhost (127.0.0.1) only, of course. Now I have to plug that back into the script.
miha about 8 years

It is a pretty old question, but browser-sync is the tool for exactly that.
nu everest almost 8 years

No longer available.
nu everest almost 8 years

Could you provide a link to a page that shows how to do this or better yet a set of commands to run for those of us not as familiar with node?
nu everest almost 8 years

Where do you put the gulpfile.js?
polpetti over 7 years

as of Aug 29 2016 this is the easiest free working option on here. Thank you!
mercury over 7 years

I did not found it in the gallery of exts , but found that DevTools Autosave
mercury over 7 years

Not trusted For mac , refuse to install
Marcel Valdez Orozco over 7 years

You can put this at the top and also use python -m SimpleHTTPServer easy peasy
roryok over 7 years

An alternative PHP version is php -S localhost:8080
mercury about 7 years

I think I may have an explanation. Having a look at the google groups for Tincr, it appears Tincr does not support html file refresh, and that it can only detect changes in either css or javascript. Copied from here (stackoverflow.com/questions/13930245/…)
Timmmm over 6 years

Here is Tincr but it only live-releads CSS and Javascript, not HTML.
Ujjwal-Nadhani over 6 years

Thank you! this is the only answer that works in August 2017! This should be marked as the answer.
carlwgeorge over 6 years

There is also python3 -m http.server, as well as many more for other languages/tools.
Blaise almost 6 years

There's also a free Live Reload (accidental name collision) browser addon that I created that does the same for free: github.com/blaise-io/live-reload#readme
leekaiinthesky over 4 years

@arvixx It does work with local files, as long as you are running a local http server (and use http(s)://). I agree it doesn't work with the file:// uri scheme though, if that's what you mean. See Marcel Valdez Orozco's comment above for one easy way to instantaneously create an http server from your local directory.
isherwood about 4 years

The last link by Timmmm is also obsolete.
David Mirabito almost 4 years

This is what I was looking for, thanks! Using tab.title.includes(argv[0]) as the conditional I can match on page title which can be less finicky than URL, and works when using a local server rather than file://.
pid almost 4 years

this also works with local files. For me, this is the correct answer.
Mikhail Golubitsky over 3 years

This works well for rapid prototyping; however since the refresh is scheduled (rather than responding to an on-save event) ability to use Chrome DevTools is limited.
user202729 almost 2 years

I think you need --allow-file-access-from-files for this to work on file://. More details. (also there's a little problem, if the file content changes between a refresh and the first fetch (which takes at least 1s in this implementation, then it will not be able to detect the change)
Manpreet Singh Dhillon almost 2 years

I wrote it while working with localhost. It is not for high demanding development environment. If you just want to avoid large scripts, third party tools or browser extensions for a small work, this may help to some extent.