크롬 개발자 도구의 Network 패널은 웹 페이지의 네트워크 요청(HTML, CSS, JS, 이미지 등)을 분석하는 강력한 도구입니다.
필터 인버트(Invert Filter) 기능은 특정 조건에 맞는 요청을 제외하고 나머지 요청만 표시하는 기능입니다. 아래에서 이 기능을 자세히 설명하고, 실무에서 어떻게 활용할 수 있는지 정리했습니다.
Invert 필터란?
Network 패널의 상단에 있는 필터 입력창(Filter Input)에 검색어를 입력하면, 해당 검색어와 일치하는 네트워크 요청만 표시됩니다. 여기에 -(마이너스) 접두사를 사용하거나 특정 상황에서 필터를 반전시키는 방법으로 Invert 효과를 구현할 수 있습니다. 예를 들어, 특정 파일 유형(예: 이미지)을 제외한 모든 요청을 보고 싶을 때 사용됩니다.
- 기능: 입력한 필터 조건을 반전시켜, 조건에 일치하지 않는 요청만 표시.
- 활성화 방법:
- 크롬 개발자 도구를 열고(F12 또는 Ctrl + Shift + I), Network 탭으로 이동.
- 상단 필터 입력창에 -를 접두사로 사용해 조건 입력(예: -jpg로 JPEG 이미지 제외).
- 또는 필터 드롭다운 메뉴에서 특정 조건(예: 파일 유형)을 선택한 뒤, 반전 조건을 추가.
Invert 필터의 주요 활용 사례
- 특정 리소스 제외:
- 예시: -jpg -png를 입력하면 이미지 파일(jpg, png)을 제외한 모든 네트워크 요청(CSS, JS, API 호출 등)을 표시.
- 실무 활용: 이미지 로딩이 아닌 API 호출이나 스크립트 로드 문제를 디버깅할 때 유용.
- 특정 도메인 제외:
- 예시: -domain:example.com을 입력하면 example.com에서 오는 요청을 제외한 나머지 요청 표시.
- 실무 활용: 서드파티 도메인(예: 광고 서버) 요청을 제외하고, 자체 서버 요청만 분석.
- 특정 상태 코드 제외:
- 예시: -status-code:200을 입력하면 성공(200) 상태 코드를 제외한 요청(예: 404, 500 오류) 표시.
- 실무 활용: 오류 요청(404, 500 등)을 빠르게 필터링해 문제 원인 파악.
- 특정 MIME 타입 제외:
- 예시: -mime-type:image/*를 입력하면 이미지 MIME 타입을 제외한 요청 표시.
- 실무 활용: 이미지나 폰트 로딩을 제외하고, JavaScript나 JSON 데이터 요청만 확인.
Invert 필터 사용 방법
- Network 패널 열기:
- 크롬에서 F12를 눌러 개발자 도구를 열고, Network 탭 선택.
- 페이지 새로고침(Ctrl + R)하여 요청 목록 로드.
- 필터 입력:
- 상단 필터 입력창에 반전 조건 입력. 예:
- -jpg: JPEG 파일 제외.
- -domain:*.google.com: Google 도메인 요청 제외.
- -status-code:200: 성공 응답 제외.
- 상단 필터 입력창에 반전 조건 입력. 예:
- 필터 드롭다운 활용:
- 필터 입력창 옆의 필터 아이콘(깔때기 모양)을 클릭해 파일 유형, 상태 코드, 도메인 등을 선택.
- 반전 조건은 -를 수동으로 입력해 추가.
- 결과 확인:
- 필터링된 요청 목록이 실시간으로 업데이트되어 표시.
- 요청을 클릭해 세부 정보(헤더, 응답, 타이밍 등) 확인 가능.
실무 팁
- 복합 필터 사용: Invert 필터와 다른 필터를 조합해 더 정밀한 분석 가능. 예: from:example.com -jpg는 example.com에서 오는 요청 중 이미지를 제외.
- 정규 표현식 활용: 복잡한 패턴을 검색하려면 정규 표현식 사용(예: regexp:.*\.min\.js).
- Network Request Blocking과의 조합: 특정 요청을 차단한 상태에서 Invert 필터를 사용하면, 차단된 요청의 영향을 분석할 수 있음.
- 공식 문서 참고: 자세한 필터 문법은 Chrome for Developers에서 확인.
주의사항
- 정확한 키워드 입력: -jpg와 같이 간단한 키워드는 직관적이지만, 복잡한 조건(예: 도메인, MIME 타입)은 정확한 문법을 확인해야 함.
- 캐시 비활성화: 정확한 네트워크 요청을 분석하려면 Disable cache 옵션을 체크.
- 성능 고려: 요청이 많은 페이지에서 필터링은 CPU 사용량을 증가시킬 수 있으므로, 필요한 요청만 분석.
마무리
크롬 개발자 도구의 Network 패널에서 Invert 필터(또는 - 접두사를 사용한 반전 필터링)는 특정 조건을 제외한 나머지 네트워크 요청을 분석하는 데 매우 유용합니다. 이미지, 특정 도메인, 성공 응답 등을 제외하고 문제를 빠르게 파악할 수 있어, 디버깅 시간을 단축할 수 있습니다.
반응형