Chrome DevTools 的 Network 面板功能强大,但也很“重”——它占用大量屏幕空间,页面导航时会重置,并且需要您切换离开页面内容才能查看。Network Monitor 将核心的网络监控功能整合到一个轻量级的浮动面板中,悬浮在页面之上。
它会拦截 XHR 和 Fetch 请求,并通过 Performance API 监控资源加载情况,实时展示每一个网络请求。每个请求都会显示 URL、HTTP 方法(GET、POST、PUT、DELETE)、状态码(颜色编码:绿色代表 2xx,黄色代表 3xx,红色代表 4xx/5xx)、以字节为单位的响应大小,以及以毫秒为单位的耗时。点击任意请求即可展开其详细信息:请求头、响应头、请求负载、响应正文预览,以及耗时细分。
通过 Beacon API 发出的请求(通常用于页面卸载前发送的分析上报)同样会被捕获,这类请求通常很难观察到,因为它们是在页面导航过程中触发的。这与 WebSocket Inspector 是两个不同的工具——Network Monitor 专注于 HTTP 请求/响应流量,而 WebSocket 连接及其数据帧则由专门的 WebSocket Inspector 工具处理,这样每个面板都能保持专注、易读,而不会把两种截然不同的流量类型混杂在一个嘈杂的信息流中。
Every network request appears in the panel as it happens — page loads, API calls, lazy-loaded resources, and background fetches. The feed updates in real-time with no manual refresh needed.
Click any request to see full details: request URL, method, headers, payload (for POST/PUT), response headers, response body preview (JSON auto-formatted), status code, size, and timing breakdown.
Filter requests by type: XHR/Fetch (API calls), JS (scripts), CSS (stylesheets), IMG (images), Font (web fonts), or All. Isolate API traffic from resource loading to focus on what matters.
Status codes are color-coded for instant recognition: green for 2xx (success), yellow for 3xx (redirects), red for 4xx (client errors) and 5xx (server errors). Failed requests are immediately visible.
Each request shows the response size (in KB) and total duration (in milliseconds). Identify slow API calls, oversized resources, and unnecessary requests that impact page performance.
A summary bar shows total request count and combined size for all captured requests. Filter the summary to see totals per type — how much bandwidth is spent on scripts vs images vs API calls.
Watch XHR/Fetch requests to verify your frontend is calling the correct API endpoints with the right parameters. Click to inspect request payloads and response bodies — catch mismatched data formats instantly.
Red 404 and 500 entries immediately highlight broken resources or failing API calls. See which URLs are failing, when they fail, and what error response the server returns.
Sort by duration to find the slowest requests. Sort by size to find the largest resources. The summary totals show the full bandwidth picture — is the page making too many requests or downloading too much data?
See what network requests the page makes in the background — analytics pings, heartbeat calls, polling requests, lazy-loaded resources. Understand the full network activity beyond what's visible to the user.
Filter requests and check which domains are being contacted. Identify third-party scripts making unexpected network calls — tracking pixels, data collection, or external API calls you didn't know about.
Open the DevSuite Pro floating dock and click the Network Monitor icon. A panel opens and begins capturing network requests immediately.
Use the page normally. Every network request appears in the feed as it's made — API calls, resource loads, and background fetches are all captured.
Click the type filters (XHR, JS, CSS, IMG, Font) to narrow the view. Show only API calls to debug data fetching, or only images to check asset loading.
Click any request row to expand its details: URL, headers, payload, response body, status code, size, and timing.
Red status codes (404, 500) indicate failed requests. Slow durations flag performance bottlenecks. Large sizes suggest resources that need optimization.
