웹 사이트 개발을위한 Chrome 캐시 사용 중지

사이트 모양 (CSS 수정)을 수정하고 있지만 성가신 영구 캐시로 인해 Chrome에서 결과를 볼 수 없습니다. Shift+ 새로 고침을 시도했지만 작동하지 않습니다.

캐시를 일시적으로 비활성화하거나 변경 사항을 볼 수있는 방식으로 페이지를 새로 고치는 방법은 무엇입니까?

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

1. 마우스 오른쪽 버튼을 클릭 하고 Inspect ElementDevTools를 열도록 선택 하십시오 . 또는 다음 키보드 단축키 중 하나를 사용하십시오 .
   • F12
   • CommandMac에서 + Option+i
   • ControlWindows 또는 Linux에서 + Shift+i
2. Network툴바에서을 클릭 하여 네트워크 창을 엽니 다.
3. Disable cache상단 의 확인란을 선택 하십시오 .

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

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

Disable cache확인란 을 사용하지 않으려면 DevTools가 열린 상태 에서 새로 고침 버튼 을 길게 누르면 옵션이 Hard Reload있거나 Empty Cache and Hard Reload비슷한 효과가있는 메뉴가 표시됩니다 . 옵션 의 차이점 에 대해 읽으십시오 . 사용 가능한 단축키는 다음과 같습니다.

• CommandMac에서 + Option+R
• ControlWindows 또는 Linux에서 + Shift+R

한 시간에 30 번 캐시를 지워야 할 때 캐시를 지우는 것은 너무 성가신 일입니다. 그래서 모든 페이지로드에서 캐시를 지우는 Classic Cache Killer 라는 Chrome 확장 프로그램을 설치했습니다 .

Chrome 스토어 링크 (무료) (이제 악성 코드 없음)

이제 내 모의 JSON, 자바 스크립트, CSS, HTML 및 데이터 새로 고침 할 때마다 의 모든 페이지로드 .

나는 결코 내 캐시를 취소해야하는 경우 걱정할 필요가 없습니다.

내가 찾은 Chrome에는 약 20 개의 캐시 클리너가 있지만이 도구는 가벼워 노력이 전혀없는 것 같습니다. 업데이트에서 Cache Killer는 이제 "항상 켜져"있습니다.

참고 : 나는 어떤 방식 으로든 플러그인 작성자를 모른다. 방금 유용하다고 생각했습니다.

1. 를 누른 F12다음 (콘솔을 연 상태에서) Chrome 개발자 콘솔을 위로 당깁니다 .

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

캐시를 완전히 비우려면 "하드 다시로드"를 넘어서서 자바 스크립트 등을 통해 다운로드 한 모든 항목이 캐시를 사용하지 않도록합니다. 설정이나 다른 항목을 망칠 필요가 없습니다. 빠른 1 회성 솔루션입니다.

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의 경로를 그대로 둡니다.

Chrome 설정을 수정하지 않으려는 경우 시크릿 모드를 사용하여 동일한 결과를 얻을 수 있습니다.

캐시 사용 안함 옵션 (개발자 도구 창의 오른쪽 하단 모서리에있는 도구 (도구 | 개발자 도구 또는 Ctrl+ Shift+ I) 을 통해 제공됨) 외에도 개발자 도구 의 네트워크 분할 창에서 마우스 오른쪽 단추를 클릭 할 수 있습니다. 팝업 메뉴에서 "캐시 지우기"를 선택하십시오.

1. F12 Chrome DevTools를 여는 방법
2. F1 DevTools 설정을 여는 방법
3. 아래와 같이 캐시 비활성화 (DevTools가 열린 상태) 를 확인하십시오 .

현재 기본 설정 탭에 있습니다. 아래로 스크롤해야 할 수도 있습니다. 이 질문이 제기 된 후이 확인란이 두 번 이상 이동되었습니다. 마지막으로 확인한 결과 맨 아래의 가운데 열에있었습니다. 더 얇은 화면에서 열었고 환경 설정 아래에 2 개의 열이있는 경우 오른쪽 상단 근처에있을 수 있습니다. 이 게시물이 변경되거나 의견이 있으면 언제든지 업데이트하고 게시물을 업데이트하겠습니다.

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

"Ctrl + F5"

카나리아 채널 (및 아마도 개발 및 안정적인 채널이 따라갈 것입니다)에서 이것은 "일반"섹션 아래 왼쪽에서 전체적으로 두 번째 옵션으로 나타납니다.

또한 Ctrl + Shift + N을 통해 시크릿 모드로 전환하는 옵션이 항상 있습니다. 불행히도 세션이 종료됩니다.

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

분명히 Chrome의 캐시 비활성화 확인란 (v17, v15 이후)은 기본 설정 UI에 없습니다. 개발자 도구 설정 UI에 있습니다.

1. 브라우저 창의 공구 모양 아이콘 메뉴 (기본 설정 메뉴)에서 도구 → 개발자 도구를 선택하십시오.

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

3. 네트워크 섹션에서 '캐시 비활성화'확인란을 선택하십시오.

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

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

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

확인 Automatically reload active tab after clearing data:

Everything기간을 선택하십시오 :

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

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

키보드 단축키를 설정하십시오 (예 : Ctrl+ Shift+ :) R.

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

Chromium은 사용자의 결정을 내리고 설정을 시행 할만큼 오만해서는 안됩니다.

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

이것은 예기치 않은 충돌이 발생할 수 있지만 충돌이 발생하면 어떤 경우 든 수정해야하는 더 심각한 버그를 분명히 나타냅니다.

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

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

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

시크릿 모드에서 강제로 새로 고침하면 동일한 모드에서 다시로드하려고 할 때마다 트릭을 수행합니다.

페이지가 캐시되지 않도록 페이지 이름을 변경하는 북마크릿은 어떻습니까? 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;})();

방금 잡혔지만 반드시 Chrome 때문일 필요는 없습니다.

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

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

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

이 데이터가 어디에 저장되어 있는지 알 수 없지만 크롬이 요청에 대해 서버에 절대 도달하지 않는다는 것을 알고 있습니다.

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

URL 필드의 왼쪽에있는 reload-icon을 마우스 오른쪽 버튼으로 클릭하면 드롭 다운 메뉴가 표시되고 세 번째 옵션 : 'empty Cache and Hard reload'를 선택하십시오.

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

Chrome 웹 스토어에는 Clear Cache 라는 크롬 확장 프로그램이 있습니다 .

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

아주 아주 좋은!

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

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

캐시를 비활성화하는 또 다른 옵션은 Devtools와 동일한 방식으로 캐시를 비활성화하는 3rd Chrome 확장 프로그램 Page Size Inspector 에서 제공합니다.

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

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

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

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

나는 같은 문제가 있었지만 시도했다.

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

그런 다음 https가 아닌 사이트에 .appcache 매니페스트를 사용 하는 것이 더 이상 사용되지 않음을 발견했습니다 . html 태그에서 site.appcache 파일과 해당 참조를 제거했으며 이제 각 페이지의 최신 버전을보고 있습니다!

ServiceWorkers를 사용하는 경우 (예 : Progressive 웹 앱의 경우) 개발자 도구의 응용 프로그램> 서비스 워커에서 "다시로드시 업데이트"를 확인해야합니다.

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

사이트에서 PHP를 사용하는 경우 HTML 페이지의 시작 부분에 작은 PHP 스 니펫을 배치하십시오.

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

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

    echo $rand;

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

물론 공개하기 전에 코드를 제거하거나 간단히 $ rand를 빈 문자열로 설정하여 캐싱을 다시 허용하십시오.

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

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

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

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

캐시를 일시적으로 비활성화하거나 변경 사항을 볼 수있는 방식으로 페이지를 새로 고치는 방법은 무엇입니까?

어떤 "캐시"를 참조하고 있는지 확실하지 않습니다. 브라우저가 컨텐츠를 지속적으로 캐시 할 수있는 여러 가지 방법이 있습니다. 웹 스토리지 는 그들 중 하나이며 Cache-Control다른 것입니다.

일부 브라우저에는 또한 서비스 워커Cache 와 함께 사용 하여 오프라인 지원을 제공하는 PWA (Progressive Web Apps)를 만들 수도 있습니다.

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()
    }) 
  })

Chrome의 캐시 킬러가 가장 좋습니다. 캐시 킬러를 설치하기위한 상점 URL이 다운되었으므로 여기에서 CRX 파일을 다운로드 할 수 있습니다.

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

확장 파일이 다운로드되면 Chrome-> 추가 도구-> 확장을 연 다음 파일 탐색기 또는 데스크탑 (파일을 다운로드 한 위치에 따라)에서 크롬 창으로 CRX 파일을 드래그하여 확장 프로그램을 설치하십시오.

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

브라우저에서 디스크에서 캐시 데이터를로드하는 경우에도 캐시를 비활성화했습니다 (Chrome을 사용 중임). 내 CSS와 JS가 모두 서버에서로드되었지만 웹 페이지는로드하지 않았습니다. 이것은 내 로컬 및 프로덕션 모두에서 발생했습니다.

그것을 고치려면 브라우저에 서버에서 웹 페이지를 가져 오도록 컨트롤러에 필요하지 않은 추가 매개 변수를 URL에 추가해야합니다.

ASP.Net을 사용하고 있었으므로 다음은 내 예입니다.

//Controller function
public ActionResult Index()
    {
        return View();
    }
//Link
@Html.Action("Index", "Home", new { ts = DateTime.Now.Ticks.ToString()})

결과적으로 다음과 같은 링크가 생성됩니다. http://www.myweb.com/Home/Index?ts=636558555408282209

이것이 나의 상황과 해결책입니다. 잘하면 그것은 누군가를 도울 수 있습니다.