Pro

WebSocket 검사기

WebSocket 검사기는 페이지의 모든 연결에서 송수신되는 모든 WebSocket 프레임을 캡처합니다. 연결 생명주기(connecting/open/closed 상태 및 종료 코드), 프레임별 방향, 크기, 바이너리 여부, JSON 페이로드 자동 줄바꿈 미리보기 등을 제공합니다. 기존 개발자 도구의 부족한 부분을 채워주는 실시간 프로토콜 디버깅 도구입니다.

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

WebSocket은 채팅 앱, 실시간 대시보드, GraphQL 구독(Subscriptions), 멀티플레이어 게임 및 협업 에디터의 핵심 기술이지만 디버깅하기가 매우 까다롭습니다. 크롬 개발자 도구에서도 프레임을 볼 수 있지만 인터페이스가 불편하고 필터링 기능이 제한적입니다. WebSocket 검사기는 더 깔끔하고 목적에 특화된 뷰를 제공합니다. 이 도구는 페이지 컨텍스트 내의 네이티브 WebSocket 생성자에 래퍼(wrapper)를 설치하여 모든 새로운 WebSocket 연결을 가로챕니다. 각 연결은 URL, 상태(연결 중 → 열림 → 닫힘), 지속 시간 및 연결 종료 시의 종료 코드와 함께 목록에 표시됩니다. 송신 및 수신되는 모든 프레임은 타임스탬프, 방향, 크기, 바이너리 플래그 및 미리보기와 함께 캡처됩니다. 특정 프레임을 클릭하면 전체 페이로드를 확인할 수 있으며, JSON인 경우 자동으로 예쁘게(pretty-print) 포맷팅됩니다. 방향(송신/수신), 바이너리 전용 또는 특정 연결별로 필터링할 수 있습니다. 래퍼는 도구가 활성화될 때 설치되므로, 기존 연결을 캡처하려면 페이지를 새로고침해야 합니다. 도구 오픈 이후의 새로운 연결은 즉시 캡처됩니다.

라이브 미리보기

example.com

WebSocket 검사기 ● 2개 활성 연결

연결

wss://realtime.example.com/chat 열림 · 2분

wss://graphql.example.com/subscriptions 열림 · 8분

전체 ↑ 전송 ↓ 수신 ↑ 12 · ↓ 47 · 8.4 KB

                        ↓
                        14:32:05
                        
                        {"type":"connection_ack"}
                        28 B
                    

                        ↑
                        14:32:05
                        
                        {"type":"subscribe","id":"1","payload":...}
                        98 B
                    

                        ↓
                        14:32:06
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        412 B
                    

                        ↓
                        14:32:07
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        398 B
                    

                        ↓
                        14:32:14
                        BIN
                        [ArrayBuffer 1024 bytes]
                        1.0 KB
                    

                        ↓
                        14:32:15
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        389 B
                    

주요 기능

연결별 생명주기 추적

모든 WebSocket의 상태(연결 중/열림/닫힘), URL, 지속 시간, 종료 코드 및 종료 원인을 보여줍니다.

모든 프레임 캡처

송신(↑) 및 수신(↓)되는 모든 프레임을 타임스탬프, 크기, 바이너리 여부, 인라인 미리보기와 함께 표시합니다.

JSON 자동 포맷팅(Pretty-Print)

프레임을 클릭하여 전체 페이로드를 확인하세요. JSON 문자열은 읽기 편하도록 2칸 들여쓰기로 자동 포맷팅됩니다.

방향 및 바이너리 필터링

송신 전용, 수신 전용 또는 바이너리 전용으로 프레임을 필터링하여 디버깅 중인 내용에 집중하세요.

개별 연결별 필터링

특정 연결을 클릭하여 해당 연결의 프레임만 볼 수 있습니다. 채팅과 알림 등 여러 WebSocket이 활발히 작동할 때 유용합니다.

새 연결은 새로고침 불필요

도구 활성화 이후에 열리는 모든 WebSocket은 즉시 캡처됩니다. 도구 오픈 전부터 있던 연결을 잡고 싶을 때만 새로고침하세요.

주요 활용 사례

채팅 앱 디버깅

클라이언트와 서버 간에 어떤 메시지가 송수신되는지 정확히 확인하여 메시지 전달 실패 지점을 찾아내세요.

GraphQL 구독(Subscription) 디버깅

구독 작업과 들어오는 데이터 푸시를 검사하여 페이로드 불일치나 구독 종료 버그를 디버깅하세요.

프로토콜 리버스 엔지니어링

서드파티 실시간 API의 메시지 구조와 타이밍을 관찰하여 어떻게 작동하는지 이해하세요.

하트비트 / 핑퐁 모니터링

연결 유지(Keep-alive) 프레임이 예상 주기에 맞춰 전송되는지 확인하세요. 누락된 핑(Ping)은 예상치 못한 연결 끊김의 원인이 될 수 있습니다.

재연결 로직 디버깅

종료 이벤트(코드 및 원인)와 이어지는 새로운 연결 시도를 관찰하여 재시도/재연결 버그를 수정하세요.

사용법

WebSocket 검사기 열기

DevSuite Pro 독에서 WebSocket 아이콘을 클릭합니다. 도구가 활성화되고 연결 및 프레임을 보여주는 패널이 열립니다.

페이지 새로고침 (필요한 경우)

도구 활성화 '이전'에 열린 WebSocket은 캡처되지 않습니다. 새로고침하여 처음부터 연결을 가로채세요.

연결 모니터링

페이지에서 WebSocket이 열리면 연결 목록에 실시간 상태 업데이트와 함께 나타납니다.

프레임 탐색

모든 프레임이 실시간으로 기록됩니다. 방향별로 필터링하거나 특정 연결을 클릭하여 목록을 좁혀보세요.

프레임 상세 정보 클릭

프레임을 클릭하여 전체 페이로드(필요 시 JSON 포맷팅 적용)와 타임스탬프, 크기, 바이너리 여부를 확인하세요.