2013/11/07

크롬(Chrome)에서 자바스크립트(JavaScript), jQuery, HTML5, JSP 등의 결과물을 확인할 때 주의할 점 // 캐시(Cache) 삭제, 개발자 도구, DevTools

저는 HTML5, JSP, Javascript, jQuery 등의 결과물을 크롬으로 확인하고 있는데요,

콘솔 창에서 에러 부분을 확인하고 소스를 수정해서 다시 실행했는데도, 개발자 도구에서 코드를 확인하면 방금 수정한 내용이 곧바로 반영이 안 되는 경우가 많습니다.

이러한 경우에 개발자 도구에서 작동 중인 실제 코드를 미처 확인하지 못하면 '아, 내가 수정한 부분이 문제의 원인이 아니었구나!'라고 착각과 함께 무한 삽질의 두번째 삽을 뜨기 시작하게 되는데요... ㅠ_ㅠ;


크롬 브라우저의 캐시(Cache) 기능을 꺼두면 이런 불상사를 미리 막을 수 있습니다.


크롬의 개발자 도구를 띄운 상태에서 오른쪽 하단에 있는 톱니바퀴 모양의 아이콘을 클릭해서 Disable cache에 체크만 해주시면 간단히 끝납니다.

얼마나 중요한 부분이었는지... General 메뉴의 가장 위쪽에 위치하고 있네요. ^^


크롬(Chrome) 개발자 도구 - 설정


크롬(Chrome) 개발자 도구 - Disable cache


메뉴 이름을 보아하니, Disable cache 에 체크를 하더라도 개발자 도구가 떠 있는 상태에서만 cache가 disable 되는 것 같군요. ^^a



*** '굴착공사'에 들어가기에 앞서 톰캣 서버의 문제인지도 미리 확인하는 습관을 들이는 게 좋습니다.

코드 상에 아무런 문제가 없는데도 프로그램이 오작동을 하고 있다는 느낌이 든다면,

(이클립스 작업 환경일 경우) Window -> Show View -> Servers 에서 뜨는 서버(예. Tomcat)에서 마우스 우클릭 후 Clean 또는 Restart를 해 주는 센스! 도 잊지 마세용~ ㅋ





* 본 게시물은 크롬 버전 30.0.1599.101 m 기준으로 작성되었습니다.



Chrome DevTools
https://developers.google.com/chrome-developer-tools/

댓글 3개:

  1. 특히, 자바스크립트의 함수 내용을 수정할 때 위의 내용이 중요하구요,

    캐쉬 기능을 끄고 작업 중이더라도 새로고침을 몇 번 더 눌러줘야 진짜로 새로 고침이 되는 경우도 있으니 주의하시길 바랍니다. ㅠ_ㅠ)/

    답글삭제
  2. 그리고 외부에서 수정해 온 파일을

    윈도우즈 탐색기로 이클립스의 해당 폴더에 복사해서 그냥 덮어 씌운 경우에는

    이클립스의 프로젝트에서 마우스 우클릭 후 Refresh 를 해줘야

    수정된 파일 내용을 이클립스가 제대로 인식하는 문제도 있더군요. ㄷㄷㄷㄷ


    *** 제가 사용 중인 이클립스는 케플러 버전입니다.

    답글삭제
  3. 로컬 톰캣 서버에서 multipartRequest 를 이용한 파일 첨부를 하다가 서버를 클린하면

    파일 저장 경로가 톰캣 임시 폴더의 안쪽인 경우, 첨부 파일도 지워지니 주의 하세용~ ㅋ

    답글삭제