개발자 도구에서 API 통신 흐름 확인하기
1. 개발자 도구 실행
-
브라우저(예: Chrome)를 열고, API를 확인하려는 웹사이트로 이동합니다.
-
개발자 도구 열기
-
Windows/Linux:
F12또는Ctrl+Shift+I. -
Mac:
Command+Option+I. -
우클릭 메뉴: 빈 공간에서 "검사(Inspect)" 클릭.
-
2. 네트워크 탭(Network)로 이동
-
개발자 도구에서 상단의 "Network" 탭을 클릭.
-
페이지를 새로고침(F5) 하여 API 요청 흐름을 감지.
- 요청 흐름이 Network 탭에서 실시간으로 기록됩니다.
3. 요청 필터링
-
XHR/Fetch 요청만 필터링하기
-
상단의 "Filter" 또는 "XHR/Fetch" 옵션을 클릭.
-
API 요청만 분리해서 확인 가능합니다.
-
-
검색창 활용
- 특정 키워드, URL, 엔드포인트를 검색하여 원하는 요청만 표시.
4. API 요청 확인
-
요청(Request) 데이터 확인
-
캡처된 요청 중 하나를 클릭 후 세부 정보를 확인합니다.
-
Headers (헤더): 요청 메서드(GET/POST/PUT), URL, Authorization, Content-Type 등.
-
Payload (페이로드):
POST,PUT요청의 전송 데이터.- 형식:
Form Data,JSON,Raw Data등.
- 형식:
-
-
-
응답(Response) 데이터 확인
-
응답 탭에서 API 호출의 결과 데이터를 확인.
-
주로
JSON,HTML,XML형식으로 제공됩니다.
-
5. 요청 및 응답 타이밍 분석
-
"Timing" 탭 확인
-
요청과 응답 간의 지연 시간.
-
DNS 연결 시간, TTFB(Time to First Byte) 등을 확인할 수 있음.
-
-
크기와 시간 분석
- 요청 데이터 크기(데이터 다운로드) 및 소요 시간을 확인하여 성능 문제를 분석.
6. API 요청 복사 및 재실행
-
요청 복사
-
요청을 우클릭 → "Copy" > "Copy as cURL" 선택.
-
터미널에서 복사한
cURL명령어를 실행하여 동일 요청 테스트 가능.
-
-
요청 재실행
- "Replay XHR" 기능으로 동일 요청을 재실행(test) 가능.
7. 콘솔에서 API 호출 추적
-
Console에서 API 요청 실행
- JavaScript로 API 호출을 직접 실행해 테스트 가능(
fetch,XMLHttpRequest 등).
- JavaScript로 API 호출을 직접 실행해 테스트 가능(
-
에러 및 디버깅
- 발생한 에러의 로깅 및 출력 결과를 Console에서 추적.
8. 실시간 WebSocket 및 이벤트 흐름 확인 (선택 사항)
-
WebSocket
- "Network" 탭에서 WebSocket 요청을 필터링하여 실시간 메시지 흐름 확인.
-
서버 이벤트
- SSE(Server-Sent Events)를 통해 서버에서 전송된 실시간 데이터 확인.
9. 기타 팁
-
"Preserve log" 활성화
- 개발자 도구의 "Network" 탭에서 "Preserve Log"를 활성화하면 페이지 새로고침 후에도 요청 기록이 유지됩니다.
-
요청 정렬
- 크기(Size)나 시간(Duration) 기준으로 요청을 정렬해 성능 분석 가능.
정리
API 통신 흐름 확인 절차
-
개발자 도구 열기: 브라우저 →
Network탭으로 이동. -
요청 캡처: 페이지 새로고침으로 API 요청 감지 시작.
-
필터링:
XHR,Fetch, 키워드를 통해 필요한 데이터만 조회. -
데이터 확인: 요청/응답의 헤더, 페이로드, 응답 데이터를 분석.
-
테스트 및 분석:
cURL복사 기능으로 실제 요청 재현하거나 Replay 기능 활용.
활용 예
-
문제 요청 찾기: 실패한 API 디버깅.
-
성능 최적화: 요청 응답 시간 및 병목 구간 진단.
-
보안 점검: Authorization Header, Token 값 점검.
