찰스 프록시 사용하기

charlesproxy

네트워크 패킷들을 감시할 수 있고, 프록시 할 수도 있는 좋은 유료툴이다.

상용에 배포된 페이지에서 자바스크립트 파일을 내 로컬의 (빌드된) 자바스크립트 파일로 바꿔치기할때 사용했다.

내가 수정했던 사항이 라이브에서도 원하는대로 정확하게 동작하는지 눈으로 확인하고 싶었다.

감시하거나 프록시할 리소스가 https로 서빙된다면 당연히 인증서가 필요하다.

charles 메뉴 => Help => SSL Proxing => install charles Root Certificate 를 순서대로 선택한다

그러면 이제 맥의 키체인 접근에 Charles Proxy…이 추가된걸 확인할 수 있고, 더블클릭하여

신뢰 => 이 인증서 사용시: 항상 신뢰 로 변경해준다.

찰스와 브라우저를 종료했다가 재시작한다.

브라우저가 캐싱된 js를 불러올 확률이 높으므로, 시크릿모드에서 하거나

개발자도구를 켜서 강제 리프레시 & 캐시삭제를 해주자.

그러면 이제 찰스의 목록에서 바꿔치기 원하는 리소스를 선택하고, 우클릭 -> Map Local 선택한다.

Map From은 자동으로 채워질것이고, Map To에서 Choose를 선택하여 내가 바꿔치기할 리소스를 선택한다.

브라우저를 강제새로고침하면 바꿔치기된 결과를 확인할 수 있다.