网络监控器捕获并显示当前页面发出的每一个网络请求——包括 XHR/Fetch API 调用、脚本加载、样式表获取、图片下载、字体文件等。无需打开浏览器开发者工具，即可在实时更新的浮动面板中查看 URL、HTTP 方法、状态码、响应大小和耗时。
Chrome 开发者工具的 Network 标签页功能强大但较为笨重——它占用大量屏幕空间，页面导航时会重置，且需要切换离开页面内容。网络监控器以轻量级浮动面板的形式提供核心网络监控功能，直接叠加在页面之上。它拦截 XHR 和 Fetch 请求，并通过 Performance API 监控资源加载，实时展示每一个网络请求。每条请求显示 URL、HTTP 方法（GET、POST、PUT、DELETE）、状态码（颜色编码：2xx 绿色、3xx 黄色、4xx/5xx 红色）、响应大小（字节）和耗时（毫秒）。点击任意请求可展开详细信息：请求头、响应头、请求载荷（针对 POST/PUT）、响应体预览及耗时分解。支持按类型过滤（XHR/Fetch、JS、CSS、图片、字体），聚焦特定流量。
每个网络请求在发生时即刻出现在面板中——页面加载、API 调用、懒加载资源和后台 Fetch 均被捕获。信息流实时更新，无需手动刷新。
点击任意请求可查看完整详情：请求 URL、方法、请求头、载荷（针对 POST/PUT）、响应头、响应体预览（JSON 自动格式化）、状态码、大小及耗时分解。
按类型过滤请求：XHR/Fetch（API 调用）、JS（脚本）、CSS（样式表）、IMG（图片）、Font（Web 字体）或全部。将 API 流量从资源加载中分离，专注于关键内容。
状态码以颜色标记，便于快速识别：2xx 绿色（成功）、3xx 黄色（重定向）、4xx 红色（客户端错误）、5xx 红色（服务器错误）。失败的请求一目了然。
每条请求显示响应大小（KB）和总耗时（毫秒）。识别缓慢的 API 调用、过大的资源及影响页面性能的不必要请求。
汇总栏显示所有已捕获请求的总数量和合计大小。按类型过滤汇总，查看各类型的数据量——脚本、图片与 API 调用各消耗了多少带宽。
监控 XHR/Fetch 请求，验证前端是否以正确的参数调用了正确的 API 端点。点击检查请求载荷和响应体——立即发现数据格式不匹配的问题。
红色的 404 和 500 条目立即标出失败的资源或 API 调用。查看哪些 URL 失败、何时失败，以及服务器返回的错误响应内容。
按耗时排序找出最慢的请求，按大小排序找出最大的资源。汇总数据呈现完整的带宽状况——页面是否请求过多，或下载数据量过大？
查看页面在后台发出的网络请求——统计上报、心跳调用、轮询请求、懒加载资源。全面了解用户不可见的网络活动。
过滤请求并检查正在联系哪些域名。识别发出意外网络调用的第三方脚本——追踪像素、数据采集，或您未曾知晓的外部 API 调用。
打开 DevSuite Pro 浮动工具栏，点击网络监控器图标。面板随即打开并立即开始捕获网络请求。
正常使用页面。每个网络请求在发出时即出现在信息流中——API 调用、资源加载和后台 Fetch 均被捕获。
点击类型过滤按钮（XHR、JS、CSS、IMG、Font）缩小视图范围。仅显示 API 调用以调试数据获取，或仅显示图片以检查资源加载。
点击任意请求行可展开详情：URL、请求头、载荷、响应体、状态码、大小和耗时。
红色状态码（404、500）表示请求失败。耗时过长提示性能瓶颈。体积过大则说明资源需要优化。
