In this tutorial, we would like to show how to intercept and debug the WebSocket message from iOS device during the development phase by using Proxyman, which is a powerful tool for debugging HTTP/HTTPS and WebSocket.

The slack app is the potential candidate since it’s a chat platform and built-in with Websocket mechanism.

Debug WebSocket from Slack app

Here are the tutorial steps we’re going to achieve:

1. Get Proxyman ready
2. Config Proxyman on my iOS devices (iPhone / iPad)
3. See the WebSocket content (See the message flow)

1. Get Proxyman ready

First of all, the easy way to get Proxyman is that we download directly from Proxyman’s homepage or from Terminal.

$ brew cask install proxyman

Dashboard of Proxyman

2. Config Proxyman on my iOS devices (iPhone / iPad)

• It’s time to navigate to Certificate Menu -> Install Proxyman CA for iOS Device.

Install Proxyman CA to iPhone

Please make sure that we carefully follow the instruction in order to properly install the Proxyman Certificate in your iOS Device.

If not, it’s impossible to capture HTTPS/WSS contents.

• Launch Slack app on iPhone then Proxyman will list out all traffics

Enable HTTPS Response for Slack's Websocket Domain

When everything is ready, we can see all the traffics from my iPhone 👏

• Search the WebSocket domain (⌘+F)
• Right-click and select Enable HTTPS Response

If you’re wondering what could be done: How I use Proxyman to see HTTPS requests/responses on my iPhone? will show the detail.

3. Capture the WebSocket messages

• Request and Response are shown on the Response Panel.

The message flow of Websocket on Slack app

In this step, we’re able to intercept the Secure WebSocket (WSS) message, and all messages are ordered by timestamp.

On top of that, there are plenty of convenience features:

• Realtime WebSocket message: The connection is still alive and we’re able to see the message on the fly.
• Auto parse the Binary content if it’s text.
• Tree View, JSON Previewer and Message Filter (Sent / Receive / All)

JSON Tree View for JSON message

Filter: Only Sent messsage

• Edit the message with your favorited Text Editor. Sublime is my one.

Open message content with Sublime

• Advanced info: By right-clicking on the Columns bar

Show advanced info

What going next?

Debugging WebSocket message is one of a complicated task for the developer.

Therefore, Proxyman is a rescuer to help us capture and visualize the message flow in the easy way to debug.

---

Proxyman is a high-performance macOS app, which enables developers to capture and inspect HTTP/HTTPS requests from apps and domains on iOS device, iOS Simulator and Android devices.

Get it at https://proxyman.io