Added size support to Network tab

[Victowolf]

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!

[srawlins]

Merge in the master branch to resolve that merge conflict.

[Victowolf]

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

[Victowolf]

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]

Thanks! A few changes but looks good!

[elliette]

Thank you, looks good!

[Victowolf]

Hi, @elliette @srawlins
Could anyone also please approve the workflow so CI can run?