개발자도구 Block request URL 사용하기

브라우저에서 제공하는 개발자 도구를 사용하면 다양한 테스트를 수행해 볼 수 있다. 다양한 기능 중에 내가 유용하게 사용했던 기능을 소개하려고 한다. 해당 방법은 api 응답 오류 케이스에 대해 테스트할 때 사용해 볼 수 있다.

 

개발자 도구 Block request URL 사용하여 수신 파일 차단

Block request URL을 사용하면, 특정 파일의 request를 차단하여 해당 url이 응답이 없는 케이스를 테스트해 볼 수 있다.

 

 

개발자 도구 활용 방법

 

---

 

Block request URL 사용 방법

F12를 누르면 개발자도구를 켤 수 있다. 개발자도구를 켜고 다음을 따라 해보자.

개발자도구 > Network 탭 > 원하는 파일에서 마우스 오른쪽 버튼 클릭 > Block request URL 클릭.

이 과정으로 손쉽게 request를 차단할 수 있다.

step1

차단을 원하는 리소스를 block request url을 통해 차단하고 나면, 개발자도구 하단에 있는 Network request Blocking 탭에 해당 url이 추가된다. 체크박스를 통해 로드할 리소스를 선택할 수도 있다.

 

step2

 

Block 했던 리소스를 unblock 하려면, 블록 했던 리소스에서 오른쪽 마우스를 클릭하여 UnBlock {리소스}을 클릭하면 된다. 클릭하고 나면 사이트를 리로드 해주어야 반영이 된다.

 

step3

 

 

이렇게 원하는 리소스를 조절하고, 그 페이지를 새로고침 하면 차단한 리소스를 빼고 로딩을 수행한다. 만약에 특정 리소스가 없는 case에 대해 테스트 (api 오류 케이스)를 수행할 때 유용하게 사용할 수 있다.

만약 리소스가 없을 때, 얼럿이 노출하거나, 빈 목록이라는 empty 문구가 나오거나, 아예 해당 영역이 미노출된다거나 하는 정의된 기대결과가 있다면, 이것에 대해 테스트해 볼 수 있다.

 

 

 

---

함께 보면 좋은 글

개발자 도구로 웹 사이트 HTML 구조 보는 방법

 

개발자도구 스로틀링 설정 방법, 느린 인터넷 환경 테스트