개시하다

Charles 이러한 디버그 에이전트를 사용하면 HTTP 요청과 응답에 인터럽트를 설정하여 쉽게 다시 쓸 수 있어 매우 편리하다.
따라서 Charles 단점에 대한 구체적인 사용 방법.
Charles의 개요, 설정, 기본 지식 등이 여기에 있다.
* 내 프런트엔드 엔지니어는 3가지 신기의 Charles로 인정합니다~ 1~Charles의 뛰어난 점
* 내 프런트엔드 엔지니어는 3가지 신구의 Charles~ 2~ 설치 및 설정
* 내 프런트엔드 엔지니어의 3가지 신기에 의해 인정된 Charles~

할 일

Yahoo의 방법으로 단점의 순서를 설명합니다!Japan의 indexHTML 내 로고 이미지의 src를 Qiita의 Kobito 이미지의 URL로 변경하여 Kobito와 유사한 웹 사이트로 만듭니다.

절차.

세션 시작 기록
도구 모음에서 누르기Recording 단추를 누르세요.

웹 브라우저에서 HTTP 요청 발생
세션에 이러한 HTTP 요청이 기록되어 있습니다.

세션 중지 기록
불필요한 정보를 기록하지 않기 위해 세션을 진행할 때마다 기록과 정지가 진전된다.
도구막대에서 다시 Recording 단추를 누르면 정지 상태가 됩니다.

index.> 의 GET 요구 사항을 찾습니다.
바로 이거야!!

브레이크 설정
선택한 요청을 마우스 오른쪽 버튼으로 클릭하면 컨텍스트 메뉴Breakpoints가 표시됩니다.

선택하면 메뉴만 닫히고 실망스럽지만 인터럽트는 설정되어 있습니다.
다시 우클릭해서 확인해 보세요.
Breakpoints에 대해 검사를 진행하였다.

중단된 대상을 응답으로만 설정
현재 상태에서도 인터럽트가 설정되어 있지만 기본 동작으로 요청과 응답을 요청으로 설정합니다.
이번에는 반응이 목표이기 때문에 요구의 단점을 해소해 보려고 한다.
응용 프로그램 메뉴에서 Proxy-Breakpoints..를 선택합니다.

방금 설정한 브레이크가 설정되었는지 확인하는 대화 상자가 표시됩니다.

대상의 브레이크를 두 번 클릭하면 브레이크에 대한 세부 정보 대화 상자가 표시됩니다.Request, Responce에 선택된 Request를 뜯어낸 다음OK 화면을 닫습니다.

웹 브라우저 다시 로드
웹 브라우저를 다시 로드하고 동일한 HTTP 요청을 다시 생성합니다.
Charles 화면은 다음과 같이 중단점 화면으로 전환됩니다.

웹 브라우저도 읽기 중일 것입니다.
즉, 응답이 웹 브라우저에 도달하지 않고 Charles에서 중지된 상태입니다.Execute에서 응답을 재생하고 Abort에서 오류 응답을 반환합니다.

관찰 응답 중Edit Response를 누르면 편집 뷰가 표시됩니다.
HTTP가 응답하는 머리와 몸을 개작할 수 있습니다.
여기서 HTML 내의 로고 이미지를 Qita의 Kobito 이미지로 덮어씁니다.HTML에 따라 응답 주체 중의 로고 이미지의 요소를 확정한다.

우선 적용 응답
이러한 느낌으로 Kobito 이미지의 URL을 덮어쓰려고 합니다.

다시 쓰기 응답 웹 브라우저에서 재생Execute 버튼을 누르면 제거됩니다.

확인 결과
웹 브라우저를 보고 야후의 로고가 코비토로 바뀌었다.
이런 느낌.

HTTP 요청

요청은 응답과 같은 동작으로 인터럽트를 설정해서 페이지의 눈썹과 URL을 다시 쓸 수 있습니다.
프런트 엔지니어가 잠시 어떻게 쓸지 생각나지 않아 상세한 설명을 건너뛰었다.
서버 측은 의외의 요청이 발생했는지 확인하고 이상한 동작을 하는지 확인하는 데 도움이 될 수 있습니다.

사용처

아마도 반응을 편리하게 고치고 싶은 상황이 좋을 거예요.
공식 환경의Javascript와 css의 응답에 단점을 설정하고 개발 중인 원본 코드로 응답체를 덮어쓰며 정식 환경을 바탕으로 동작 확인 등을 한다.

FAQ

Q1. 목적 자원은 브라우저 캐시에서 요청이 발생하지 않기 때문에 인터럽트를 설정할 수 없습니다!!

브라우저 캐시를 지웁니다.
Charles에서 대상을 선택하는 요청을 오른쪽 단추 메뉴에서 선택하면 선택한 요청이 브라우저에 캐시되지 않기 때문에 편리합니다.

쓰고 해제하는 거 잊지 마.

Q2. iOS에서 로컬로 적용되는 WebView에 이와 같은 문제가 있습니다.

로컬 응용 프로그램의 브라우저 캐시를 지우려면 응용 프로그램을 다시 설치하면 되지만 매우 번거로워서 매번 할 수 없습니다.
캐시 자원을 불러오는 HTML 자체가 캐시되지 않기 때문에, 캐시를 방지하기 위해 Charles의 인터럽트를 사용하여 HTML 내의 자원의 URL을 다시 씁니다.
예를 들어, HTML 응답에 중단점을 설정하고 캐시된 에셋의 URL에 적절한 질의 매개 변수를 설정합니다.

변경 전

<script src="http://hogehoge.org/scripts/main.js"></script>

변경 후

<script src="http://hogehoge.org/scripts/main.js?abc"></script>

서버측 검증이 엄격하면 이상한 쿼리 매개 변수를 추가하면 이것만으로 오류가 발생해 쉽지 않지만, 이 경우 URL 끝에만 추가No Caching하면 순조로울 것 같다.

<script src="http://hogehoge.org/scripts/main.js?"></script>

최후

다음에 여기를 써 보세요.
* 응답을 로컬 파일에서 Map Local로 교체
* 다른 원격 호스트로 요청 ~ Map Remote ~