Network Monitor는 현재 페이지에서 발생하는 모든 네트워크 요청(XHR/Fetch API 호출, 스크립트 로드, 스타일시트 가져오기, 이미지 다운로드, 폰트 파일 등)을 캡처하여 실시간으로 업데이트되는 플로팅 패널에 표시합니다. URL, HTTP 메서드, 상태 코드, 응답 크기, 소요 시간을 DevTools를 열지 않고도 확인할 수 있습니다.
Chrome DevTools의 Network 탭은 강력하지만 무거워서 화면 공간을 많이 차지하고, 페이지 이동 시 초기화되며 페이지 콘텐츠에서 시선을 돌려야 합니다. Network Monitor는 필수적인 네트워크 모니터링 기능을 가벼운 플로팅 패널로 제공합니다. 패널은 페이지 위에 오버레이되어 XHR과 Fetch 요청을 가로채고 Performance API를 통해 리소스 로딩을 모니터링하여 모든 네트워크 요청을 실시간으로 보여줍니다. 각 요청에는 URL, HTTP 메서드(GET, POST, PUT, DELETE), 상태 코드(색상 구분: 2xx는 녹색, 3xx는 노랑, 4xx/5xx는 빨강), 응답 크기(바이트), 소요 시간(밀리초)이 표시됩니다. 요청을 클릭하면 상세 정보가 펼쳐집니다: 요청 헤더, 응답 헤더, 요청 페이로드(POST/PUT의 경우), 응답 본문 미리보기, 타이밍 분해. 유형별 필터(XHR/Fetch, JS, CSS, Images, Fonts)를 사용하여 특정 트래픽에 집중할 수 있습니다.
모든 네트워크 요청이 발생하는 즉시 패널에 나타납니다. 페이지 로드, API 호출, 지연 로드 리소스, 백그라운드 페치까지 모두 실시간으로 업데이트됩니다.
요청을 클릭하면 전체 상세 정보를 볼 수 있습니다: 요청 URL, 메서드, 헤더, 페이로드(POST/PUT의 경우), 응답 헤더, 응답 본문 미리보기(JSON 자동 포맷), 상태 코드, 크기, 타이밍 분해.
요청 유형별로 필터링할 수 있습니다: XHR/Fetch(API 호출), JS(스크립트), CSS(스타일시트), IMG(이미지), Font(웹 폰트), 또는 All. API 트래픽과 리소스 로딩을 분리하여 필요한 부분에 집중할 수 있습니다.
상태 코드는 즉시 인식할 수 있도록 색상으로 구분됩니다: 녹색(2xx 성공), 노랑(3xx 리다이렉트), 빨강(4xx 클라이언트 오류 및 5xx 서버 오류). 실패한 요청이 바로 눈에 띕니다.
각 요청에 응답 크기(KB 단위)와 총 소요 시간(밀리초)이 표시됩니다. 느린 API 호출, 과도하게 큰 리소스, 페이지 성능에 영향을 주는 불필요한 요청을 식별할 수 있습니다.
요약 바에 총 요청 수와 캡처된 모든 요청의 합산 크기가 표시됩니다. 유형별로 필터링하면 스크립트 vs 이미지 vs API 호출에 각각 얼마나 많은 대역폭이 사용되었는지 확인할 수 있습니다.
XHR/Fetch 요청을 보면서 프론트엔드가 올바른 API 엔드포인트와 파라미터로 호출하는지 확인하세요. 요청 페이로드와 응답 본문을 클릭하여 검사하면 데이터 형식 불일치를 즉시 발견할 수 있습니다.
빨간 404와 500 항목이 깨진 리소스나 실패한 API 호출을 바로 강조합니다. 어떤 URL이 실패했는지, 언제 실패했는지, 서버가 어떤 오류 응답을 반환했는지 확인할 수 있습니다.
소요 시간순으로 정렬하면 가장 느린 요청을 찾을 수 있습니다. 크기순으로 정렬하면 가장 큰 리소스를 찾을 수 있습니다. 요약 총계로 전체 대역폭 상황을 파악하세요. 페이지가 너무 많은 요청을 하거나 너무 많은 데이터를 다운로드하고 있는지 알 수 있습니다.
페이지가 백그라운드에서 어떤 네트워크 요청을 하는지 확인하세요. 분석 핑, 하트비트 호출, 폴링 요청, 지연 로드 리소스 등 사용자에게 보이지 않는 전체 네트워크 활동을 이해할 수 있습니다.
요청을 필터링하여 어떤 도메인과 통신하는지 확인하세요. 예상치 못한 네트워크 호출을 하는 서드파티 스크립트(추적 픽셀, 데이터 수집 등)를 식별할 수 있습니다.
DevSuite Pro 플로팅 독을 열고 Network Monitor 아이콘을 클릭하세요. 패널이 열리고 즉시 네트워크 요청을 캡처하기 시작합니다.
페이지를 정상적으로 사용하세요. API 호출, 리소스 로드, 백그라운드 페치 등 모든 네트워크 요청이 발생하는 대로 피드에 나타납니다.
XHR, JS, CSS, IMG, Font 필터를 클릭하여 보기를 좁히세요. 데이터 가져오기를 디버깅하려면 API 호출만 표시하고, 에셋 로딩을 확인하려면 이미지만 표시할 수 있습니다.
요청 행을 클릭하면 URL, 헤더, 페이로드, 응답 본문, 상태 코드, 크기, 타이밍 등의 상세 정보가 펼쳐집니다.
빨간 상태 코드(404, 500)는 실패한 요청을 나타냅니다. 긴 소요 시간은 성능 병목을, 큰 크기는 최적화가 필요한 리소스를 나타냅니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
