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

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

---

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

1. Go to Network tab in DevTools
2. Right click on the resource and select Replay XHR to repeat the request

Make sure that the Disable cache option is selected to force the reload.

---

For macOS Chrome:

1. Open developers tools cmd+alt+i
2. Click three dots on the top right corner in developers tools
3. Click settings
4. Scroll down to Network
5. Enable Disable cache (while DevTools is open) see screenshot:

---

Why is it needed to refresh the whole page? Just refresh only css files without reloading the page. It is very helpful when, for example, you have to wait a long response from DB. Once you get data from DB and populate the page, then edit your css files and reload them in Chrome (or in Firefox). To do that you need to install CSS Reloader extension. Firefox version is also available.

---

You can copy paste this script into Chrome console and it forces your CSS scripts to reload every 3 seconds. Sometimes I find it useful when I'm improving CSS styles.

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

---

Still an issue.

Using parameters like "..css?something=random-value" changes nothing in my customer-support experience. Only name changes works.

Another take on the file renaming. I use URL Rewrite in IIS. Sometimes Helicon's Isapi Rewrite.

Add new rule.

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

Note: I reserve the use of undercase to separate the name from the random number. Could be anything else.

Example:

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

(No styles folder it's just a name part of the pattern)

Output code as:

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

Redirect as:

(R:1 = template)

/template.css

Only the explanation is long.

---

Just had this problem where one person running Chrome (on a Mac) suddenly stopped loading the CSS file. CMD + R did NOT work at all. I don't like the suggestions above that force a permanent reload on the production system.

What worked was changing the name of the CSS file in the HTML file (and renaming the CSS file of course). This forced Chrome to go get the latest CSS file.

---

If you are using Sublime Text 3, using a build system to open the file opens the most current version and provides a convenient way to load it via [CTRL + B] To set up a build system that opens the file in chrome:

1. Go to 'Tools'

2. Hover your mouse over 'build system'. At the bottom of the list brought up, click 'New Build System...'

3. In the new build system file type this:

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

**provided the path stated above in the first set of quotes is the path to where chrome is located on your computer, if it isn't simply find the location of chrome and replace the path in the first set of quotes with the path to chrome on your computer.

---

I solved by this simple trick.

<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>

---

The most simplest way to achieve your goal is to open a new incognito window in your chrome or private window in firefox which will by default, not cache.

You can use this for development purposes so that you don't have to inject some random cache preventing code in your project.

If you are using IE then may god help you!

---

Ctrl + F5

Shift + F5

Both work

---

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

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

---

Safari 11.0에서 가장 쉬운 방법 macOS SIERRA 10.12.6 : 페이지 새로 고침 Origin에서 도움말을 사용하여 메뉴의 위치를 ​​찾거나 바로 가기 옵션 (alt) + command + R을 사용할 수 있습니다.

---

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

Ctrl+ R(또는) Ctrl+F5

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

참고 URL : https://stackoverflow.com/questions/15562384/how-to-force-chrome-browser-to-reload-css-file-while-debugging-in-visual-studio