Added size support to Network tab by Victowolf · Pull Request #9744 · flutter/devtools

Victowolf · 2026-03-27T18:28:01Z

Overview

This PR adds support for displaying response payload size in the Network tab
and fixes #6165.

It introduces a new "Size" column in the network requests table and displays response size in the Overview panel of the request inspector.

Changes

1. Data Model Updates

File:
packages/devtools_app/lib/src/screens/network/network_model.dart

Added two new getters to the NetworkRequest base class:
- requestBytes
- responseBytes
Implemented these getters in the Socket class using:
- writeBytes : request size
- readBytes : response size

Purpose:
Expose byte-level data in a unified way for all network request types.

2. HTTP Data Handling

File:
packages/devtools_app/lib/src/shared/http/http_request_data.dart

Added logic to extract response size using the content-length header
Handles both String and List<String> header formats

Purpose:
Provide response size for HTTP requests when available, without requiring changes to the Dart VM.

3. Shared Utility

File:
packages/devtools_app/lib/src/screens/network/utils/http_utils.dart

Moved formatBytes into a reusable utility function
Uses decimal (base-10) units (kB, MB) to align with Chrome DevTools
Handles null and negative values safely

Purpose:
Ensure consistent formatting across the network table and inspector views.

4. Network Table UI

File:
packages/devtools_app/lib/src/screens/network/network_screen.dart

Added a new column: "Size"
Displays formatted response size
Shows - when size is unavailable

5. Request Inspector (Overview Panel)

File:
packages/devtools_app/lib/src/screens/network/network_request_inspector_views.dart

Added a new row:
- Response Size
Uses shared formatBytes utility

6. Tests

Added unit tests for:
- formatBytes utility in http_utils_test.dart
- responseBytes parsing logic in http_request_data.dart
Covers edge cases including:
- string and list headers
- invalid values
- null handling

Why request size is not included

Request size is not reliably available for HTTP requests due to limitations in the current DevTools and VM service APIs:

The Dart VM does not expose request payload size in HttpProfileRequest
HTTP request bodies are not always accessible or fully captured
Headers such as content-length are often absent for outgoing requests
Streaming and chunked requests complicate accurate measurement

While socket-level request size (writeBytes) is available, it is not consistently applicable to HTTP requests.

Therefore, including request size would require changes in the Dart SDK / VM layer.

This PR focuses on response size, which can be reliably determined using:

Socket readBytes
HTTP content-length header (when present)

Screenshot

Future Work

Add request size support when VM-level data becomes available
Introduce separate request/response size columns
Improve accuracy via VM instrumentation

Pre-launch Checklist

General checklist

I read the Contributor Guide
I read the Tree Hygiene guidelines
I followed the Flutter Style Guide
I signed the CLA
I updated relevant documentation

Issues checklist

This PR fixes Show size of network request in Network tab #6165

Tests checklist

Added unit tests for new functionality

AI-tooling checklist

I used AI tooling responsibly and verified all generated content

Feature-change checklist

This PR changes DevTools UI
Added entry to NEXT_RELEASE_NOTES.md
Included screenshots
Verified changes locally

srawlins

Looks great, thank you!

packages/devtools_app/lib/src/screens/network/network_request_inspector_views.dart

packages/devtools_app/lib/src/screens/network/network_model.dart

srawlins · 2026-03-27T18:52:37Z

Merge in the master branch to resolve that merge conflict.

packages/devtools_app/lib/src/screens/network/network_model.dart

Victowolf · 2026-03-27T20:29:34Z

Hi @srawlins
I’ve pushed fixes based on the failed tests.
Could you please approve the workflow so CI can run again?
Thanks!

Victowolf · 2026-03-29T05:36:22Z

Hi @srawlins,

One test failed: ubuntu-latest test_ddc

The failing test_ddc appears to be flaky (asyncEval returning null intermittently).
My changes were limited to the Network UI, but I fixed a parameter mismatch in ResponseSizeColumn, which i think was the cause of the failed test.
Could you please re-approve so CI can run again?

Thanks!

elliette · 2026-03-30T23:05:29Z

packages/devtools_app/lib/src/screens/network/network_request_inspector_views.dart

+  // - 2048 → "2.0 KB"
+  // - 1048576 → "1.0 MB"
+  // Values are rounded to one decimal place for KB and MB.
+  String _formatBytes(int? bytes) {


I think we should should use Chrome DevTools network panel as a model for our network panel as much as possible. It looks like they decided to standardize on using kB (1000 bytes) instead of KiB (1024 bytes) as their unit of measurement [1]. We should do the same unless there is a good reason not to.

[1] https://developer.chrome.com/blog/new-in-devtools-88#consistent-kb

yes.. right
i didn't knew about this, thanks for pointing it out.

updated 👍

elliette · 2026-03-30T23:07:50Z

packages/devtools_app/lib/src/screens/network/network_screen.dart

    statusColumn,
    typeColumn,
    durationColumn,
+    const ResponseSizeColumn(),


[nit] add this to the list of static const fields above

will update it...

updated 👍

elliette · 2026-03-30T23:09:27Z

packages/devtools_app/lib/src/shared/http/http_request_data.dart


+  @override
+  int? get responseBytes {
+    final headers = responseHeaders;


I don't think we need to assign responseHeaders to a new variable here, can simply write:

final contentLength = responseHeaders?['content-length'];

yes , we can merge it in a single line,
Thanks for this

updated 👍

elliette · 2026-03-30T23:11:27Z

packages/devtools_app/lib/src/screens/network/network_screen.dart

  @override
-  String getValue(NetworkRequest dataObject) {
-    return dataObject.uri;
+  String getValue(NetworkRequest data) {


I don't think this change is necessary

yes my bad, i changed it trying to fix a test fail, i will revert it back.

reverted 👍

…ition, simplify code, and revert unnecessary changes

elliette

Thanks! A few changes but looks good!

elliette · 2026-03-31T17:11:50Z

packages/devtools_app/lib/src/screens/network/network_screen.dart

+// - 1000000 → "1.0 MB"
+// Values are rounded to one decimal place for kB and MB.
+// Uses decimal (base-10) units to match Chrome DevTools.
+String _formatBytes(int? bytes) {


Move formatBytes into http_utils.dart so it can be used here and in network_request_inspector_view.dart, and add a test

Added the tests in test/shared/http/http_utils_test.dart.

elliette · 2026-03-31T17:13:05Z

packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md


 ## Network profiler updates

+- Added response size ("Res Size") column to the Network tab and displayed response size in the request inspector overview. -


Can remove ("Res Size"), i.e. "Added response size column to..."

Updated it 👍

elliette · 2026-03-31T17:14:16Z

packages/devtools_app/lib/src/shared/http/http_request_data.dart

  }

+  @override
+  int? get responseBytes {


Please add a test for this

Sure, added tests in /test/shared/http/http_request_data_test.dart

…ate units and added tests for responseBytes & formatBytes

Added size support to network tab

b1b848c

Victowolf requested review from a team, bkonyi and kenzieschmoll as code owners March 27, 2026 18:28

Victowolf mentioned this pull request Mar 27, 2026

Show size of network request in Network tab #6165

Open

Added release notes entry for network response size feature

aa06a0c

srawlins approved these changes Mar 27, 2026

View reviewed changes

packages/devtools_app/lib/src/screens/network/network_request_inspector_views.dart Outdated Show resolved Hide resolved

packages/devtools_app/lib/src/screens/network/network_model.dart Show resolved Hide resolved

Resolve merge conflict in release notes

63e2041

Victowolf added 2 commits March 28, 2026 00:29

Added documentation for byte formatting

49aa68b

Resolve merge conflict in release notes

249d990

srawlins approved these changes Mar 27, 2026

View reviewed changes

packages/devtools_app/lib/src/screens/network/network_model.dart Show resolved Hide resolved

Victowolf added 5 commits March 28, 2026 01:02

Fix lint: match parameter names with base class

4bb20f1

Fix lint: correct parameter name in AddressColumn

1b4fc25

Fix type handling for content-length header in responseBytes

ec2e7d9

Fix layout spacing to ensure consistent widget tree

3c17534

Fix variable placement for response size rendering

4257c47

Victowolf requested a review from srawlins March 28, 2026 12:51

srawlins changed the title ~~Added size support to Network tab [#Issue_6165]~~ Added size support to Network tab Mar 28, 2026

srawlins approved these changes Mar 28, 2026

View reviewed changes

Fix parameter name to match ColumnData override

6fb03f9

elliette requested changes Mar 30, 2026

View reviewed changes

Addressed Requested changes: update size units, refactor column defin…

b4a124b

…ition, simplify code, and revert unnecessary changes

Victowolf requested a review from elliette March 31, 2026 02:54

elliette requested changes Mar 31, 2026

View reviewed changes

Victowolf added 2 commits April 1, 2026 00:50

Addressed Rquested Changes: refactor formatBytes into http_utils, upd…

71e3db3

…ate units and added tests for responseBytes & formatBytes

fix : formatBytes test fail

bfb9fb4


		## Network profiler updates

		- Added response size ("Res Size") column to the Network tab and displayed response size in the request inspector overview. -

Conversation

Victowolf commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Changes

1. Data Model Updates

2. HTTP Data Handling

3. Shared Utility

4. Network Table UI

5. Request Inspector (Overview Panel)

6. Tests

Why request size is not included

Screenshot

Future Work

Pre-launch Checklist

General checklist

Issues checklist

Tests checklist

AI-tooling checklist

Feature-change checklist

Uh oh!

srawlins left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

srawlins commented Mar 27, 2026

Uh oh!

Uh oh!

Victowolf commented Mar 27, 2026

Uh oh!

Victowolf commented Mar 29, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elliette left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Victowolf commented Mar 27, 2026 •

edited

Loading