FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Adds WebSocket support to Network panel (GSoC'26) by Victowolf · Pull Request #9968 · flutter/devtools · GitHub

/ devtools Public

Adds WebSocket support to Network panel (GSoC'26) - #9968

Open
Victowolf wants to merge 5 commits into
flutter:masterfrom
Victowolf:websocket-support
ConversationCommits (5)ChecksFiles changed
Open

Adds WebSocket support to Network panel (GSoC'26)#9968
Victowolf wants to merge 5 commits into
flutter:masterfrom
Victowolf:websocket-support

Conversation

Victowolf commented Aug 18, 2026

Copy link
Copy Markdown
Contributor

Fixes #9507
Tracking issue: Victowolf/GSoC-Progress-Tracking#8

This contribution is part of the Google Summer of Code 2026 project:

"Add WebSocket/gRPC support to Flutter DevTools Network Panel"

This PR adds WebSocket support to the Flutter DevTools Network panel.

Previously, dart:io WebSocket connections appeared as opaque SOCKET requests in the Network screen. This PR extends the existing networking models and UI to recognize WebSocket profiling data and provide dedicated inspection of WebSocket connections and frame activity.

What's included

  • Add WebSocket-specific network request modeling.
  • Display WebSocket connections in the Network request table as WEBSOCKET.
  • Display WebSocket connection details in the Overview section, including:
    • URI
    • Connection ID
    • Protocol
    • Connection status
    • Bytes sent/received
    • Frames sent/received
    • Ping/pong counts
    • Start/end timestamps
    • Connection duration
  • Add WebSocket frame inspection in the Network inspector.
  • Display WebSocket lifecycle and frame events such as:
    • Connect
    • Open
    • Send
    • Receive
    • Close
    • Error
    • Ping/Pong
  • Display frame-level information including:
    • Timestamp
    • Direction
    • Opcode
    • Payload size
  • Add WebSocket timing visualization.
  • Handle open connections with pending end time/duration and closed connections with calculated duration.
  • Add and update tests covering WebSocket models, Network table rendering, Overview, timing, and frame inspection.
  • Verify the implementation against a real Dart WebSocket application connected to DevTools through the VM Service.

Tests Extended:

  • network_controller_test.dart
  • network_model_test.dart
  • network_profiler_test.dart
  • network_request_inspector_test.dart
  • network_table_test.dart

Updated UI:

Pre-launch Checklist

General checklist

  • I read the Contributor Guide and followed the process outlined there for submitting PRs.
  • I read the Tree Hygiene wiki page, which explains my responsibilities.
  • I read the Flutter Style Guide recently, and have followed its advice.
  • I signed the CLA.
  • I updated/added relevant documentation (doc comments with ///).

Issues checklist

  • I listed at least one issue that this PR fixes in the description above.

Tests checklist

  • I added new tests to check the change I am made

AI-tooling checklist

  • I did use AI tooling, and...
    • I read the AI contributions guidelines and agree to follow them.
    • I reviewed all AI-generated code before opening this PR.
    • I understand and am able to discuss the code in this PR.
    • I have verifed the accuracy of any AI-generated text included in the PR description.
    • I commit to verifying the accuracy of any AI-generated code or text that I upload in response to review comments.

Feature-change checklist

  • this PR does change the DevTools UI or behavior and...
    • I added an entry to packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md.
    • I included before/after screenshots and/or a GIF demo of the new UI to my PR description.
    • I ran the DevTools app locally to manually verify my changes.

If you need help, consider asking for help on Discord.

gemini-code-assist Bot reviewed Aug 18, 2026
View reviewed changes

gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Code Review

This pull request introduces WebSocket profiling support to the DevTools network screen. It adds a new WebSocket request type, updates the NetworkController and NetworkService to fetch and process WebSocket traffic, and implements UI views (WebSocketFramesView and overview rows) to inspect WebSocket connections and their frames. The review feedback highlights a logical bug in updateLastRefreshTime() where socket refresh is called twice instead of updating the WebSocket refresh time, and suggests wrapping the DataTable in WebSocketFramesView with a horizontal scroll view to prevent layout overflows.

Comment thread packages/devtools_app/lib/src/screens/network/network_controller.dart Outdated
Comment thread packages/devtools_app/lib/src/screens/network/network_request_inspector_views.dart Outdated
Victowolf changed the title [dart:io] Adds WebSocket support to Network panel (GSoC'26) Adds WebSocket support to Network panel (GSoC'26) Aug 18, 2026
Victowolf requested a review from a team as a code owner August 18, 2026 19:08

crackedhandle commented Aug 18, 2026

Copy link
Copy Markdown

For WebSocket frame inspection, should each frame be represented as a separate event in the timeline, or should multiple frames of the same connection be grouped in some way to avoid making the timeline too dense for long-lived connections?

Victowolf commented Aug 18, 2026

Copy link
Copy Markdown
Contributor Author

This PR aims to integrate the entire WebSocket support from vm_service instrumentation to network panel. For long-lived, dense connections, time-interval-based grouping can be added as an enhancement after this PR lands.

srawlins requested changes Aug 19, 2026
View reviewed changes

srawlins left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Just a preliminary review; I haven't tried it or reviewed the tests.

Comment thread packages/devtools_app/lib/src/screens/network/network_controller.dart Outdated
Comment thread packages/devtools_app/lib/src/screens/network/network_model.dart Outdated
Comment thread packages/devtools_app/lib/src/screens/network/network_request_inspector_views.dart Outdated
Comment thread packages/devtools_app/lib/src/screens/network/network_request_inspector_views.dart Outdated
Comment thread packages/devtools_app/lib/src/screens/network/network_request_inspector_views.dart Outdated
Comment thread packages/devtools_app/lib/src/screens/network/network_service.dart Outdated
Comment thread packages/devtools_app/lib/src/screens/network/network_service.dart Outdated
srawlins requested a review from hannah-hyj August 19, 2026 03:59
Victowolf requested a review from srawlins August 19, 2026 13:57
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

bkonyi Awaiting requested review from bkonyi
kenzieschmoll Awaiting requested review from kenzieschmoll kenzieschmoll is a code owner
hannah-hyj Awaiting requested review from hannah-hyj
srawlins Awaiting requested review from srawlins srawlins is a code owner
1 more reviewer
gemini-code-assist[bot] gemini-code-assist[bot] left review comments
Reviewers whose approvals may not affect merge requirements

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Design and sizing for WebSocket support

3 participants

Back | FazBrowse Home | New Git URL