본문으로 건너뛰기

Custom Previewer Tab (커스텀 프리뷰어 탭)

Proxyman Custom Previewer Tab을 추가해 요청 또는 응답 본문을 JSON, Protobuf, HTML, MessagePack으로 보거나 Connection Log 탭을 추가하세요.

1. 기능 소개​

Custom Previewer Tab을 사용하면 Request 및 Response 패널에 탭을 추가할 수 있습니다. 각 탭은 항상 한 가지 형식으로 콘텐츠를 렌더링합니다.

이 도구는 다음과 같은 경우에 유용합니다:

  • Content-Type이 application/json이 아니더라도 BODY를 JSON으로 포맷
  • Content-Type이 application/x-protobuf가 아니더라도 본문을 Protobuf로 포맷
  • Web View에서 HTML 페이지 렌더링
  • 압축된 파일(HTML, CSS, JS)을 Beautify로 보기 좋게 정리
  • Multipart/form-data 보기
  • Content-Type과 관계없이 선택한 형식으로 본문 포맷 시도
  • MessagePack(msgpack)을 JSON으로 변환
  • Code Generator로 Swift, Node, Javascript, cURL 등 코드 생성
  • GraphQL 쿼리 Prettier 포맷
  • DNS, TCP, TLS, HTTP 세부 정보를 확인하는 Connection Log
Request 및 Response 체크박스, Connection Log가 체크되어 있고 Add Custom Tabs 버튼이 있는 Proxyman Custom Body Previewer Tabs 창

Request / Response 패널의 Custom Tabs 선택하기

정보

선택한 커스텀 탭은 Request 또는 Response 보기의 오른쪽에 추가됩니다

2. 사용 방법​

Custom Previewer Tab 창을 열려면:

  1. Request/Response 탭 바의 "+" 버튼을 클릭하거나 Tools → Custom Previewer Tab… 항목을 선택합니다.
  2. 체크박스를 체크하거나 해제해 커스텀 탭을 표시하거나 숨깁니다.
  3. 새 탭이 Request 또는 Response 패널에 나타납니다 ✅

2.1 Server-Sent Events 및 OpenAI 탭​

Proxyman 5.22.0 이상에서는 다음을 지원합니다:

  • OpenAI 엔드포인트에서 오는 Server-Sent Events용 SSE 탭: 각 데이터 이벤트의 인라인 JSON을 자동으로 보기 좋게 정리
  • OpenAI 탭: 스트리밍된 콘텐츠를 자동으로 병합해 채팅 화면의 출력과 비슷한 최종 결과 표시

2.2 Connection Log (연결 로그)​

  • Connection Log는 선택한 요청의 연결 정보를 보여줍니다. DNS 조회, TCP 연결, TLS 협상, 인증서, HTTP 헤더가 포함됩니다.
  • Request 탭 바에서 **+**를 클릭합니다. Request 아래에서 Connection Log를 체크하면 표시되고, 체크를 해제하면 숨겨집니다.
  • 이 탭은 Request 패널의 Summary 옆에 나타납니다. 기본으로 켜져 있으며, Proxyman은 선택 내용을 기억합니다.
  • 샘플 로그는 HTTP/2 가이드를, 모든 항목은 Connection Log 가이드를 참고하세요.

3. ⚡️ 고급: Scripting 도구로 커스텀 탭 만들기​

  • ✅ 탭에 직접 만든 데이터 표시
  • 본문을 디코딩하거나 본문 일부를 직접 만든 탭에 표시하고 싶을 때 유용합니다

사용 방법​

  1. Request/Response 탭 바의 "+" 버튼을 클릭하거나 Tools → Custom Previewer Tab… 항목을 선택합니다.
  2. Add Custom Tabs 버튼을 클릭합니다.
  3. Request 또는 Response 패널을 선택하고 탭 이름을 입력합니다.
  4. "..." 버튼을 클릭해 JavaScript 코드를 표시합니다.
  5. Scripting → Script List… 메뉴를 열고 새 스크립트를 만든 뒤, 이 코드를 사용해 원하는 데이터를 표시합니다.
onRequest와 onResponse에서 customPreviewerTabs 값을 설정하는 Proxyman Script Editor

데이터를 표시하는 코드 작성하기

  1. 완료
스크립트에서 가져온 데이터로 채워진 커스텀 body 탭과 json 탭을 보여주는 Proxyman

새 탭에 데이터 표시하기

4. 예제​

JSON TreeView 강제 렌더링​

Proxyman은 더 보기 좋게 확인할 수 있도록 JSON Tree View를 지원합니다.

컬럼 헤더를 우클릭하면 컬럼을 표시하거나 숨길 수 있습니다.

HTML 페이지 강제 렌더링​

Response 패널 목록에서 HTML Webview를 체크하면 HTML 응답을 원시 HTML 대신 웹 페이지로 렌더링합니다.

JavaScript 파일 Beautify​

Custom Previewer Tab 창 하단에서 Auto beautify the minified content를 체크합니다. 그러면 Proxyman이 압축된 HTML, CSS, JavaScript를 읽기 쉬운 형태로 정리합니다.

더 알아보기​

최종 수정: 에