Repository navigation
[Step 4] Update DevTools UI to show WebSocket data #8
Description
Milestone 4 — DevTools UI Integration for WebSocket Inspection 🖥️
This milestone focuses on integrating WebSocket profiling data into the Flutter DevTools Network screen to provide real-time visibility into persistent socket communication.
The goal is to extend the existing Network panel experience so WebSocket connections and frame activity can be inspected similarly to HTTP requests.
Objectives
- Display WebSocket connections in the DevTools Network request table
- Add a dedicated “Frames” section for WebSocket traffic
- Show detailed frame-level information including:
- Timestamp
- Direction (sent/received)
- Payload size
- Payload preview/snippet
- Extend DevTools networking models to support WebSocket data structures
- Parse and render profiling data received from VM Service extensions
- Maintain UI consistency with existing HTTP inspection workflows
Planned Implementation Areas
Technical Direction
The DevTools networking layer will be updated to recognize WebSocket profiling data and represent it using dedicated models or extensions to the existing network request models.
A new UI section for frame inspection will be introduced, enabling developers to inspect real-time message flow, connection lifecycle activity, and payload information directly inside DevTools.
This milestone delivers the user-facing inspection experience for WebSocket debugging and completes the end-to-end profiling workflow from the Dart SDK to DevTools.
Activity
Victowolf commentedon Aug 13, 2026
ENTRY DATE: 14/08/2026UI Mapping for devtools
WebSocket connections will appear directly in the existing Network request table:
socketWebSocketSelecting a WebSocket connection will open its inspection view with two tabs:
Overview tab
Displays connection-level profiling information:
Frames tab
Displays the recorded WebSocket events in a table:
Selecting an individual frame opens an expanded details view containing:
Victowolf commentedon Aug 17, 2026
ENTRY DATE: 15/08/2026Updated Milestone 4 — WebSocket Integration into Flutter DevTools Network Panel
Goal
Integrate the completed WebSocket profiling backend into the Flutter DevTools Network screen.
The goal is to make WebSocket connections appear as Network entries alongside existing HTTP and Socket entries, while providing WebSocket-specific inspection through:
The implementation will reuse the existing Network infrastructure rather than introducing a separate WebSocket screen or controller.
Architecture
WebSocket Network Model
A new DevTools
WebSocketmodel will implement the existingNetworkRequestabstraction.It will wrap the VM Service WebSocket profiling models:
The model will expose the common Network properties required by the Network table:
The WebSocket model will maintain the connection identity using its connection ID so that subsequent profile updates modify the existing Network entry rather than creating a new entry.
Files to Change
1.
network_service.dartResponsibility
Fetch WebSocket profiling data from VM Service during the existing Network polling cycle.
Changes
Add WebSocket profile refresh handling alongside the existing network data refresh.
The service will call:
for each isolate.
It will maintain the timestamp required for incremental WebSocket updates so that subsequent refreshes request only newly updated profiling data.
Conceptually:
The WebSocket profile returned by VM Service will then be passed to
NetworkController.Also integrate WebSocket profile clearing with the existing
clearData()flow.2.
network_controller.dartResponsibility
Coordinate Network data and maintain the state exposed to the Network UI.
Changes
Extend the Network traffic processing pipeline to accept WebSocket profiling data.
The controller will pass WebSocket data to:
alongside HTTP and Socket data.
The existing polling mechanism will be reused. No separate WebSocket polling timer will be introduced.
The controller will continue to handle:
WebSocket connections will therefore participate in the same Network screen lifecycle as other Network entries.
3.
network_model.dartResponsibility
Define the DevTools-side models representing Network requests.
Changes
Add a WebSocket-specific
NetworkRequestimplementation.Conceptually:
The WebSocket model will:
NetworkRequest.notifyListeners()when its data changes.The model will distinguish between:
For example:
rather than combining these fields.
4.
CurrentNetworkRequestsinnetwork_controller.dartResponsibility
Maintain the collection of Network entries displayed by DevTools.
Changes
Extend
updateOrAddAll()so WebSocket connections can be inserted or updated.The update logic will follow the existing identity-based approach:
If the connection is new:
This ensures that polling does not create duplicate rows for the same WebSocket connection.
5.
network_request_inspector.dartResponsibility
Determine which detail tabs are displayed for the selected Network request.
Changes
Add WebSocket-specific tabs to
_generateTabs().Current generic structure:
HTTP adds:
WebSocket will add:
Result:
The existing HTTP and Socket behavior will remain unchanged.
6.
network_request_inspector_views.dartResponsibility
Render the detailed information for Network requests.
Changes
Extend
NetworkRequestOverviewViewwith WebSocket-specific information.The WebSocket Overview will display:
The existing timing/overview logic will also be extended so WebSockets are not incorrectly treated as HTTP requests.
7. New WebSocket Frames UI
A dedicated WebSocket frames view will be added for the
Framestab.Responsibility
Display WebSocket profiling events associated with the selected connection.
The table will contain:
Selecting an event will expose expanded details:
The frame view will update when the underlying WebSocket model receives new profiling events.
Network Table Integration
The existing
NetworkRequestsTablealready consumes:Therefore WebSocket entries will automatically participate in the existing Network table infrastructure.
The WebSocket model will provide the values required by the existing columns:
The Network table itself should require minimal or no WebSocket-specific changes.
The timestamp will represent the WebSocket connection/start timestamp, while
lastUpdatedwill remain a WebSocket Overview property.Incremental Updates
The WebSocket profile API supports incremental retrieval using:
The intended flow is:
Then:
This allows the Network panel to display persistent WebSocket activity without repeatedly retrieving the complete profile.
Selection and Live Updates
A selected WebSocket connection should remain selected while its profile is updated.
The connection ID will provide stable identity:
The same WebSocket model will notify listeners when its statistics or events change.
This allows:
to update without requiring a new selection.
Clear Profile
The existing Network clear operation will also clear WebSocket profiling data through:
After clearing:
Testing
Tests will be added for the DevTools WebSocket integration.
The testing scope will include:
Model
NetworkRequest.notifyListeners()is triggered when data changes.Network integration
updatedSincepolling works.UI
Expected Result
After Milestone 4, a running Dart application using WebSockets will expose the connection through the existing Flutter DevTools Network screen.
A WebSocket will appear as a normal Network entry and provide:
The implementation will reuse the existing Network Controller, NetworkRequest abstraction, polling mechanism, selection model, filtering, and inspector infrastructure while adding WebSocket-specific profiling and visualization where required.
Victowolf commentedon Aug 18, 2026
ENTRY DATE: 16/08/2026 -19/08/2026Victowolf commentedon Aug 26, 2026
ENTRY DATE: 20/08/2026 -22/08/2026Victowolf commentedon Aug 26, 2026
ENTRY DATE: 23/08/2026 -24/08/2026^15.3.0Victowolf commentedon Aug 26, 2026
ENTRY DATE: 25/08/2026