Understanding WebSocket/gRPC Support in DevTools Network Panel

[Shrinath LR]

Hi Elliott Brooks and Samuel Rawlins,

I have been reading through the project idea and understanding how the Network panel currently works — it shows HTTP and HTTPS traffic clearly, but when a developer uses WebSocket connections, there is no way to see what messages are being sent and received, how large they are, or when they happened. The goal of this project is to close that gap by making WebSocket traffic as visible in DevTools as HTTP traffic is today.

My question before I begin drafting the full proposal:

The project description mentions extending dart:io, dart:developer, and the VM Service to record and expose WebSocket traffic. For the approach of recording WebSocket frames — is the intent to instrument the existing WebSocket implementation inside dart:io itself (so all WebSocket traffic is captured automatically), or is the preferred approach to create a separate wrapper or package that developers would opt into, similar to how the http_profile package works for third-party HTTP clients?

Understanding this will help me plan the right approach for the proposal and avoid going in the wrong direction early.

Thank you for your time.

Best regards,
Shrinath L R

[Samuel Rawlins]

On Mon, Mar 9, 2026 at 8:16 AM Shrinath LR <shrina...@gmail.com> wrote:

Hi Elliott Brooks and Samuel Rawlins,

I have been reading through the project idea and understanding how the Network panel currently works — it shows HTTP and HTTPS traffic clearly, but when a developer uses WebSocket connections, there is no way to see what messages are being sent and received, how large they are, or when they happened. The goal of this project is to close that gap by making WebSocket traffic as visible in DevTools as HTTP traffic is today.

My question before I begin drafting the full proposal:

The project description mentions extending dart:io, dart:developer, and the VM Service to record and expose WebSocket traffic. For the approach of recording WebSocket frames — is the intent to instrument the existing WebSocket implementation inside dart:io itself (so all WebSocket traffic is captured automatically), or is the preferred approach to create a separate wrapper or package that developers would opt into, similar to how the http_profile package works for third-party HTTP clients?

Great question! The idea is to instrument the existing WebSocket implementation. Whether the instrumentation is "active" would depend on a bool setting, such as HttpClient.enableTimelineLogging. This is the existing bool used by DevTools to toggle "timeline logging" on and off, but since it is in "user space," I think that a user app could flip that property in it's main method, in order to turn on logging. Not that I would recommend any user doing that, but it might be helpful for debugging the timeline logging functionality.

Understanding this will help me plan the right approach for the proposal and avoid going in the wrong direction early.

Thank you for your time.

Best regards,
Shrinath L R

--
You received this message because you are subscribed to the Google Groups "dart-gsoc" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dart-gsoc+...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/dart-gsoc/81f20819-316b-4467-9b71-1d19507e6937n%40googlegroups.com.

[Shrinath LR]

Hi Elliott and Samuel,

Thank you for the clear explanation — that really helps. So the plan is to instrument WebSocket inside dart:io itself, with a similar bool toggle like HttpClient.enableTimelineLogging to control when recording is active.

Before I go further, I wanted to ask — are there any specific documents, codebases, or concepts you would recommend I study to build a strong understanding of this area? Things like how dart:io internally handles WebSocket, how the VM Service works, or how DevTools communicates with a running app — I want to make sure I understand the fundamentals properly before going deeper.

Any pointers from your side would be really helpful.

Thank you for your time.

Best regards,

Shrinath L R

[Samuel Rawlins]

Sorry for the extreme delay! Responses inline:

On Wed, Mar 11, 2026 at 12:00 PM Shrinath LR <shrina...@gmail.com> wrote:

Hi Elliott and Samuel,

Thank you for the clear explanation — that really helps. So the plan is to instrument WebSocket inside dart:io itself, with a similar bool toggle like HttpClient.enableTimelineLogging to control when recording is active.

Yes, I think so.

Before I go further, I wanted to ask — are there any specific documents, codebases, or concepts you would recommend I study to build a strong understanding of this area? Things like how dart:io internally handles WebSocket, how the VM Service works, or how DevTools communicates with a running app — I want to make sure I understand the fundamentals properly before going deeper.

Well, I doubt anything is documented well in this code, so it will mostly be about reading the code itself. :D The VM service protocol might be documented, along with VM service extensions.

As far as other literature to read, you might familiarize yourself with WebSockets. I am not really familiar with the protocol at all, so that would be a big boost.

Any pointers from your side would be really helpful.

Thank you for your time.

Best regards,

Shrinath L R

On Monday, 9 March 2026 at 20:54:16 UTC+5:30 sraw...@google.com wrote:

On Mon, Mar 9, 2026 at 8:16 AM Shrinath LR <shrina...@gmail.com> wrote:

Hi Elliott Brooks and Samuel Rawlins,

I have been reading through the project idea and understanding how the Network panel currently works — it shows HTTP and HTTPS traffic clearly, but when a developer uses WebSocket connections, there is no way to see what messages are being sent and received, how large they are, or when they happened. The goal of this project is to close that gap by making WebSocket traffic as visible in DevTools as HTTP traffic is today.

My question before I begin drafting the full proposal:

The project description mentions extending dart:io, dart:developer, and the VM Service to record and expose WebSocket traffic. For the approach of recording WebSocket frames — is the intent to instrument the existing WebSocket implementation inside dart:io itself (so all WebSocket traffic is captured automatically), or is the preferred approach to create a separate wrapper or package that developers would opt into, similar to how the http_profile package works for third-party HTTP clients?

Great question! The idea is to instrument the existing WebSocket implementation. Whether the instrumentation is "active" would depend on a bool setting, such as HttpClient.enableTimelineLogging. This is the existing bool used by DevTools to toggle "timeline logging" on and off, but since it is in "user space," I think that a user app could flip that property in it's main method, in order to turn on logging. Not that I would recommend any user doing that, but it might be helpful for debugging the timeline logging functionality.

Understanding this will help me plan the right approach for the proposal and avoid going in the wrong direction early.

Thank you for your time.

Best regards,
Shrinath L R

--
You received this message because you are subscribed to the Google Groups "dart-gsoc" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dart-gsoc+...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/dart-gsoc/81f20819-316b-4467-9b71-1d19507e6937n%40googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "dart-gsoc" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dart-gsoc+...@googlegroups.com.

To view this discussion visit https://groups.google.com/d/msgid/dart-gsoc/1f4da9a0-6ae2-4005-944d-2430e6dee6afn%40googlegroups.com.

[Hashim saffarini]

Hi Samuel,

Thank you for the insight! I'm Hashim, a Flutter developer interested in this project for GSoC 2026.

I've been reading through the WebSocket RFC and dart:io's WebSocket source. I'm now building the ProfileableWebSocket sample — a wrapper that intercepts frames and records timing, size, and type.

Quick question: for the sample, is it acceptable to use the wrapper approach to demonstrate the UI/data model, even though the final implementation will instrument dart:io directly?

Best regards, Hashim Saffarini

[Samuel Rawlins]

On Tue, Mar 24, 2026 at 4:58 PM Hashim saffarini <hashimsaf...@gmail.com> wrote:

Hi Samuel,

Thank you for the insight! I'm Hashim, a Flutter developer interested in this project for GSoC 2026.

I've been reading through the WebSocket RFC and dart:io's WebSocket source. I'm now building the ProfileableWebSocket sample — a wrapper that intercepts frames and records timing, size, and type.

Quick question: for the sample, is it acceptable to use the wrapper approach to demonstrate the UI/data model, even though the final implementation will instrument dart:io directly?

Yes, this is fine. 

To view this discussion visit https://groups.google.com/d/msgid/dart-gsoc/6d9f38a0-b248-422d-8b19-cb1e432f884cn%40googlegroups.com.

[Hashim saffarini]

Hi Samuel,

I've finished building the ProfileableWebSocket sample. Here's the repo:

https://github.com/hashimsaffarini/dart_websocket_sample

It includes:

• ProfileableWebSocket wrapper that intercepts and records every frame
• FrameEvent data model (timestamp, direction, size, type)
• 5 passing tests against a real local echo server
• CLI app with a live traffic table

I'm now starting to work on the proposal.

Best regards,
Hashim Saffarini