← 기능 섹션으로 돌아가기
Pro

Request Mocker

Request Mocker는 백엔드를 건드리지 않고 브라우저에서 네트워크 트래픽을 변경합니다. 요청을 차단하고, 요청 및 응답 헤더를 설정 또는 제거하고, 자체 상태 코드, 본문 및 지연을 반환하므로 실제 API가 요청 시 생성하지 않는 상태를 테스트할 수 있습니다.

일부 주에는 도달하기가 매우 어렵습니다. 빈 대시보드에는 빈 응답이 필요하고, 재시도 배너에는 500이 필요하고, 로드 스켈레톤에는 느린 엔드포인트가 필요하며, 프런트엔드에는 아직 존재하지 않는 엔드포인트가 필요합니다. 일반적으로 각각은 백엔드 변경, 시드된 데이터베이스 또는 제공하지 않기를 바라는 주석 처리된 행을 의미합니다.

Request Mocker는 브라우저에서 이러한 상태를 생성합니다. 부분 문자열이나 와일드카드를 사용하여 URL을 일치시킨 다음 어떤 일이 일어날지 결정합니다. 요청을 차단하여 페이지에 오류가 표시되도록 하거나, 요청 또는 응답 헤더를 즉시 다시 작성하거나, 선택한 상태 코드, 콘텐츠 유형, 본문 및 지연이 포함된 미리 준비된 응답을 반환합니다. 페이지에서는 차이점을 알 수 없으므로 실제 오류 처리, 빈 상태 및 시간 초과가 모두 실제로 실행됩니다.

차단 및 헤더 재작성은 Chrome의 declarativeNetRequest 규칙을 사용하므로 다시 로드할 때를 포함하여 페이지가 요청하는 모든 것에 적용됩니다. 가짜 응답은 페이지 내부에서 가져오고 XMLHttpRequest를 위해 제공되며 패널은 규칙당 적중 카운터와 함께 제공되는 각 응답을 기록하므로 규칙이 생각하는 것과 일치하는지 한 눈에 확인할 수 있습니다.

규칙은 의도적으로 제거하기 쉽습니다. 사이트별로 저장되고 현재 탭에만 적용되며 도구를 닫는 순간 모든 항목이 제거됩니다. 따라서 실행 중이라는 사실을 잊은 모의 문제를 디버깅하는 데 오후 시간을 보낼 방법이 없습니다.

라이브 미리보기
app.example.com
Request Mocker 이 탭에는 3개의 규칙이 활성화되어 있습니다.
새로운 규칙
모의응답 GET /api/orders
상태 500 지연 ms 1200 규칙 추가
규칙
모조품 GET /api/orders → 500 7 ●
차단하다 ANY analytics.vendor.com/* ●
헤더 ANY /api/* → Cache-Control: no-store ●
조롱된 응답 제공
GET 500 /api/orders?page=1 · fetch · 14:22:07
GET 500 /api/orders?page=2 · fetch · 14:22:11
주요 기능

모든 요청 차단

URL 및 메소드와 일치하는 요청이 떠나는 것을 중지하고 스크립트, 이미지, 추적기 또는 API 호출이 전혀 도착하지 않을 때 페이지가 어떻게 작동하는지 관찰하십시오.

즉석에서 헤더 다시 작성

서버 변경 없이 요청 및 응답 헤더를 설정 또는 제거합니다. Authorization 헤더를 추가하고, Cache-Control: no-store를 강제하거나, 헤더를 제거하여 중단된 부분을 확인합니다.

자신의 응답 반환

선택한 상태 코드와 콘텐츠 유형으로 작성한 본문을 제공하세요. 빈 목록, 잘못된 페이로드, 아직 존재하지 않는 엔드포인트에 적합합니다.

오류 및 느린 네트워크 시뮬레이션

요청 시 500, 429 또는 404를 반환하고 밀리초 단위의 지연을 추가하여 응답을 보류하여 로딩 상태, 스피너 및 시간 초과 처리를 올바르게 테스트할 수 있습니다.

하위 문자열 또는 와일드카드 일치

/api/users와 같은 조각과 느슨하게 일치시키거나 *.example.com/v1/*와 같은 와일드카드와 정확하게 일치시키고 규칙을 단일 HTTP 메서드로 좁힙니다.

사이트별로 저장되고 종료 시 지워짐

규칙은 해당 규칙을 만든 사이트에 속하며 현재 탭에만 적용됩니다. 도구를 닫으면 모든 활성 규칙이 제거되므로 뒤에서 트래픽을 가로채는 것이 없습니다.

주요 활용 사례

빈 상태 테스트

목록 엔드포인트에 대해 빈 배열을 반환하고 UI가 적절한 빈 상태 또는 어색한 빈 패널을 표시하는지 확인하세요.

오류 처리 강제 실행

엔드포인트가 요청 시 500 또는 429를 반환하도록 만들어 재시도 배너, 알림 및 대체 복사본이 모두 실제로 나타나는지 확인하세요.

아직 존재하지 않는 API에 대한 구축

백엔드가 아직 작성되는 동안 합의된 응답 형태를 모의하고 이에 대해 전체 프런트엔드를 구축합니다.

타사 스크립트 진단

분석, 채팅 또는 광고 스크립트를 차단하여 페이지 속도를 늦추거나 레이아웃을 깨뜨리는 것인지 확인하세요.

느린 네트워크 동작 확인

한 엔드포인트에 2초 지연을 추가하고 단일 호출이 지연될 때 스켈레톤, 스피너 및 시간 초과가 어떻게 유지되는지 살펴보세요.

사용법
1

Request Mocker 열기

DevSuite Pro 도크에서 Request Mocker 아이콘을 클릭합니다. 상단에는 규칙 양식이 있고 그 아래에는 이 사이트에 대해 저장된 규칙이 있는 패널이 열립니다.

2

무슨 일이 일어날지 선택하세요

차단 요청, 헤더 편집 또는 모의 응답을 선택하고 선택적으로 규칙을 POST와 같은 하나의 방법으로 제한합니다.

3

일치할 URL을 말하세요.

/api/users와 같은 하위 문자열을 입력하거나 *.example.com/v1/*와 같은 와일드카드를 사용하세요. 규칙이 가져오기 및 XHR 호출에만 적용되는지 아니면 모든 요청 유형에 적용되는지 선택합니다.

4

세부사항을 입력하고 추가하세요.

헤더의 경우 한 줄에 하나씩 작성합니다. 이름: 값을 설정하려면 값을, 이름: 자체적으로 제거하면 됩니다. 모의의 경우 상태, 지연, 콘텐츠 유형 및 본문을 설정합니다. 규칙 추가를 클릭하면 즉시 적용됩니다.

5

작동하는 것을 지켜본 후 닫으세요.

페이지를 다시 로드하거나 사용하면 각 규칙 옆에 적중 횟수와 함께 가짜 응답이 제공될 때 로그에 표시됩니다. 진행하면서 규칙을 전환, 편집 또는 삭제합니다. 도구를 닫으면 모두 지워집니다.

시작할 준비가 되셨나요?

DevSuite Pro를 무료로 설치하고 브라우저용 71개 이상의 개발자 도구를 사용해보세요.

Chrome에 추가 Edge에 추가 Firefox에 추가