Visual Studio에서 디버깅하는 동안 Chrome 브라우저가 .css 파일을 강제로 다시 로드하도록 하는 방법은 무엇입니까?
현재 Visual Studio 2012(디버그 모드) 내부에서 .css 파일을 편집하고 있습니다.저는 크롬을 브라우저로 사용하고 있습니다.Visual Studio 내에서 응용 프로그램의 .css 파일을 변경하고 저장하면 .css 파일의 업데이트된 변경 내용과 함께 페이지를 새로 고치지 않습니다..css 파일은 아직 캐시되어 있는 것 같습니다.
시도해 본 결과:
- CTRL / F5
- Visual Studio 2012에서 프로젝트 속성으로 이동, 웹 탭 작업 시작 섹션에서 외부 프로그램 시작 선택 붙여넣기 또는 Google Chrome 경로 찾아보기(마인은 C:\Users\xxxx\AppData\Local\Google\Chrome\Application\chrome.exe) 명령줄 인수 상자에 -incognito를 넣습니다.
- Chrome 개발자 도구를 사용하여 "기어" 아이콘을 클릭하고 "캐시 비활성화"를 선택합니다.
수동으로 디버깅을 중지하고(Chrome에서 닫기), 응용 프로그램을 다시 시작하지 않으면(디버그에서) 아무것도 작동하지 않는 것 같습니다.
Chrome이 항상 모든 css 변경 사항을 다시 로드하고 .css 파일을 다시 로드하도록 강제할 수 있는 방법이 있습니까?
업데이트:
1. 새로 고치면 .aspx 파일의 인라인 스타일 변경 내용이 표시됩니다.은 2 .css은 2.ASP 입니다.NET MVC4 앱에서 하이퍼링크를 클릭하면 GET가 됩니다.그렇게 하니 스타일시트에 대한 새로운 요청이 보이지 않습니다.그러나 F5를 클릭하면 .css 파일이 다시 로드되고 상태 코드(네트워크 탭)가 200이 됩니다.
크롬을 강제로 실로드 CSS 및 JS에 적용하려면:
Windows 옵션 1: + +
Windows 옵션 2: +
OS X: + +
@PaulSlocum에서 댓글로 언급한 바와 같이 업데이트됨(그리고 다수 확인됨)
원래 답변:
크롬이 행동을 바꿨습니다.+ RCtrl 할R 겁니다.
OS X: +
CSS/js 파일을 다시 로드하는 데 문제가 있는 경우 다시 로드하기 전에 검사기(+CTRL + )를 엽니다.
훨씬 더 복잡한 해결책들이 있지만, 아주 쉽고 간단한 것은 단지 당신의 CSS에 임의의 쿼리 문자열을 추가하는 것입니다.
예를 들어src="/css/styles.css?v={random number/string}"
php나 다른 서버측 언어를 사용하는 경우 자동으로 다음을 사용할 수 있습니다.time(). 그래서 그럴 겁니다.styles.css?v=<?=time();?>
이렇게 하면 쿼리 문자열이 매번 새로워집니다.말씀드린 것처럼, 더 역동적인 훨씬 더 복잡한 솔루션이 있지만 테스트 목적에서는 이 방법이 최고(IMO)입니다.
[아래 업데이트 읽기]
제가 찾은 가장 쉬운 방법은 Chrome DevTools 설정입니다.DevTools의 오른쪽 상단에 있는 기어 아이콘(또는 최근 버전의 세로 점 3개)을 클릭하여 "Settings"(설정) 대화상자를 엽니다.거기에서 "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 설정에서 "캐시 비활성화(데브툴이 열려 있는 동안)" 설정만 작동하지 않으며, 소스 그룹에 나열된 "CSS 소스 맵 활성화" 및 "생성된 CSS 자동 재로드"를 확인해야 캐시 문제가 해결됩니다.
나는 여기서 같은 문제에 직면했어요! 하지만 저의 결심은 위의 모든 예들보다 낫습니다, 그냥 이것을 해보세요.
- F12를 눌러 Chrome 현상기 콘솔을 끌어올립니다.
- 브라우저 상단의 reload 버튼을 마우스 오른쪽 버튼으로 클릭하고 "Empty Cache and Hard Reload"를 선택합니다.
그거에요!
+ 를 누릅니다.F5
Chrome 버전 54에서 작동합니다.
저는 엣지 버전 81.0.416.64 (공식 빌드) (64비트)를 사용하고 있으며 크롬 오픈 소스 프로젝트를 기반으로 하고 있습니다.
Dev Tools로 들어가려면 누릅니다.
네트워크 탭 클릭
캐시 사용 안 함을 선택합니다.
macOS를 사용하면 Chrome이 CSS 파일을 다시 로드하도록 강제할 수 있습니다.
⌘ + SHIFT + R
여기 댓글에 묻혀있는 이 답변을 발견했지만 더 많은 노출을 받을 만했습니다.
현재 버전의 Chrome(55.x)은 페이지(명령어 + R)를 다시 로드할 때 모든 리소스를 다시 로드하지 않으며, 이는 .css 파일을 디버깅하는 데 유용하지 않습니다.
명령 + R은 .html, .php, .etc 파일만 디버그하려는 경우 잘 작동하며 로컬/캐시된 리소스(.css, .js)와 함께 작동하므로 더 빠릅니다.각 디버그 반복에 대해 브라우저의 캐시를 수동으로 삭제하는 것은 편리하지 않습니다.
Mac에서 .css 파일을 강제로 다시 로드하는 절차(키보드 바로가기/Chrome):명령 + 시프트 + R
오래된 질문이라는 것을 알지만, 여전히 하나의 외부 css/js 파일만 다시 로드하는 방법을 찾고 있는 사람이 있다면, 크롬에서 지금 가장 쉬운 방법은 다음과 같습니다.
- DevTools의 Network 탭으로 이동
- 리소스를 마우스 오른쪽 버튼으로 클릭하고 XHR 재생을 선택하여 요청을 반복합니다.
캐시 비활성화 옵션을 선택하여 다시 로드해야 합니다.
macOS Chrome의 경우:
- 오픈 디벨로퍼 도구 ++alti
- 개발자 도구에서 오른쪽 상단 모서리의 점 3개 클릭
- 클릭설정
- 아래로 스크롤
Network - 가능하게 하다
Disable cache (while DevTools is open)스크린샷 참조:
페이지 전체를 새로 고쳐야 하는 이유는 무엇입니까?페이지를 다시 로드하지 않고 CSS 파일만 새로 고치기만 하면 됩니다.예를 들어 DB의 응답을 오래 기다려야 할 때 큰 도움이 됩니다.DB에서 데이터를 얻고 페이지를 채우면 css 파일을 편집하여 Chrome(또는 Firefox)에서 다시 로드합니다.그러기 위해서는 CSS Loader 확장을 설치해야 합니다.파이어폭스 버전도 이용할 수 있습니다.
이 스크립트를 Chrome 콘솔에 복사할 수 있으며 CSS 스크립트를 3초마다 다시 로드하도록 강제합니다.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 Rwrite를 사용합니다.때때로 헬리콘의 아이사피 리라이트.
새 규칙을 추가합니다.
+ Name: lame-chrome-fix.
+ Pattern: styles/(\w+)_(\d+)
+ Rewrite URL: /{R:1}.css
참고: 이름과 난수를 구분하기 위해 언더케이스 사용을 예약합니다.다른 것도 될 수 있습니다.
예:
<link href="/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
설명만 길어요.
Ctrl을 누른 상태에서 다시 로드 버튼을 클릭합니다.또는 Ctrl을 누른 상태에서 F5를 누릅니다. F12를 눌러 Chrome Dev Tools를 엽니다.크롬 개발 도구가 열리면 새로 고침 버튼을 마우스 오른쪽 버튼으로 클릭하면 메뉴가 내려갑니다.
방금 Chrome을 실행하는 한 사람(Mac에서)이 갑자기 CSS 파일 로드를 중단하는 문제가 발생했습니다.CMD + R이 전혀 작동하지 않았습니다.생산 시스템에 영구적인 재장전을 강요하는 위의 제안들이 마음에 들지 않습니다.
작동한 것은 HTML 파일에서 CSS 파일의 이름을 바꾸는 것이었습니다(물론 CSS 파일의 이름을 바꾸는 것도 가능했습니다).이로 인해 Chrome은 최신 CSS 파일을 가져올 수 밖에 없었습니다.
Subravity Text 3을 사용하는 경우 빌드 시스템을 사용하여 파일을 열면 최신 버전이 열리고 [CTRL + B]를 통해 파일을 로드할 수 있는 편리한 방법을 제공합니다. 크롬으로 파일을 여는 빌드 시스템을 설정하려면:
'도구'로 이동
마우스를 '빌드 시스템' 위에 놓습니다.팝업된 목록 하단에서 'New Build System..'을 클릭합니다..'
새 빌드 시스템 파일에 다음을 입력합니다.
{"cmd": [ "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", "$file"]}
**첫 번째 견적 집합에서 위에 언급된 경로가 컴퓨터에서 크롬이 위치하는 경로라면, 단순히 크롬의 위치를 찾아서 첫 번째 견적 집합에서 크롬으로 연결되는 경로를 컴퓨터에서 크롬으로 연결하는 경로로 대체할 수 있습니다.
목표를 달성하기 위한 가장 간단한 방법은 기본적으로 캐시가 아닌 파이어폭스의 크롬 또는 개인 창에서 새로운 인지 창을 여는 것입니다.
프로젝트에 임의 캐시 방지 코드를 주입할 필요가 없도록 개발 목적으로 사용할 수 있습니다.
IE를 사용하고 있다면 신이 도와주시기 바랍니다!
Ctrl + F5
Shift + F5
둘다 일을 합니다.
Safari 11.0 macOS SIERA 10.12.6: 페이지를 오리진에서 다시 로드하기 메뉴의 위치를 도움말을 통해 확인하거나 단축 옵션(alt) + 명령 + R을 사용할 수 있습니다.
한 가지 방법은 크롬이 로컬 파일을 페이지의 파일에 매핑할 수 있게 해주는 크롬 "작업 공간"에 작업 디렉토리를 추가하는 것입니다.그런 다음 로컬 파일의 변경 사항을 감지하고 페이지를 실시간으로 업데이트합니다.
이 작업은 Devtools의 "Sources" 탭에서 수행할 수 있습니다.
파일 브라우저 사이드바에서 "파일 시스템" 탭을 클릭한 다음 +Plus 기호 버튼을 클릭하여 "작업영역에 폴더 추가"를 클릭합니다. 그러면 화면 상단에 로컬 파일 접근을 허용하거나 거부하는 배너가 나타납니다.
허용되면 폴더가 왼쪽의 "파일 시스템" 탭에 나타납니다.이제 Chrome은 파일 시스템 탭의 각 파일을 페이지의 파일과 연결하려고 시도합니다.페이지가 올바르게 작동하려면 페이지를 한 번 다시 로드해야 하는 경우가 있습니다.
이 작업이 완료되면 Chrome은 로컬 변경 사항을 선택하는 데 문제가 없을 것입니다. 사실 많은 경우 변경 사항을 가져오기 위해 다시 로드할 필요가 없으며 Devtools에서 직접 로컬 파일을 편집할 수 있습니다(CSS에 매우 유용하며 스타일 탭의 확인란을 전환하면 CSS 줄이 표시됩니다).
Chrome/firefox/safari/IE페이지 전체를 이 단축키로 다시 로드합니다.
+ RCtrl (ROR) +
도움이 되기를 바랍니다!
SiteGround를 호스팅 회사로 사용하고 있지만 다른 솔루션이 작동하지 않는 경우 다음을 시도하십시오.
cPanel에서 "Site Improvement TOOLS"로 이동하여 "SuperCacher"를 클릭합니다.다음 페이지에서 "Flash Cache" 버튼을 클릭합니다.
언급URL : https://stackoverflow.com/questions/15562384/how-to-force-chrome-browser-to-reload-css-file-while-debugging-in-visual-studio
'programing' 카테고리의 다른 글
| 문자열 비교 시 악센트가 있는 문자 무시 (0) | 2023.10.24 |
|---|---|
| CSS의 비율에 따라 색상을 더 밝게 또는 더 어둡게 동적으로 변경 (0) | 2023.10.24 |
| 워드프레스 MYSQL 오류 (0) | 2023.10.24 |
| MySQL 보기만 볼 수 있고 다른 보기는 볼 수 없는 권한을 사용자에게 부여합니다. (0) | 2023.10.24 |
| DateTime을 위한 사용자 지정 자바스크립트 컨버터? (0) | 2023.10.24 |