브라우저의 개발자 도구를 보면, 제일 먼저 보이는 것은 요소 검사, Inspect라고 불리는 것이 있는데요. 그거 말고 네트워크 탭이 유용한 경우가 꽤 있습니다.

주로, 앱을 만들 때, 웹의 정보를 끌어들이기엔 HTML 요소를 분석하는 것도 방법이지만, 스크립트를 통해서 실시간으로 정보를 비동기로 가져오는 경우가 더 많기 때문입니다.

특히 유용한 정보는 정적으로 들어있는 경우가 잘 없죠.

이 때 네트워크 탭에서 딱히 별다른 것이 잡히지 않는데도 활발하게 데이터가 갱신되는 페이지를 볼 수 있습니다.

요즘 가장 핫한 가상 화폐 시세 같은 경우가 바로 거기에 해당하겠네요. 새로고침을 하지 않아도 즉시즉시 눈앞에 드러나고 있죠.

이 경우, HTTP 연결을 통해 매번 비동기로 가져오기엔 비용이 크기 때문에 HTML5에서 도입된 WebSocket이란 걸 쓴다고 합니다.

WebSocket은 추가 연결 과정, 헤더 전송이 불필요하므로 빠르게 실시간으로 정보를 수신하기에 매우 유용합니다.

이런 흐름에 발맞추어, 브라우저에서도 관련 지원 기능을 넓히고 있습니다.

Chrome이 그 대표적 사례로, Canary에서 먼저 선보인 기능이지만 진작에 정식 버전에도 WebSocket을 분석할 수 있게 했습니다.

그러나 실망스러운 화면만 나타나더군요.

Nothing Here
Nothing Here

이 상황을 어찌 해야 할까요.

Chrome을 잘못 설치했나, 그렇게 고민에 휩싸이면서 Firefox도 살펴봤는데 이쪽도 가관입니다.

플러그인이 업데이트 되지 않아서 쓸 수 없었습니다(…)

그래서 마침내 구글링을 통해 도달한 해답은 이것이었습니다.

Chrome Dev Tools WebSocket
Chrome Dev Tools WebSocket

출처: https://stackoverflow.com/questions/44533111/chrome-59-websocket-frames-no-longer-visible-in-devtools

더 이상의 말이 필요 없습니다.

이 덕분에 무사히 데이터 분석을 마칠 수 있었습니다.

이제 남은 과제는 이걸 어떻게 클라이언트에서 구현하느냐 일 것 같습니다.