[크롬개발자도구] 필터

이번 포스트에서는 크롬 개발자 도구에서 사용되는 필터들에 대해 살펴보자.

 

크롬 개발자 도구의 필터

 

크롬 개발자의 filter들

크롬 개발자 도구에는 다양한 곳에 필터들이 존재한다.

Network 텝의 필터

Console 탭의 필터

이 필터들을 사용할 때는 일정한 규칙이 존재한다.

 

기본 필터링

1-1. 텍스트 필터링

가장 기본적인 방법으로, 필터 입력창에 텍스트를 입력하면 Name에 해당 텍스트가 포함된 모든 요청을 찾아준다.

• 예시: logo.png -> https://example.com/assets/images/logo.png  요청 매칭
• 예시: api/users -> https://example.com/api/users/1 요청 매칭

1-2. 제외(부정) 필터링

텍스트 앞에 마이너스(-) 기호를 붙이면 해당 텍스트가 포함된 요청을 제외합니다. 여러 개를 이어서 사용할 수 있습니다.

• 예시: -chrome-extension:// -> chrome-extension:// 으로 시작하는 모든 요청을 숨깁니다.
• 예시: -google-analytics.com -> Google Analytics 관련 스크립트 요청을 숨깁니다.

 

키워드 기반 고급 필터링

단순 텍스트 검색을 넘어, 특정 속성을 기준으로 정밀하게 필터링할 수 있습니다. 키워드:값 형식으로 사용할 수 있다.

필터 키워드	설명	사용 예시
domain	특정 도메인에서 온 요청을 필터링	domain:*.naver.com (와일드카드 * 사용 가능) -domain:google.com (특정 도메인 제외)
method	특정 HTTP 요청 메서드(GET, POST 등)를 필터링	method:POST
status-code	특정 HTTP 상태 코드를 필터링	status-code:404 (찾을 수 없는 리소스만 보기) -status-code:200 (성공(200)한 요청 제외하고 보기)
mime-type	리소스의 MIME 타입을 기준으로 필터링 (content-type도 동일하게 작동)	mime-type:image/jpeg (JPEG 이미지만 보기) mime-type:application/json (JSON 응답만 보기)
scheme	URL의 프로토콜(scheme)을 기준으로 필터링	scheme:https (https 요청만 보기) -scheme:chrome-extension (확장 프로그램 요청 제외)
has-response-header	응답 헤더에 특정 헤더가 존재하는지 여부로 필터링 (값은 확인하지 않음)	has-response-header:Cache-Control (캐시 제어 헤더가 있는 응답 찾기)
larger-than	지정된 크기보다 큰 리소스를 필터링 (단위: k=KB, m=MB)	larger-than:500k (500KB보다 큰 리소스 찾기, 성능 최적화에 유용)

특히 특정 extension에서 발생하는 요청, 오류를 숨기기 위해 -scheme:chrome-extension이 많이 사용된다.

 

여러 필터 조합하기

여러 필터를 공백으로 구분하여 함께 사용하면 AND 조건으로 작동한다. 이를 통해 매우 구체적인 요청을 찾아낼 수 있다.

예시 1: 실패한 POST 요청 찾기

# POST 메서드이면서 서버 오류(500)가 발생한 요청만 필터링
method:POST status-code:500

예시 2: 특정 도메인의 100KB 이상인 이미지 찾기

# my-cdn.com 도메인에서 온 이미지 파일 중 100KB가 넘는 파일만 필터링
domain:my-cdn.com mime-type:image larger-than:100k

 

예시 3: 특정 API를 제외한 모든 요청 보기

# 주기적으로 호출되는 헬스 체크 API를 제외하고 다른 요청들을 확인할 때
-url:/api/v1/health-check

 

리소스 타입 필터 버튼

필터 입력창 아래에 있는 버튼들(All, Fetch/XHR, JS, CSS, Img 등)을 클릭하는 것도 일종의 필터이다. 이는 mime-type 필터의 단축키와 같습니다.

Network 탭에 있는 리소스 타입 필터 버튼들

• Fetch/XHR 클릭: AJAX 요청만 보여줍니다.
• JS, CSS 클릭: 각각 JavaScript, CSS 파일만 보여줍니다.
• 여러 타입을 선택하려면 Ctrl(Cmd) 키를 누른 채로 클릭하면 됩니다.

 

Extension의 JavaScript 처리

브라우저에 설치한 Extension들에서 발생하는 오류가 콘솔 창에 나오지 않게 하려면 filter 창에 다음과 같이 -url:chrome-extension을 입력해준다.

Console에서 Extension log 제거