Giám sát mạng ghi lại và hiển thị mọi yêu cầu mạng do trang hiện tại thực hiện theo thời gian thực.
Tab Network trong Chrome DevTools rất mạnh nhưng khá nặng nề — nó chiếm nhiều diện tích màn hình, bị reset khi bạn điều hướng trang, và buộc bạn phải rời khỏi nội dung trang để xem. Network Monitor cung cấp các tính năng giám sát mạng thiết yếu trong một panel nổi nhẹ nhàng, nằm ngay trên trang.
Nó chặn các request XHR và Fetch, đồng thời theo dõi việc tải tài nguyên thông qua Performance API, hiển thị mọi request mạng ngay khi nó xảy ra. Mỗi request hiển thị URL, phương thức HTTP (GET, POST, PUT, DELETE), mã trạng thái (đánh dấu màu: xanh lá cho 2xx, vàng cho 3xx, đỏ cho 4xx/5xx), kích thước phản hồi tính theo byte, và thời gian tính theo mili giây. Nhấp vào bất kỳ request nào để mở rộng chi tiết: request header, response header, payload của request, xem trước response body, và phân tích chi tiết thời gian (timing breakdown).
Các request được gửi qua Beacon API (thường dùng cho các tín hiệu analytics gửi ngay trước khi trang unload) cũng được ghi lại, điều mà thông thường rất khó quan sát vì chúng kích hoạt trong lúc điều hướng. Đây là một công cụ tách biệt với WebSocket Inspector — Network Monitor tập trung vào lưu lượng request/response HTTP, trong khi các kết nối WebSocket và frame của chúng được xử lý bởi công cụ WebSocket Inspector chuyên biệt, nhờ đó mỗi panel vẫn tập trung và dễ đọc thay vì trộn lẫn hai loại lưu lượng rất khác nhau vào một luồng dữ liệu lộn xộn.
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.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 64 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
