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

后端未结

关注

 23  1951

半阙折子戏

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 ch

相关标签:

23条回答

萌比男神i

2020-12-12 12:34
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
终归单人心

2020-12-12 12:34
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

灰色年华

2020-12-12 12:34

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).

0 讨论(0)

没有蜡笔的小新

2020-12-12 12:34
```
(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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

时光取名叫无心

2020-12-12 12:34

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

0 讨论(0)

一整个雨季

2020-12-12 12:35
Install and set up chromix

Now add this to your .vimrc
```
autocmd BufWritePost *.html,*.js,*.css :silent ! chromix with http://localhost:4500/ reload
```
change the port to what you use
0 讨论(0)
发布评论:

提交评论
- 加载中...