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

Program / 글쓴이

현재 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. 브라우저 상단의 다시로드 버튼을 마우스 오른쪽 버튼으로 클릭하고 “빈 캐시 및 하드 다시로드”를 선택하십시오.

그게 다야!