Recarregar automaticamente o navegador ao salvar as alterações no arquivo html no Chrome?

106

Estou editando um arquivo HTML no Vim e quero que o navegador seja atualizado sempre que o arquivo abaixo for alterado.

Existe um plug-in para o Google Chrome que escute as alterações no arquivo e atualize automaticamente a página sempre que eu salvar uma alteração no arquivo? Eu sei que existe o XRefresh para Firefox, mas não consegui fazer o XRefresh rodar.

Seria muito difícil escrever um script para fazer isso sozinho?

vim google-chrome automation Kevin burke
fonte
2
Para Firefox: stackoverflow.com/questions/1346716/…
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Depois de procurar por algum tempo a solução de trabalhos em todos os lugares, codifiquei minha própria: alexshulzhenko.ru/web-development-autorefresh-page-on-changes
Tebe
Eu também codifico o meu próprio: Live Reload para Chrome e Firefox: github.com/blaise-io/live-reload#readme . Repita a URL do host no campo URL do arquivo de origem do complemento para monitorar a si mesmo.
Blaise
Excelente extensão, @Blaise. Mas por que existe um mínimo de 0,5 segundo para recarregar? Por que não 0,1 segundo para torná-lo mais responsivo?
Jay
@Jay Como o monitoramento não é barato, seu servidor teria que gerar uma resposta a cada 0,1s e um hash do arquivo estático a cada 0,1s. Mas você provavelmente pode editar o formulário usando ferramentas de desenvolvedor para permitir <0,5s.
Blaise

Respostas:

24

Presumo que você não esteja no OSX? Caso contrário, você poderia fazer algo assim com o applecript:

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

Há também um plug-in para o Chrome chamado "atualização automática plus", onde você pode especificar uma recarga a cada x segundos:

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

carteiro leitoso
fonte
23
Esse plugin não parece monitorar o sistema de arquivos local e, em vez disso, apenas atualiza periodicamente.
Dan Dascalescu
Eu estava recebendo erros ao mudar o navegador para o Chrome. Para corrigi-lo, altere o keywordpara watch_keywordna seguinte linha:if (URL of atab contains "#{keyword}") then
Tim Joyce
Uau! Estou usando o script do seu primeiro link ( goo.gl/FZJvdJ ) com alguns pequenos mods para Dart-Development com Chromium. Funciona como um encanto!
Mike Mitterer
2
É uma questão muito antiga, mas a sincronização do navegador é a ferramenta exatamente para isso.
miha
81

Solução JavaScript pura!

Live.js

Basta adicionar o seguinte ao seu <head>:

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

Quão? Basta incluir Live.js e ele monitorará a página atual, incluindo CSS e Javascript locais, enviando solicitações HEAD consecutivas para o servidor. As alterações no CSS serão aplicadas dinamicamente e as alterações de HTML ou Javascript recarregarão a página. Tente!

Onde? Live.js funciona no Firefox, Chrome, Safari, Opera e IE6 + até prova em contrário. Live.js é independente do framework de desenvolvimento ou linguagem que você usa, seja Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla ou sei lá o quê.

Copiei essa resposta quase literalmente daqui , porque acho que é mais fácil e geral do que a resposta aceita atualmente aqui.

leekaiinthesky
fonte
5
Você pode colocar isso no topo e também usar python -m SimpleHTTPServer easy peasy
Marcel Valdez Orozco
2
Uma versão alternativa do PHP éphp -S localhost:8080
roryok
3
Também existe python3 -m http.server, assim como muitos outros, para outras linguagens / ferramentas .
carlwgeorge
1
Uau, essa é uma solução muito legal. Estou surpreso por ter que rolar até aqui para encontrá-lo.
Trieu Nguyen
1
@arvixx Funciona com arquivos locais, desde que você esteja executando um servidor http local (e use http (s): //). Eu concordo que não funciona com o esquema file: // uri, se é isso que você quer dizer. Consulte o comentário de Marcel Valdez Orozco acima para obter uma maneira fácil de criar instantaneamente um servidor http a partir de seu diretório local.
leekaiinthesky
23

Tincr é uma extensão do Chrome que irá atualizar a página sempre que o arquivo abaixo for alterado.

Konstantin Spirin
fonte
4
Essa ferramenta é incrível. Entre outras coisas, você pode atualizar o CSS em uma página sem atualizar o HTML / JS.
Lama de
parece promissor, mas eu tentei conectar o tincr para um projeto jekyll - ele só me permitiu assistir a um único arquivo em busca de alterações, sem
levar em consideração inclusões,
3
Infelizmente, o Tincr usa NPAPI que está obsoleto e está desativado no Chrome por padrão (desde abril de 2015). E será totalmente removido em breve (setembro de 2015).
Jan Včelák
4
Não está mais disponível.
nu Everest
2
Eu não encontrei na galeria de exts, mas descobri que DevTools Autosave
Hos Mercury
17

Handy Bash one-liner para OS X, assumindo que você instalou o fswatch ( brew install fswatch). Ele observa um caminho / arquivo arbitrário e atualiza a guia ativa do Chrome quando há alterações:

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'

Veja mais sobre o fswatch aqui: https://stackoverflow.com/a/13807906/3510611

Attekei
fonte
Obrigado! esta é a única resposta que funciona em agosto de 2017! Isso deve ser marcado como a resposta.
Ujjwal-Nadhani
simples e útil
Pegasus de
Exatamente o que eu estava procurando! Obrigado!
ThisIsFlorianK
15

Com a adição de uma única metatag em seu documento, você pode instruir o navegador a recarregar automaticamente em um intervalo fornecido:

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

Colocado na tag head do seu documento, esta meta tag instruirá o navegador a atualizar a cada três segundos.

alebagran
fonte
isso também funciona com arquivos locais. Para mim, esta é a resposta correta.
pid
11

http://livereload.com/ - aplicativo nativo para OS X, versão Alpha para Windows. Código aberto em https://github.com/livereload/LiveReload2

Jibin
fonte
2
Legal, mas $ 10? Realmente? Sim.
um nerd pago de
@ um nerd pago, parece razoável se funcionar. Além disso, a fonte está ali, então experimente antes de comprar.
Mark Fox
1
Há também um addon de navegador gratuito Live Reload (colisão acidental de nomes) que criei que faz o mesmo gratuitamente: github.com/blaise-io/live-reload#readme
Blaise
7

Use o Gulp para assistir os arquivos e o Browsersync para recarregar o navegador.

As etapas são:

Na linha de comando execute

npm install --save-dev gulp browser-sync

Crie gulpfile.js com o seguinte conteúdo:

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

Corre

gulp serve

Edite o HTML, salve e veja o seu navegador recarregar. A mágica é feita por meio da injeção instantânea de tags especiais em seus arquivos HTML.

Konstantin Spirin
fonte
2
Onde você coloca o gulpfile.js?
nu everest
Excelente. Exatamente o que eu estava procurando. Obrigado.
Jeremy Then
5

A extensão LivePage do Chrome pode ser facilmente configurada para monitorar alterações em arquivos locais.

Serge Stroobandt
fonte
5

Eu sei que essa é uma pergunta antiga, mas caso ajude alguém, existe um pacote npm de recarregamento que resolve isso.

Caso você não esteja executando em um servidor ou tenha recebido o erro Live.js doesn't support the file protocol. It needs http.

Basta instalar:

npm install reload -g

e em seu diretório index.html, execute:

reload -b

Ele iniciará um servidor que será atualizado sempre que você salvar suas alterações.

Existem muitas outras opções caso você esteja executando no servidor ou qualquer outra coisa. Verifique a referência para mais detalhes!

Alvaro
fonte
3

Existe um aplicativo java para os xe Chrome chamado Refreschro. Ele monitorará um determinado conjunto de arquivos no sistema de arquivos local e recarregará o Chrome quando uma alteração for detectada:

http://neromi.com/refreschro/

user2511839
fonte
1
a partir de 29 de agosto de 2016, esta é a opção de trabalho livre mais fácil aqui. Obrigado!
polpetti
Não confiável Para mac, recuse a instalação
Hos Mercury
3

Se você estiver no GNU / Linux, pode usar um navegador muito legal chamado Falkon . É baseado no Qt WebEngine . É como o Firefox ou Chromium - exceto, ele atualiza automaticamente a página quando um arquivo é atualizado. A atualização automática não importa muito se você usa vim, nano ou atom, vscode, colchetes, geany, mousepad etc.

No Arch Linux, você pode instalar o Falkon com bastante facilidade:

sudo pacman -S falkon

Aqui está o pacote de encaixe.

S.Goswami
fonte
2

Uma solução rápida que às vezes utilizo é dividir a tela em duas, e cada vez que for feita uma alteração, clique no documento xD.

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

Em node.js, você pode conectar primus.js (websockets) com gulp.js + gulp-watch (um executor de tarefas e um ouvinte de mudança, respectivamente), de modo que o gulp permita que a janela do navegador saiba que deve atualizar sempre que html, js , etc, mudar. Este é o sistema operacional agnóstico e estou trabalhando em um projeto local.

Aqui, a página é servida por seu servidor web, não carregada como um arquivo do disco, que na verdade é mais parecido com a coisa real.

matanster
fonte
Você poderia fornecer um link para uma página que mostra como fazer isso ou, melhor ainda, um conjunto de comandos para executar para aqueles de nós não tão familiarizados com o nó?
nu everest
1

Isso funciona para mim (no 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

Você pode precisar instalar os pacotes inotify e xdotool ( sudo apt-get install inotify-tools xdotoolno Ubuntu) e alterar os args --classpara os nomes reais de seu navegador e terminal preferidos.

Inicie o script conforme descrito e apenas abra index.html em um navegador. Após cada salvamento no vim, o script focalizará a janela do seu navegador, atualizará e retornará ao terminal.

scripter
fonte
Não funcionou (estou tentando atualizar automaticamente o cromo), especificamente a parte xdotool procurando pela classe de janela chromium, mas consegui fazer isso funcionar (a parte xdotool que é): xdotool search --name 127.0.0.1 windowactivate key F5para trabalhar no localhost (127.0. 0.1) apenas, é claro. Agora preciso conectar isso de volta ao script.
Rolf
1

A solução mais flexível que encontrei é a extensão Chrome LiveReload emparelhada com um servidor de guarda .

Observe todos os arquivos em um projeto ou apenas aqueles que você especificar. Aqui está um exemplo de configuração do Guardfile:

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

A desvantagem é que você precisa configurar isso por projeto e ajuda se você estiver familiarizado com ruby.

Também usei a extensão do cromo Tincr - mas ela parece estar fortemente acoplada a frameworks e estruturas de arquivo. (Eu tentei conectar o tincr para um projeto jekyll, mas ele só me permitiu assistir um único arquivo para alterações, sem levar em conta as inclusões, alterações parciais ou de layout). O Tincr, entretanto, funciona muito bem fora da caixa com projetos como trilhos que possuem estruturas de arquivo predefinidas e consistentes.

O Tincr seria uma ótima solução se permitisse todos os padrões de correspondência inclusivos para recarregar, mas o projeto ainda é limitado em seu conjunto de recursos.

lfender6445
fonte
1

Isso pode ser feito usando um script python simples.

  1. Use o pyinotify para monitorar uma pasta específica.
  2. Use o Chrome com a depuração ativada. A atualização pode ser feita por meio de uma conexão de websocket.

Detalhes completos podem ser consultados aqui .

Sakthi Priyan H
fonte
1

Com base na resposta de attekei para OSX:

$ brew install fswatch

Jogue tudo isso em 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.");
}

Isso recarregará a primeira guia que encontrar que começa file://e termina com o primeiro argumento da linha de comando. Você pode ajustá-lo conforme desejado.

Finalmente, faça algo assim.

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

fswatch -oproduz o número de arquivos que foram alterados em cada evento de alteração, um por linha. Normalmente, será apenas impresso 1. xargslê esses 1s em e -n1significa que passa cada um como um argumento para uma nova execução de osascript(onde será ignorado).

Timmmm
fonte
1
Isso é o que eu estava procurando, obrigado! Usando tab.title.includes(argv[0])como condicional, posso corresponder no título da página, que pode ser menos complicado do que URL, e funciona ao usar um servidor local em vez de file: //.
David Mirabito
0

Instale e configure chromix

Agora adicione isso ao seu .vimrc

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

mude a porta para o que você usa

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

Salve este código em um arquivo livereload.js e inclua-o na parte inferior do script HTML da seguinte forma:

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

O que isso fará é atualizar a página a cada 100 milissegundos. Todas as alterações feitas no código são instantaneamente visíveis aos olhos.

Bosnian Coder
fonte
Isso não responde à pergunta.
Michael Fulton
Sim correto, mas ainda acho que é útil em situações em que o usuário deseja atualização constante de seu documento HTML. Eu respeito sua honestidade, senhor.
Bosnian Coder
0

Ok, aqui está minha solução crua de Auto Hotkey (no Linux, tente Auto Key ). Quando o atalho de teclado para salvar for pressionado, ative o navegador, clique no botão recarregar e volte para o editor. Estou cansado de colocar outras soluções em execução. Não funcionará se o seu editor salvar automaticamente.

^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
fonte
0

Solução offline usando R

Este código irá:

  • configurar um servidor local usando o arquivo .html fornecido
  • retornar o endereço do servidor, para que você possa assisti-lo em um navegador.

  • faça o navegador atualizar toda vez que uma alteração for salva no arquivo .html.

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

Existem soluções semelhantes para python etc.

Rasmus Larsen
fonte
0

Adicione isso ao seu HTML

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

Enquanto você está editando, a página do navegador fica borrada, ao voltar para visualizá-la, o evento de foco é disparado e a página recarregada.

pinoyyid
fonte
-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' "

em seguida, basta entrar no diretório que deseja monitorar, execute "watch_refresh_chrome"

Pegasus
fonte