Visual Studio에서 디버깅하는 동안 Chrome 브라우저에서 .css 파일을 다시로드하는 방법은 무엇입니까?

현재 Visual Studio 2012 내에서 .css 파일을 편집 중입니다 (디버그 모드). 브라우저로 Chrome을 사용하고 있습니다. Visual Studio 내에서 응용 프로그램의 .css 파일을 변경하고 저장하면 페이지를 새로 고치면 .css 파일의 업데이트 된 변경 내용이로드되지 않습니다. .css 파일이 여전히 캐시되어 있다고 생각합니다.

나는 시도했다 :

1. CTRL / F5
2. Visual Studio 2012의 프로젝트 속성으로 이동, 웹 탭 작업 시작 섹션에서 외부 프로그램 시작을 선택합니다. 붙여 넣기 또는 Chrome 경로를 찾습니다 (내 위치는 C : \ Users \ xxx \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe) 명령 줄 인수 상자에 -incognito를 넣습니다.
3. Chrome 개발자 도구를 사용하여 "기어"아이콘을 클릭하고 "캐시 비활성화"를 선택하십시오.

수동으로 디버깅을 중지하지 않고 (Chrome에서 종료) 응용 프로그램을 다시 시작하지 않으면 작동하지 않는 것 같습니다 (디버그).

Chrome에서 항상 모든 CSS 변경 사항을 다시로드하고 .css 파일을 다시로드하는 방법이 있습니까?

업데이트 :
1. 새로 고칠 때 .aspx 파일의 인라인 스타일 변경 사항이 적용됩니다. 그러나 .css 파일의 변경 사항은 그렇지 않습니다. 2. ASP.NET MVC4 앱이므로 GET을 수행하는 하이퍼 링크를 클릭합니다. 그렇게하면 스타일 시트에 대한 새로운 요청이 표시되지 않습니다. 그러나 F5를 클릭하면 .css 파일이 다시로드되고 네트워크 탭의 상태 코드는 200입니다.

훨씬 더 복잡한 솔루션이 있지만 매우 쉽고 간단한 방법은 CSS 포함에 무작위 쿼리 문자열을 추가하는 것입니다.

와 같은 src="/css/styles.css?v={random number/string}"

PHP 또는 다른 서버 측 언어를 사용하는 경우을 사용하여 자동으로 수행 할 수 있습니다 time(). 그래서 그것은styles.css?v=<?=time();?>

이런 식으로 쿼리 문자열은 매번 새로운 것입니다. 내가 말했듯이, 더 역동적 인 훨씬 더 복잡한 솔루션이 있지만 테스트 목적 으로이 방법이 최고입니다 (IMO).

크롬이 CSS와 js를 강제로 재로드하도록하려면 :

Windows 옵션 1 : CTRL+ SHIFT+ R
Windows 옵션 2 : SHIFT+F5

OS X : ⌘+ SHIFT+R

의견에 @PaulSlocum에 명시된대로 업데이트 (및 많은 확인)

원래 답변 :

Chrome에서 동작이 변경되었습니다. Ctrl+ R그렇게 할 것이다.

OS X에서 : ⌘+R

css / js 파일을 다시로드하는 데 문제가 있으면 다시로드 하기 전에 검사기 ( CTRL+ SHIFT+ C)를여십시오.

[아래 업데이트를 읽으십시오]

내가 찾은 가장 쉬운 방법은 Chrome DevTools 설정입니다. DevTools의 오른쪽 상단에있는 톱니 바퀴 아이콘 (또는 최신 버전에서는 3 개의 수직 점)을 클릭하여 "설정"대화 상자를 엽니 다. 거기에서 "캐시 비활성화 (DevTools가 열려있는 동안)"상자를 선택하십시오.

업데이트 : 이제이 설정이 이동되었습니다. "네트워크"탭에서 찾을 수 있으며 "캐시 비활성화"라는 확인란이 있습니다.

브라우저 캐시 문제를 해결하고 있습니다.

페이지 자체에서 캐시를 비활성화하십시오. 브라우저 / 캐시에 지원되는 페이지 파일을 저장하지 않습니다.

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1990 12:00:00 GMT" />

head디버깅하고있는 페이지의 head태그 또는 master page사이트의 태그에 삽입해야하는이 코드

브라우저가 파일을 캐시 할 수 없으므로 결국 파일이 브라우저 임시 파일에 저장되지 않으므로 캐시가 없으므로 다시로드 할 필요가 없습니다. :)

나는 이것이 할 것이라고 확신한다 :)

필자의 경우 Chrome DevTools 설정에서 "캐시 사용 안함 (DevTools가 열려있는 동안)"이 작동하지 않으면 "CSS 소스 맵 사용"및 "생성 된 CSS 자동 다시로드"를 확인해야합니다. 이 캐시 문제를 해결하기 위해

SHIFT+를 누릅니다 F5.

Chrome 버전 54에서 작동합니다.

나는 여기서 같은 문제에 직면했다! 그러나 나는 내 해상도가 위의 모든 예제보다 낫다는 것을 확신합니다.

1. F12를 눌러 Chrome 개발자 콘솔을 위로 당깁니다.
2. 브라우저 상단의 다시로드 버튼을 마우스 오른쪽 버튼으로 클릭하고 "빈 캐시 및 하드 다시로드"를 선택하십시오.

그게 다야!

macOS를 사용하면 Chrome에서 강제로 CSS 파일을 다시로드 할 수 있습니다

⌘+ SHIFT+R

이 의견은 여기 주석에 묻혀 있지만 더 많은 노출이 필요합니다.

현재 버전의 Chrome (55.x)은 페이지를 다시로드 할 때 모든 리소스를 다시로드하지 않습니다 (Command + R). 이는 .css 파일을 디버깅하는 데 유용하지 않습니다.

.html, .php, .etc 파일 만 디버그하려는 경우 Command + R이 제대로 작동하며 로컬 / 캐시 된 리소스 (.css, .js)와 함께 작동하므로 속도가 더 빠릅니다. 각 디버그 반복마다 브라우저 캐시를 수동으로 삭제하는 것은 편리하지 않습니다.

Mac에서 .css 파일을 강제로 다시로드하는 절차 (키보드 단축키 / Chrome) : Command + Shift + R

내가 사용하고 에지 버전 81.0.416.64 (공식 빌드) (64 비트)와 크롬 오픈 소스 프로젝트를 기반으로.을

을 눌러 F12개발자 도구로 들어갑니다.
네트워크 탭
확인 캐시 사용 안함을 클릭하십시오.

나는 그것이 오래된 질문이라는 것을 알고 있지만 누군가가 여전히 하나의 외부 CSS / JS 파일을 다시로드하는 방법을 찾고 있다면 Chrome에서 가장 쉬운 방법은 다음과 같습니다.

1. DevTools의 네트워크 탭 으로 이동
2. 자원을 마우스 오른쪽 단추로 클릭하고 XHR 재생을 선택 하여 요청을 반복하십시오.

강제로 다시로드하려면 캐시 사용 안함 옵션이 선택되어 있는지 확인하십시오 .

macOS Chrome의 경우 :

1. 개발자 도구 열기 cmd+ alt+i
2. 개발자 도구의 오른쪽 상단에서 세 개의 점을 클릭하십시오.
3. 클릭 설정
4. 아래로 스크롤 Network
5. Disable cache (while DevTools is open)스크린 샷 참조 활성화 :

전체 페이지를 새로 고쳐야하는 이유는 무엇입니까? 페이지를 다시로드하지 않고 CSS 파일 만 새로 고치십시오. 예를 들어 DB의 긴 응답을 기다려야 할 때 매우 유용합니다. DB에서 데이터를 가져 와서 페이지를 채우면 CSS 파일을 편집하여 Chrome (또는 Firefox)에 다시로드하십시오. 그렇게하려면 CSS Reloader 확장 을 설치해야합니다 . Firefox 버전도 제공됩니다.

이 스크립트를 복사하여 Chrome 콘솔에 붙여 넣으면 3 초마다 CSS 스크립트가 다시로드됩니다. CSS 스타일을 개선 할 때 유용한 경우가 있습니다.

var nodes = document.querySelectorAll('link');
[].forEach.call(nodes, function (node) {
    node.href += '?___ref=0';
});
var i = 0;
setInterval(function () {
    i++;

    [].forEach.call(nodes, function (node) {
        node.href = node.href.replace(/\?\_\_\_ref=[0-9]+/, '?___ref=' + i);
    });
    console.log('refreshed: ' + i);
},3000);

이 간단한 트릭으로 해결했습니다.

<script type="text/javascript">
  var style = 'assets/css/style.css?'+Math.random();;
</script>

<script type="text/javascript">
  document.write('<link href="'+style+'" rel="stylesheet">');
</script>

여전히 문제입니다.

"..css? something = random-value"와 같은 매개 변수를 사용하면 고객 지원 환경에서 아무것도 변경되지 않습니다. 이름 변경 만 가능합니다.

파일 이름을 바꾸는 또 다른 방법. IIS에서 URL 다시 쓰기를 사용합니다. 때때로 Helicon의 Isapi 다시 쓰기

새 규칙을 추가하십시오.

+ Name: lame-chrome-fix.
+ Pattern: styles/(\w+)_(\d+)
+ Rewrite URL: /{R:1}.css

참고 : 나는 이름을 임의의 숫자와 분리하기 위해 소문자를 사용합니다. 다른 것도있을 수 있습니다.

예:

<link href="https://stackoverflow.com/styles/template_<% 
Response.Write( System.DateTime.UtcNow.ToString("ddmmyyhhmmss")); %>" 
type="text/css" />

(스타일 폴더 없음 패턴의 이름 부분 일뿐)

다음과 같이 출력 코드 :

<link href="/styles/template_285316115328" 
rel="stylesheet" type="text/css">

다음으로 리디렉션 :

(R : 1 = 템플릿)

/template.css

설명 만 길다.

Mac에서 Chrome을 실행하는 한 사람이 갑자기 CSS 파일로드를 중단 한 경우이 문제가 발생했습니다. CMD + R은 전혀 작동하지 않았습니다. 프로덕션 시스템에서 영구적으로 다시로드하는 위의 제안이 마음에 들지 않습니다.

HTML 파일에서 CSS 파일의 이름을 변경하고 CSS 파일의 이름을 변경하는 것이 효과가있었습니다. 이로 인해 Chrome은 최신 CSS 파일을 가져 왔습니다.

Sublime Text 3을 사용하는 경우 빌드 시스템을 사용하여 파일을 열면 가장 최신 버전이 열리고 [CTRL + B]를 통해 파일을로드하는 편리한 방법을 제공합니다. 크롬으로 파일을 여는 빌드 시스템을 설정하려면 다음을 수행하십시오.

1. '도구'로 이동

2. '빌드 시스템'위에 마우스를 올려 놓습니다. 목록 하단에서 'New Build System ...'을 클릭하십시오.

3. 새 빌드 시스템 파일에서 다음을 입력하십시오.

   {"cmd": [ "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", "$file"]}

** 첫 번째 따옴표 세트에 위에서 언급 한 경로가 크롬의 위치를 ​​찾지 못하고 첫 번째 따옴표 세트의 경로를 경로로 대체하지 않는 경우 컴퓨터에서 크롬이 위치한 경로입니다. 컴퓨터의 크롬.

목표를 달성하는 가장 간단한 방법은 크롬 또는 비공개 창에서 파이어 폭스 에 새로운 시크릿 창 을 여는 것입니다. 캐시 창은 기본적으로 캐시가 아닙니다.

이를 개발 목적으로 사용하면 프로젝트에 임의의 캐시 방지 코드를 삽입 할 필요가 없습니다.

당신이 IE를 사용하는 경우 신이 당신을 도울 수 있습니다!

Ctrl + F5

Shift + F5

두 작품

Safari 11.0에서 가장 쉬운 방법 macOS SIERRA 10.12.6 : Reload Page Origin에서 메뉴의 위치를 ​​찾는 데 도움말을 사용하거나 단축키 옵션 (alt) + command + R을 사용할 수 있습니다.

Chrome/firefox/safari/IE 이 단축키로 전체 페이지를 다시로드합니다.

Ctrl+ R (또는) Ctrl+F5

그것이 당신을 도울 수 있기를 바랍니다!.

SiteGround를 호스팅 회사로 사용하고 있고 다른 솔루션이 작동하지 않는 경우 다음을 시도하십시오.

cPanel에서 "SITE IMPROVEMENT TOOLS"로 이동하여 "SuperCacher"를 클릭하십시오. 다음 페이지에서 "캐시 플러시"버튼을 클릭하십시오.