1/7 TIL 실서비스 request body 캡쳐

문제상황

개발된 프론트에서 서버로 전송하는 body가 너무 요소가 많아서, 실서비스에서 보내는 request를 잡으려고 개발자도구의 Network를 이용했다. 
그런데, 하필 요청이 업데이트를 하는 POST요청을 보내고 새로고침을 하는 바람에, 기록된 요청도 함께 사라져버려서 해당 요청을 클릭할 수 없었다.

해결방법

이런 경우 EventListener나 실제 코드에 break point를 걸 수 있는데, Angular로 빌드된 파일이 난독화돼있어 실제 코드에 걸기는 어려웠다. (react는 이런 경우 디버깅할 수 있는 툴을 따로 제공해주던데 angular는 내가 전담이 아니라 아직 모르겠다.)

해결 방법을 찾던중 chrome 에서 XHR/Fetch가 발생할 때 break point를 걸 수 있는 기능이 있는 걸 알아냈다.

개발자 탭에서 Source 탭을 누르면 다음 창을 볼 수 있는데, 여기서 XHR/fetch Breakpoints에  캡쳐하고자 하는 URL에 포함된 string을 입력후 해당 동작을 수행하면 된다.

url 캡쳐

추가

til을 쓰려고 돌아다니다가 console에서도 이렇게 request를 기록할 수 있는 걸 알게됐다.

설정을 누르면 나오는데, 여기서 필요한것만 체크해서 로그를 살펴보는 것도 유용해보인다.