Chrome에서 변경 사항을 html 파일에 저장할 때 브라우저를 자동으로 다시로드합니까?

106

저는 Vim에서 HTML 파일을 편집하고 있는데 아래에있는 파일이 변경 될 때마다 브라우저가 새로 고침되기를 원합니다.

파일 변경 사항을 수신하고 파일 변경 사항을 저장할 때마다 페이지를 자동으로 새로 고침하는 Chrome 용 플러그인이 있습니까? Firefox 용 XRefresh가 있다는 것을 알고 있지만 XRefresh를 전혀 실행할 수 없습니다.

직접 스크립트를 작성하는 것이 얼마나 어려울까요?

vim  google-chrome  automation 
— 케빈 버크
소스
2
— 치로 틸리가郝海东冠状病六四事件法轮功
모든 솔루션에 대한 시간을 찾은 후 내 자신의 코드를 작성했습니다. alexshulzhenko.ru/web-development-autorefresh-page-on-changes
— Tebe
나는 또한 나만의 코딩을한다 : Chrome 및 Firefox 용 Live Reload : github.com/blaise-io/live-reload#readme . 애드온의 소스 파일 URL 필드에서 호스트 URL을 반복하여 자신을 모니터링합니다.
— Blaise
훌륭한 확장 기능, @Blaise. 그러나 재장 전에 최소 0.5 초가 필요한 이유는 무엇입니까? 응답 성을 높이기 위해 0.1 초가 안되는 이유는 무엇입니까?
— Jay
@Jay 모니터링은 저렴하지 않기 때문에 서버는 0.1 초마다 응답을 생성해야하고 0.1 초마다 정적 파일의 해시를 생성해야합니다. 그러나 개발자 도구를 사용하여 0.5 초 미만을 허용하도록 양식을 편집 할 수 있습니다.
— Blaise

답변:

24

나는 당신이 OSX에 있지 않다고 생각합니까? 그렇지 않으면 applescript로 다음과 같이 할 수 있습니다.

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

x 초마다 새로 고침을 지정할 수있는 "자동 새로 고침 플러스"라는 크롬 용 플러그인도 있습니다.

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

— 밀키 포스트맨
소스
23
해당 플러그인은 로컬 파일 시스템을 감시하지 않고 대신 주기적으로 새로 고칩니다.
— Dan Dascalescu
브라우저를 크롬으로 변경할 때 오류가 발생했습니다. 이를 해결하려면 변경 keyword에 watch_keyword다음과 같은 라인 :if (URL of atab contains "#{keyword}") then
— 팀 조이스
와우! Chromium을 사용한 Dart-Development를위한 약간의 모드와 함께 첫 번째 링크 ( goo.gl/FZJvdJ ) 의 스크립트를 사용하고 있습니다 . 매력처럼 작동합니다!
— Mike Mitterer 2014
2
꽤 오래된 질문이지만 브라우저 동기화 가 바로 그 도구입니다.
— miha
81

순수한 JavaScript 솔루션!

Live.js

다음을 추가하십시오 <head>.

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

어떻게? Live.js 만 포함하면 연속 HEAD 요청을 서버에 전송하여 로컬 CSS 및 Javascript를 포함한 현재 페이지를 모니터링합니다. CSS 변경 사항은 동적으로 적용되고 HTML 또는 Javascript 변경 사항은 페이지를 다시로드합니다. 시도 해봐!

어디? Live.js는 달리 입증 될 때까지 Firefox, Chrome, Safari, Opera 및 IE6 +에서 작동합니다. Live.js는 Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla 또는 What-have-you 등 사용하는 개발 프레임 워크 또는 언어와 독립적입니다.

나는 여기 에서 현재 받아 들여지는 대답보다 쉽고 일반적이라고 생각하기 때문에이 대답을 거의 그대로 여기 에서 복사했습니다 .

— 리카 인 테 스키
소스
5
또한 상단에이를 넣을 수 있습니다 사용 파이썬 -m SimpleHTTPServer 쉬워요
— 마르셀 발데스 오 로즈 코
2
대체 PHP 버전은php -S localhost:8080
— roryok
3
이 또한 python3 -m http.server뿐만 아니라 다른 언어 / 도구에 대한 더 많은이 .
— carlwgeorge
1
와우, 이것은 매우 깔끔한 솔루션입니다. 나는 그것을 찾기 위해 여기까지 스크롤해야한다는 것에 놀랐다.
— Trieu Nguyen
1
@arvixx 로컬 http 서버를 실행하고 http (s) : //를 사용하는 한 로컬 파일에서 작동합니다. 나는 그것이 당신이 의미하는 바라면 file : // uri 체계와 작동하지 않는다는 데 동의합니다. 로컬 디렉토리에서 http 서버를 즉시 만드는 쉬운 방법은 위의 Marcel Valdez Orozco의 설명을 참조하십시오.
— leekaiinthesky 19 년
23

Tincr은 아래의 파일이 변경 될 때마다 페이지를 새로 고치는 Chrome 확장 프로그램입니다.

— 콘스탄틴 스피 린
소스
4
이 도구는 놀랍습니다. 무엇보다도 HTML / JS를 새로 고치지 않고 페이지의 CSS를 새로 고칠 수 있습니다.
— Mud
유망 해 보이지만 jekyll 프로젝트를 위해 tincr을 연결해 보았습니다. 포함, 부분 또는 레이아웃 변경을 고려하지 않고 단일 파일에서만 변경 사항을 볼 수있었습니다
— lfender6445
3
안타깝게도 Tincr은 더 이상 사용되지 않으며 Chrome에서 기본적으로 비활성화 된 NPAPI를 사용합니다 (2015 년 4 월 이후). 그리고 곧 완전히 제거 될 예정입니다 (2015 년 9 월).
— Jan Včelák 2015
4
더 이상 사용할 수 없습니다.
— nu everest
2
나는 EXTS의 갤러리를 찾았지만 발견되지 않았다 DevTools로 자동 저장
— 호 수성
17

fswatch ( brew install fswatch)를 설치했다고 가정하고 Handy Bash 한 줄 OS X 용 . 임의의 경로 / 파일을 감시하고 변경 사항이있을 때 활성 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'

fswatch에 대한 자세한 내용은 https://stackoverflow.com/a/13807906/3510611에서 확인하세요.

— 아테 케이
소스
감사합니다! 이것은 2017 년 8 월에 작동하는 유일한 답변입니다! 이것은 답으로 표시되어야합니다.
— Ujjwal-Nadhani
간단하고 usefule
— 페가수스
내가 찾던 바로 그것! 감사!
— ThisIsFlorianK
15

문서에 단일 메타 태그를 추가하면 제공된 간격으로 자동으로 다시로드하도록 브라우저에 지시 할 수 있습니다.

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

문서의 head 태그 내에 배치 된이 메타 태그는 브라우저가 3 초마다 새로 고침하도록 지시합니다.

— Alebagran
소스
이것은 로컬 파일에서도 작동합니다. 저에게는 이것이 정답입니다.
— pid
11

http://livereload.com/-OS X 용 기본 앱, Windows 용 알파 버전. https://github.com/livereload/LiveReload2 에서 오픈 소스

— 지빈
소스
2
멋지지만 10 달러? 정말? 네.
— 유료 괴상한
@a 유료 얼간이, 그것이 작동한다면 합리적으로 보입니다. 또한 소스가 바로 거기에 있으므로 구매하기 전에 시도하십시오.
— Mark Fox
1
내가 무료로 같은 일이 만든 무료 라이브 새로 고침 (실수로 이름 충돌) 브라우저의 부가 기능도있다 : github.com/blaise-io/live-reload#readme
— 블 레즈
7

Gulp 를 사용 하여 파일을보고 Browsersync 를 사용 하여 브라우저 를 다시로드합니다.

단계는 다음과 같습니다.

명령 줄에서 다음을 실행합니다.

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

운영

꿀꺽 꿀꺽

HTML을 편집하고 저장하고 브라우저를 다시로드합니다. 마법은 HTML 파일에 특수 태그를 즉시 삽입함으로써 이루어집니다.

— 콘스탄틴 스피 린
소스
2
gulpfile.js를 어디에 넣습니까?
— nu everest
우수한. 내가 찾던 바로 그것. 감사.
— Jeremy Then
5

LivePage 크롬 확장 프로그램은 쉽게 로컬 파일의 변경 사항을 모니터링하도록 설정할 수 있습니다.

— Serge Stroobandt
소스
5

나는 이것이 오래된 질문이라는 것을 알고 있지만 누군가에게 도움이된다면 다시로드가 있습니다. 그것을 해결 npm 패키지가 있습니다.

서버에서 실행 중이 아니거나 오류가 발생한 경우 Live.js doesn't support the file protocol. It needs http.

그냥 설치하세요 :

npm install reload -g

그런 다음 index.html 디렉토리에서 다음을 실행하십시오.

reload -b

변경 사항을 저장할 때마다 새로 고쳐지는 서버가 시작됩니다.

서버 또는 다른 곳에서 실행하는 경우 다른 많은 옵션이 있습니다. 자세한 내용은 참조를 확인하십시오!

— Alvaro
소스
3

Refreschro라는 OS X 및 Chrome 용 자바 앱이 있습니다. 로컬 파일 시스템에서 주어진 파일 집합을 모니터링하고 변경 사항이 감지되면 Chrome을 다시로드합니다.

http://neromi.com/refreschro/

— user2511839
소스
1
2016 년 8 월 29 일 현재 가장 쉬운 무료 작업 옵션입니다. 감사합니다!
— polpetti
맥의 경우 신뢰할 수없는, 설치를 거부
— 호 수성을
3

GNU / Linux를 사용하는 경우 Falkon 이라는 멋진 브라우저를 사용할 수 있습니다 . Qt WebEngine을 기반으로합니다 . Firefox 또는 Chromium과 비슷하지만 파일이 업데이트되면 페이지를 자동으로 새로 고칩니다. 자동 새로 고침은 vim, nano 또는 atom, vscode, 대괄호, geany, 마우스 패드 등을 사용하든별로 중요하지 않습니다.

Arch Linux에서는 Falkon을 매우 쉽게 설치할 수 있습니다.

sudo pacman -S falkon

여기 스냅 패키지가 있습니다.

— S.Goswami
소스
2

내가 가끔 사용하는 빠른 해결책은 화면을 두 개로 나누고 변경할 때마다 문서 xD를 클릭하는 것입니다.

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

node.js에서 gulp.js + gulp-watch (각각 작업 실행기 및 변경 리스너)를 사용하여 primus.js (웹 소켓)를 연결할 수 있으므로 gulp는 브라우저 창에서 html, js가 새로 고쳐 져야 함을 알 수 있습니다. 등 변경합니다. 이것은 OS에 구애받지 않으며 로컬 프로젝트에서 작동합니다.

여기서 페이지는 디스크에서 파일로로드되지 않고 웹 서버에 의해 제공되며 실제로는 실제와 비슷합니다.

— Matanster
소스
이 작업을 수행하는 방법 또는 노드에 익숙하지 않은 사용자를 위해 실행할 명령 집합을 보여주는 페이지에 대한 링크를 제공 할 수 있습니까?
— nu everest
1

이것은 나를 위해 작동합니다 (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

inotify 및 xdotool 패키지 ( sudo apt-get install inotify-tools xdotoolUbuntu에서) 를 설치 하고 args를 --class선호하는 브라우저 및 터미널의 실제 이름으로 변경 해야 할 수 있습니다 .

설명한대로 스크립트를 시작하고 브라우저에서 index.html을 엽니 다. vim에 저장할 때마다 스크립트는 브라우저 창에 초점을 맞추고 새로 고친 다음 터미널로 돌아갑니다.

— 스크립터
소스
작동하지 않았습니다 (크롬 자동 새로 고침을 시도 중입니다), 특히 창 클래스 크롬을 검색하는 xdotool 부분이 작동하도록 할 수 있었지만 (xdotool 부분) : xdotool search --name 127.0.0.1 windowactivate key F5localhost (127.0. 물론 0.1). 이제 스크립트에 다시 연결해야합니다.
— Rolf
1

내가 찾은 가장 유연한 솔루션 은 가드 서버 와 쌍을 이루는 Chrome LiveReload 확장 입니다. 입니다.

프로젝트의 모든 파일 또는 지정한 파일 만 감시합니다. 다음은 Guardfile 구성 샘플입니다.

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

단점은 프로젝트별로 이것을 설정해야하고 루비에 익숙하다면 도움이된다는 것입니다.

또한 Tincr 크롬 확장 프로그램을 사용했지만 프레임 워크 및 파일 구조와 밀접하게 결합 된 것으로 보입니다. (저는 jekyll 프로젝트를 위해 tincr을 연결하려고 시도했지만 포함, 부분 또는 레이아웃 변경을 고려하지 않고 변경 사항에 대해 단일 파일 만 볼 수있었습니다). 그러나 Tincr은 일관되고 사전 정의 된 파일 구조를 가진 레일과 같은 프로젝트에서 즉시 사용할 수 있습니다.

Tincr은 재로드에 대한 모든 포함 일치 패턴을 허용하면 훌륭한 솔루션이 될 수 있지만 프로젝트는 여전히 기능 세트가 제한적입니다.

— lfender6445
소스
1

이것은 간단한 파이썬 스크립트를 사용하여 수행 할 수 있습니다.

  1. 특정 폴더를 모니터링 하려면 pyinotify 를 사용하십시오 .
  2. 디버깅이 활성화 된 상태에서 Chrome을 사용합니다. 웹 소켓 연결을 통해 새로 고침을 수행 할 수 있습니다.

자세한 내용은 여기를 참조 하십시오 .

— 삭티 프리 얀 H
소스
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각 변경 이벤트에서 변경된 파일 수를 한 줄에 하나씩 출력합니다. 일반적으로 인쇄 1됩니다. xargs는 해당 1s를 읽고 -n1각각의 인수로 새 실행 osascript(무시 됨)에 대한 인수로 전달 함을 의미합니다 .

— Timmmm
소스
1
이것이 제가 찾던 것입니다. 감사합니다! tab.title.includes(argv[0])조건부로 사용하면 URL보다 덜 까다로울 수있는 페이지 제목에 일치시킬 수 있으며 file : // 대신 로컬 서버를 사용할 때 작동합니다.
— David 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);
})();

이 코드를 livereload.js 파일에 저장 하고 다음과 같이 HTML 스크립트 하단에 포함합니다.

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

이 작업은 100 밀리 초마다 페이지를 새로 고치는 것입니다. 코드에서 변경 한 사항은 즉시 눈에 보입니다.

— 보스니아 코더
소스
이것은 질문에 대한 답이 아닙니다.
— Michael Fulton
네 맞습니다.하지만 사용자가 자신의 HTML 문서를 지속적으로 새로 고침하려는 상황에서 여전히 유용하다고 생각합니다. 당신의 정직함을 존경합니다.
— Bosnian Coder
0

좋아, 여기 내 조잡한 Auto Hotkey 솔루션이 있습니다 (Linux에서는 Auto Key 시도 ). 때 저장 키보드 단축키를 누르면됩니다, 브라우저를 활성화, 클릭 다시로드 다시 편집기로 전환 버튼을 누릅니다. 다른 솔루션을 실행하는 데 지쳤습니다. 편집기가 자동 저장하면 작동하지 않습니다.

^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

R을 사용한 오프라인 솔루션

이 코드는 다음을 수행합니다.

  • 주어진 .html 파일을 사용하여 로컬 서버 설정
  • 브라우저에서 볼 수 있도록 서버 주소를 반환합니다.

  • .html 파일에 변경 사항이 저장 될 때마다 브라우저를 새로 고치십시오.

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

파이썬 등에 대한 유사한 솔루션이 있습니다.

— 라스무스 라르센
소스
0

HTML에 추가

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

편집하는 동안 브라우저 페이지가 흐리게 표시되어 다시보기로 전환하면 포커스 이벤트가 발생하고 페이지가 다시로드됩니다.

— Pinoyyid
소스
-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"을 실행하십시오.

— 페가수스
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.