Skip to content

Debugging web content

Follow live updates in the WebSockets tab

Read the messages a web page and its server push to each other, and find the one that broke the screen.

Why: chats, live prices and order statuses arrive over WebSockets, not ordinary requests, so the Network list doesn’t show them. This tab does, and shows the exact message that came before a bug.

  1. Open the WebSockets tab. A WebSocket is a connection that stays open, so the server can send updates whenever it wants.
  2. Each line is one message: an arrow up was sent by the app, an arrow down came from the server, with its length and time.
  3. Click a message, such as the price update, to read it in full.
  4. Look for the message right before things went wrong: here the order failed with out_of_stock, and the app never told the user.
  • The tab works without opening DevTools.
  • Holtdroid keeps the session’s socket traffic from the moment the app started, so the tab shows it all even after you reload the portal page or open the session on another computer.
  • Clear empties the list in your browser only. Hide under 15 B leaves out pings and other tiny messages. Pause stops the list; resuming fills in what came meanwhile.
  • Event streams (another way servers push updates) show up here too.
  • While the session is recorded, click a message’s time to put a marker on the recording at that moment.
  • The list is empty: the page hasn’t opened a socket yet. Open the part of the app with live data.
  • A socket is marked as video and has no messages: video streams are left out on purpose, they would flood the list.

More details: WebSockets, WebView DevTools.