Software Learning Lab

REAL NETWORK EVIDENCE

一次 fetch,到底花時間在哪裡?

這裡真的打同站 Cloudflare Worker,再用 Browser Resource Timing API 把 request 拆成 timing evidence。

0 / 4 missions

SUMMARY

Request evidence

Not sent

Request

Response headers

Response body

Resource Timing

WATERFALL

哪個 phase 花掉時間?

DEVTOOLS MAP

把這些 evidence 對回 Chrome Network

Headers

Network → 點 request → Headers。看 Request URL、Method、Status、Request/Response Headers。

Payload

POST 時看 Payload / Request Payload,確認 Browser 實際送出的 body。

Response

Response 分頁是 server 真正回來的 body,不要和 Console log 混在一起。

Timing

Timing 分頁對應 Queueing、DNS、Initial connection、SSL、Request sent、Waiting (TTFB)、Content Download。