웹사이트 개발을 위해 Chrome 캐시 비활성화

질문자 :tomermes

사이트의 외형(CSS 수정)을 수정하고 있는데 성가신 영구캐시 때문에 크롬에서 결과를 볼 수 없습니다. Shift + 새로 고침을 시도했지만 작동하지 않습니다.

캐시를 일시적으로 비활성화하거나 변경 사항을 볼 수 있는 방식으로 페이지를 새로 고치려면 어떻게 해야 합니까?

Chrome DevTools는 캐시를 비활성화할 수 있습니다.

1. 마우스 오른쪽 버튼을 클릭 하고 Inspect Element 선택하여 DevTools를 엽니다. 또는 다음 키보드 단축키 중 하나를 사용하십시오.

• F12
• 컨트롤 + 쉬프트 + 나
• 커맨드 + 쉬프트 + 나

1. Network 를 클릭 하여 네트워크 창을 엽니다.
2. 체크 Disable cache 상단에있는 체크 박스를.

@ChromiumDev 의 트윗 에서 언급했듯이 이 설정은 devtools가 열려 있는 동안에만 활성화 됩니다.

그러면 모든 리소스가 다시 로드됩니다. 일부 리소스에 대해서만 캐시를 비활성화하려는 경우 서버가 파일과 함께 보내는 HTTP 헤더를 수정할 수 있습니다.

Disable cache 확인란을 사용하지 않으려 는 경우 DevTools가 열린 상태 에서 새로 고침 버튼을 길게 누르면 유사한 효과가 있어야 하는 Hard Reload 또는 Empty Cache and Hard Reload 로드 옵션이 있는 메뉴가 표시됩니다. 어떤 옵션을 선택해야 하는지 알아 보려면 옵션 간의 차이점 에 대해 읽어보세요. 다음 바로 가기를 사용할 수 있습니다.

• Mac의 경우 Command + Option + R
• Windows 또는 Linux에서 Control + Shift + R

Steve

1시간에 30번씩 캐시를 비워야 하는 상황에서 캐시를 지우는 것은 너무 귀찮아서.. 그래서 페이지를 로드할 때마다 캐시를 지우는 Classic Cache Killer라는 Chrome 확장 프로그램을 설치했습니다.

Chrome Store Link(무료) (이제 멀웨어 없이!)

이제 내 모의 json, javascript, css, html 및 데이터는 페이지가 로드 될 때 마다 새로 고쳐집니다.

내 캐시를 취소해야 할 경우 나는 걱정하지 않는다.

내가 찾은 Chrome용 캐시 클리너는 약 20가지가 있지만 이것은 가볍고 노력이 없어 보였습니다. 업데이트에서 캐시 킬러는 이제 "항상 켜짐" 상태를 유지할 수 있습니다.

참고: 플러그인 작성자를 전혀 모릅니다. 방금 유용했습니다.

dano

1. F12 키 를 누른 다음 (콘솔이 열린 상태에서) Chrome 개발자 콘솔을 불러옵니다.

2. 브라우저 상단의 새로고침 버튼을 마우스 오른쪽 버튼으로 클릭(또는 왼쪽 클릭)하고 "캐시 비우기 및 하드 다시 로드"를 선택합니다.

이것은 캐시를 완전히 비우기 위해 "하드 리로드"를 넘어 자바스크립트 등을 통해 다운로드한 모든 항목에서도 캐시 사용을 방지합니다. 설정이나 다른 것을 엉망으로 만들 필요가 없습니다. 빠른 원샷 솔루션입니다.

JackArbiter

Chrome에서 페이지 캐싱 을 비활성화하는 두 가지 옵션이 더 있습니다.

1. 레지스트리에서 Chrome 캐시 비활성화

레지스트리 열기(시작 -> 명령 -> Regedit)

검색: HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command

...chrom.exe" 뒤의 부분을 다음 값으로 변경합니다. –disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

예: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"

중요한:

• ...chrome.exe 뒤에 공백과 하이픈이 있습니다."

• chrome.exe의 경로를 그대로 둡니다.

• 줄을 복사할 경우 따옴표가 실제 따옴표인지 확인하십시오.

2. 바로가기 속성을 변경하여 Chrome 캐시 비활성화

Chrome 아이콘을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 "속성"을 선택합니다. 경로에 다음 값을 추가합니다. –disk-cache-size=1

예: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" –disk-cache-size=1

중요한:

• ...chrome.exe 뒤에 공백과 하이픈이 있습니다."

• chrome.exe의 경로를 그대로 둡니다.

user2653348

Chrome 설정을 수정하지 않으려면 동일한 결과에 대해 시크릿 모드를 사용할 수 있습니다.

basickarl

개발자 도구 창의 오른쪽 하단 모서리에 있는 버튼을 통해 얻을 수 있는 캐시 비활성화 옵션(도구 | 개발자 도구 또는 Ctrl + Shift + I ) 외에도 개발자 도구의 네트워크 창에서 다음을 수행할 수 있습니다. 이제 마우스 오른쪽 버튼을 클릭하고 팝업 메뉴에서 "캐시 지우기"를 선택하십시오.

Tim Keating

1. F12 를 눌러 Chrome DevTools 열기
2. F1 을 눌러 DevTools 설정 열기
3. 아래와 같이 캐시 비활성화(DevTools가 열려 있는 동안) 를 선택합니다.

이것은 현재 기본값인 기본 설정 탭에 있습니다. 아래로 스크롤해야 할 수도 있습니다. 이 체크박스는 이 질문을 받은 이후로 최소 몇 번 이동되었습니다. 마지막으로 확인해보니 하단 중간 칸에 있었습니다. 더 얇은 화면에서 열고 기본 설정 아래에 2개의 열이 있는 경우 오른쪽 상단 근처에 있을 수 있습니다. 이 게시물이 변경되면 자유롭게 업데이트하거나 댓글을 달아주시면 게시물을 업데이트하겠습니다.

Tony L.

"F5"를 누르는 대신 다음을 누르십시오.

"Ctrl + F5"

Arvand

Canary 채널(그리고 아마도 dev 및 stable 채널이 뒤따를 것입니다)에서 이것은 "일반" 섹션의 왼쪽에서 전체적으로 두 번째 옵션으로 찾을 수 있습니다.

그 외에도 Ctrl + Shift + N을 통해 시크릿 모드로 전환하는 옵션이 항상 있습니다. 불행히도 세션이 종료되지만.

Bruiser

Ctrl + Shift + R 을 사용하여 새로 고침하는 것은 좋았지만 필요한 모든 것을 얻지는 못했습니다. js 및 CSS에 저장된 데이터와 같은 일부 항목은 새로 고쳐지지 않습니다. 해결책을 찾았습니다: 크롬 웹 개발자를 위한 구글 툴바 . 도구 모음을 설치한 후 옵션과 "페이지 재설정"을 선택하십시오.

tomermes

분명히 하기 위해 Chrome의 캐시 비활성화 확인란(여기서는 v17이지만 v15 이후로 생각합니다)은 기본 설정 UI에 없습니다. 개발자 도구 설정 UI에 있습니다.

1. 브라우저 창의 렌치 아이콘 메뉴(기본 설정 메뉴)에서 도구 → 개발자 도구를 선택합니다.

2. 표시되는 개발자 도구 UI에서 오른쪽 하단의 톱니바퀴 아이콘을 클릭합니다.

3. 네트워크 섹션에서 '캐시 비활성화' 확인란을 선택합니다.

Mason

크롬에서 캐시 비활성화는 개발자 도구가 열려 있을 때만 작동합니다.

jamiethepiper

버그가 수정될 때까지 Clear Cache Chrome 플러그인을 사용할 수 있으며 키보드 단축키를 설정할 수도 있습니다.

설치 후 마우스 오른쪽 버튼을 클릭하고 옵션으로 이동하십시오.

Automatically reload active tab after clearing data 하십시오.

기간에 대해 Everything 선택:

그런 다음 메뉴 => 도구 => 확장으로 이동할 수 있습니다.

하단의 키보드 단축키를 클릭하십시오.

그리고 키보드 단축키를 설정합니다(예: Ctrl + Shift + R) .

Răzvan Flavius Panda

실제로 대역폭 사용에 신경 쓰지 않는다면 여러 가지 이유로 캐싱을 비활성화하고 많은 보안 사이트에서 권장하는 것이 더 안전합니다.

Chromium은 사용자에게 결정을 내리고 설정을 적용할 만큼 거만해서는 안 됩니다.

--disk-cache-dir=/dev/null을 사용하여 UNIX에서 캐시를 비활성화할 수 있습니다.

이것은 예기치 않은 충돌이 발생할 수 있지만 그렇게 하면 어떤 경우에도 수정되어야 하는 더 심각한 버그를 분명히 가리킬 것입니다.

Kevin Chadwick

이것은 누군가를 도울 수 있습니다.

나는 미친 캐싱을 위해 내 Nginx를 조작했습니다. 따라서 네트워크 도구에서 캐시를 비활성화하고 캐시를 명시적으로 지우면 작동하지 않습니다.

매우 간단하지만 지루한 해결 방법은 새 시크릿 탭을 여는 것입니다. 놀랍게도 항상 작동합니다!

시크릿 모드의 하드 새로고침은 동일한 모드에서 다시 로드하고 싶을 때마다 트릭을 수행합니다.

KhoPhi

페이지 캐싱을 방지하기 위해 페이지 이름을 변경하는 북마크는 어떻습니까? Chrome에서는 새 책갈피를 만든 다음 코드를 URL에 붙여넣습니다. 책갈피를 클릭하면 페이지가 캐시를 방해하는 타임스탬프와 함께 다시 로드됩니다.

 javascript:(function(){var idx = location.href.indexOf('?');var d = new Date();var str = location.href.substr(0,idx) + '?version=' + d.getTime();location.href=str; void 0;})();

mbokil

방금 잡혔지만 반드시 Chrome으로 인한 것은 아닙니다.

jQuery를 사용하여 AJAX 요청을 만들고 있습니다. 요청에서 캐시 속성을 true로 설정했습니다.

 $.ajax({ type: 'GET', cache: true, ....

이것을 false로 설정하면 내 문제가 해결되었지만 이것은 이상적이지 않습니다.

이 데이터가 저장되는 위치를 모르지만 크롬이 요청에 대해 서버에 도달하지 않는다는 것을 알고 있습니다.

DynamicDan

이제 더 빠르고 더 나은 방법이 있습니다(Chrome 버전 59.xx).

다시 로드 아이콘(url 필드 왼쪽)을 마우스 오른쪽 버튼으로 클릭하면 드롭다운 메뉴가 표시되고 세 번째 옵션인 '캐시 비우기 및 하드 다시 로드'를 선택합니다.

이 옵션은 개발자 도구가 열려 있는 경우에만 사용할 수 있습니다. (옵션 2: '하드 다시 로드' -cmd-shift-R과의 차이점에 유의하십시오.) 캐시 비우기가 없습니다!

Luftwaffle

Clear Cache 라는 크롬 웹 스토어에서 사용할 수 있는 크롬 확장 프로그램이 있습니다.

나는 그것을 매일 사용하며 매우 유용한 도구라고 생각합니다. 다시 로드 버튼으로 사용할 수 있고 캐시를 지울 수 있으며 쿠키, 로케일 저장소, 양식 데이터 등도 원할 경우 이러한 일이 발생하는 도메인을 정의할 수 있습니다. 따라서 선택한 도메인에서 눌러야 하는 새로고침 버튼만으로 이 모든 것을 지울 수 있습니다.

아주 아주 좋은!

옵션에서 이에 대한 키보드 단축키를 정의할 수도 있습니다!

또한 다른 방법은 시크릿 모드에서 크롬 창을 시작하는 것입니다. 여기서 캐시도 완전히 비활성화되어야 합니다.

chris

캐시를 비활성화하는 또 하나의 옵션은 Devtools와 똑같은 방식으로 캐시를 비활성화하는 제 3의 Chrome 확장 프로그램인 Page Size Inspector에서 제공합니다.

또한 확장 기능은 페이지 크기, 캐시 사용량, 네트워크 요청 및 웹 페이지 로드 시간을 편리한 방식으로 빠르게 보고합니다. 또한 Github 의 오픈 소스 .

Tomi Mickelsson

무엇을 사용하고 있는지 확실하지 않지만 ASP.Net을 사용하는 경우 매력처럼 작동하는 다음을 수행할 수 있습니다.

 <link href="@Url.Content("~/Content/Site.css")?time=@DateTime.Now" rel="stylesheet" />

기본적으로 실행될 때마다 파일 끝에 날짜와 시간이 자동으로 추가됩니다. 즉, 파일 이름이 기술적으로 다르기 때문에 다시 캐시되는 것에 대해 걱정할 필요가 없습니다.

MattE

나는 같은 문제가 있었고 다음을 시도했습니다.

• 컨트롤 시프트 R,
• F12에서 캐시 비활성화
• 컨트롤 F5.

그런 다음 비 https 사이트에 .appcache 매니페스트를 사용하는 것이 더 이상 사용되지 않는다는 것을 발견했습니다. 내 site.appcache 파일과 html 태그에서 해당 참조를 제거했는데 이제 각 페이지의 최신 버전이 표시됩니다!

Ole EH Dufour

ServiceWorkers (예: 프로그레시브 웹 앱용)를 사용하는 경우 개발 도구의 응용 프로그램 > 서비스 작업자 아래에서 "업데이트 시 다시 로드"를 확인해야 할 수도 있습니다.

Bob

이 질문을 받았을 때 Chrome은 캐시 비활성화 기능을 지원하지 않았습니다. 그러나 이제 Chrome 개발자 도구의 네트워크 탭에서 "캐시 비활성화" 기능을 찾을 수 있습니다.

캐시가 비활성화된 네트워크 탭

모든 리소스(JS 리소스를 필터링함)가 네트워크에서 가져오고 디스크/메모리 캐시에서 로드되지 않은 것을 볼 수 있습니다.

캐시 비활성화가 선택되지 않았습니다.

페이지를 새로 고쳤지만 "캐시 비활성화" 기능을 선택하지 않았을 때 거의 모든 리소스가 캐시에서 로드되었음을 알 수 있습니다.

이것은 로컬 웹 개발에 잘 작동하지만 강조하고 싶은 특정 제한 사항이 있습니다. 지금까지 논의된 솔루션이 사용 사례를 충족하는 경우 여기에서 읽기를 중단할 수 있습니다.

제한 사항

1. DevTools를 열린 상태로 유지하고 캐시 비활성화를 선택해야 합니다.
2. 캐시를 비활성화하면 해당 탭의 모든 리소스에 대해 비활성화됩니다. 1-2 리소스에 대해서만 캐시를 비활성화하려는 경우 작업이 느려지고 비효율적입니다.

Requestly Chrome 확장 프로그램 을 사용하여 특정 리소스(JS/CSS/이미지 등)에 대한 캐시 비활성화

최근에 특정 리소스에 대해 캐시를 비활성화하는 방법을 이해하는 데 도움이 되는 https://dev.to/requestlyio/disable-caching-of-particular-js-css-file-2k82 를 우연히 발견했습니다.

여기서 트릭은 요청할 때마다 임의의 값으로 리소스에 쿼리 매개변수를 추가하는 것입니다. Requestly Query Param 규칙을 사용하여 다음과 같은 매개변수를 추가할 수 있습니다.

 URL Contains mywebsite.com/myresource.js Add param cb rq_rand(4)

rq_rand(4)는 요청 시 4자리 난수로 대체됩니다.

임의의 매개변수를 추가하는 Requestly Query Parameter Rule

규칙을 추가한 후 JS/CSS 파일이 캐시되지 않음

여기에서 "캐시 비활성화"가 선택되지 않고 URL의 임의 매개변수(cb - 캐시 버스터로 읽음) 때문에 캐시에서 리소스가 로드되지 않는 것을 볼 수 있습니다.

1. 좋은 점은 이 동작을 하기 위해 개발 도구를 열어 둘 필요가 없다는 것입니다.
2. 이것을 영구적으로 ON으로 유지할 수 있으며 브라우징 경험에도 영향을 미치지 않습니다.

규칙을 얻는 방법

다음은 Requestly가 설치된 경우 규칙을 탐색 및 다운로드할 수 있는 링크입니다. - https://app.requestly.io/rules/#sharedList/1600501411585-disable-cache-stackoverflow

면책 조항: 나는 Requestly를 구축했지만 이것이 많은 웹 개발자에게 도움이 될 수 있고 따라서 여기에서 공유할 수 있다고 생각합니다.

T8y

버전 50 이후로(제 기억이 맞다면) "캐시 비활성화" 옵션이 Devtool 설정에서 제거되었습니다. "네트워크" 탭으로 이동하면 "캐시 비활성화" 옵션이 있습니다.

boi_echos

사이트에서 PHP를 사용하는 경우 HTML 페이지 시작 부분에 다음과 같은 작은 PHP 스니펫을 추가하세요.

 //dev versioning - stop caching $rand = rand(1, 99999999);

이제 스크립트 또는 링크 요소에서 CSS 또는 JS 파일과 같은 리소스를 로드하는 모든 곳에서 '?'를 추가한 후 생성된 임의의 값을 요청 URL에 추가합니다. PHP를 통해 URI로:

 echo $rand;

그거야! 종류에 관계없이 더 이상 사이트를 캐시하는 브라우저가 없습니다.

물론 게시하기 전에 코드를 제거하거나 단순히 $rand를 빈 문자열로 설정하여 다시 캐싱을 허용합니다.

Torsten Barthel

위에서 설명한 다른 옵션을 사용했지만 가장 좋은 방법은 chrome.exe 시작에 다음 매개변수를 추가하는 것입니다.

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disk-cache-size=1 -media-cache=1

미디어 캐시를 비활성화하지 않는 것이 좋은 생각이지만 완전성을 위해 여기에 있습니다.

실제로 캐시를 완전히 비활성화하고 디스크 대신 IO용 메모리를 사용하는 옵션을 원하지만(로드 시간도 10배 빨라집니다!) 크롬이나 그 문제에 대한 브라우저에는 아직 해당 옵션이 없다고 생각합니다. .

Ahmed

캐시를 일시적으로 비활성화하거나 변경 사항을 볼 수 있는 방식으로 페이지를 새로 고치려면 어떻게 해야 합니까?

어떤 "캐시"를 말하는지 명확하지 않습니다. 브라우저가 콘텐츠를 지속적으로 캐시할 수 있는 여러 가지 방법이 있습니다. Web Storage 는 그 중 하나이고 Cache-Control 은 또 다른 것입니다.

일부 브라우저에는 오프라인 지원을 제공하는 프로그레시브 웹 앱(PWA)을 생성하기 위해 서비스 워커 와 함께 사용되는 Cache

PWA에 대한 캐시를 지우려면

 self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

캐시 키의 이름을 나열하려면 다음을 실행하십시오.

 self.caches.delete('my-site-cache')

이름으로 캐시 키를 삭제합니다(예: my-site-cache ). 그런 다음 페이지를 새로 고칩니다.

새로 고침 후 콘솔에 작업자 관련 오류가 표시되면 등록된 작업자를 등록 취소해야 할 수도 있습니다.

 navigator.serviceWorker.getRegistrations() .then(registrations => { registrations.forEach(registration => { registration.unregister() }) })

Josh Habdas

Chrome의 캐시 킬러가 단연 최고의 선택입니다. 캐시 킬러를 설치하기 위한 스토어 URL이 다운되어 있으므로 다음에서 CRX 파일을 다운로드할 수 있습니다.

https://www.crx4chrome.com/extensions/jpfbieopdmepaolggioebjmedmclkbap/

확장 파일이 다운로드되면 Chrome -> 추가 도구 -> 확장을 연 다음 파일 탐색기 또는 바탕 화면(파일을 다운로드한 위치에 따라 다름)에서 CRX 파일을 크롬 창으로 끌어 확장 프로그램을 설치합니다.

BernieSF

(Windows에서) ctrl + shift + delete를 사용하고 크롬 대화 상자가 나타나면 Enter 키를 누릅니다. 이 시퀀스를 실행할 때마다 지워야 하는 항목으로 구성할 수 있습니다. 개발자가 필요하지 않습니다. 이 경우 도구가 열립니다.

santon

출처 : http:www.stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development