Enhancement Request for Detailed Connection Phase Analysis in Flutter DevTools

Hello Flutter DevTools Team,

While monitoring network requests within my application using Flutter DevTools, I've noticed that the network analysis feature lacks detailed information during the connection phase of network requests, such as Socket Initialization, DNS Lookup, TCP Handshake, and SSL Handshake.

Proposed Enhancements:

Detailed Display of Connection Stages:

Display the duration of DNS Lookup, TCP Handshake, and SSL Handshake separately.
Show the Socket Initialization and the time taken to receive the first byte (TTFB).
Detailed Time Metrics:

Provide detailed timing metrics for each phase of the request lifecycle within the DevTools network section.
Visual Enhancements:

Incorporate color-coded segments in the DevTools timeline to represent different stages of the HTTP request lifecycle.
Rationale: Such enhancements would help developers identify network-related performance bottlenecks more quickly and accurately. This is especially valuable for applications that make frequent or complex network requests.

Visuals: (Optional) Attach screenshots from tools like Postman to visually demonstrate the detailed analytics provided during the connection phase.

Thank you for considering this enhancement. I believe it would greatly benefit the Flutter developer community by providing deeper insights into network performance.

从 DevTools 的网络部分开始，检查当前如何表示请求生命周期。完成的标准是：所请求的连接阶段和 TTFB 具有独立的计时指标，并且时间线以视觉方式区分 HTTP 请求的各个阶段。

由索引模型根据 Issue 内容生成。