How to debug WebSocket from iOS Device
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:
- Get Proxyman ready
- Config Proxyman on my iOS devices (iPhone / iPad)
- 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