Added size support to Network tab (#9744) ## 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 <img width="1359" height="882" alt="Screenshot 2026-03-27 233804" src="https://github.com/user-attachments/assets/4ddce5eb-1a4b-4a9e-80b6-cd16fa226c13" /> --- ## Future Work * Add request size support when VM-level data becomes available * Introduce separate request/response size columns * Improve accuracy via VM instrumentation --- ### General checklist * [x] I read the Contributor Guide * [x] I read the Tree Hygiene guidelines * [x] I followed the Flutter Style Guide * [x] I signed the CLA * [x] I updated relevant documentation --- ### Issues checklist * [x] This PR fixes #6165 --- ### Tests checklist * [x] Added unit tests for new functionality --- ### AI-tooling checklist * [x] I used AI tooling responsibly and verified all generated content --- ### Feature-change checklist * [x] This PR changes DevTools UI * [x] Added entry to `NEXT_RELEASE_NOTES.md` * [x] Included screenshots * [x] Verified changes locally
Dart & Flutter DevTools is a suite of performance tools for Dart and Flutter.
For documentation on installing and trying out DevTools, please see our docs.
Contributions welcome! See our contributing page for an overview of how to build and contribute to the project.
By using Dart DevTools, you agree to the Google Terms of Service. To understand how we use data collected from this service, see the Google Privacy Policy.