본문 바로가기

프로그래밍

크롬 브라우저 새로 고침

반응형

웹 개발을 하다 보면 브라우저에서 직접 테스트를 할 때 수정된 내용이 바로 바로 반영이 되지 않아 곤란한 적이 있었을 겁니다.

그래서 캐시를 타지 않도록 브라우저 설정을 매번 바꾸곤 했는데 크롬 브라우저는 그렇게 할 필요가 없더군요. 음. 나름 꽤 오래 크롬 브라우저를 사용하고 있었지만 몰랐던 내용이라서 이렇게 기록을 ㅎ


일반적으로 새로 고침을 할 때에는 브라우저에서 [F5] 키를 누르거나 주소창 옆에 있는 아이콘을 선택합니다. 이렇게 했을 때는 캐시된 항목을 제외한 나머지 항목만을 불러옵니다. 개발자 도구[F12]를 실행해서 [Network] 항목를 확인해보면 Status 가 '304'로 떨어지는 항목을 볼 수 있습니다.



하지만 '304'로 떨어지는 항목 중 내가 수정한 것이 있는데 애매하게 반영이 되지 않는 경우가 있습니다. 이럴 때는 강제적으로 캐시된 콘텐츠를 무시하도록 할 수 있습니다.

단축키는 [F5]에서 [Ctrl]키만 같이 눌러주면 됩니다. (크롬 브라우저 버전에 따라 안되는 경우도 있습니다. 단축키는 https://support.google.com/chrome/answer/157179?hl=ko 내용을 참고해주세요).



이렇게 하는 것도 귀찮다면 개발자 도구에서 캐시 설정을 고정할 수 있는 옵션을 제공합니다.

개발자 도구를 열고 오른쪽 아래에 있는 톱니바퀴 아이콘을 클릭하면 개발자 도구 설정으로 이동합니다. 여기에서 [Disable cache] 옵션을 체크하면 개발자 도구를 실행하고 있는 동안에는 캐시된 콘텐츠를 무시합니다.

좀 더 자세한 내용은 아래 링크를 참고하세요. 물론 버전에 따라 옵션이 계속 바뀌기 때문에 도움말이 정확하지는 않네요. ㅎ

https://developers.google.com/chrome-developer-tools/docs/settings


* 개발자 도구를 열고 새로 고침 아이콘 컨텍스트 메뉴를 열어보면 몇 가지 추가 옵션이 보입니다. '강력 새로고침'은 앞에서 이야기한 것과 같은 기능 같고 추가적으로 '캐시 비우기 및 강력 새로고침'기능을 제공하네요.



* 그 외 브라우저 캐시 관련된 내용은 아래 링크를 참고하세요. IE 관련된 내용도 있었는데 지워버린 듯 합니다.

http://anonymity.com/Browser_caches

728x90