Chrome控制台网络选项过滤功能消失问题排查与解决方案

1次阅读

共计 1960 个字符，预计需要花费 5 分钟才能阅读完成。

最近在调试前端项目时，发现 Chrome 开发者工具里的网络类型过滤选项突然不见了。这个功能平时用来快速筛选 XHR、JS、CSS 等请求类型特别方便，突然消失让人很困扰。经过一番排查和尝试，终于找到了几种有效的解决方法，这里把经验分享给大家。

正常情况下，在 Chrome 开发者工具的 Network 面板顶部会有一排过滤按钮，可以按类型筛选网络请求，比如:

XHR：筛选 Ajax 请求
JS：筛选 JavaScript 文件
CSS：筛选样式表
Img：筛选图片
Media：筛选视频和音频
Font：筛选字体文件
Doc：筛选 HTML 文档
WS：筛选 WebSocket 连接
Manifest：筛选 manifest 文件
Other：其他类型

但当这个问题出现时，这些过滤按钮会完全消失，只留下搜索框和 Disable cache 等选项，让网络请求的筛选变得很不方便。

经过多方测试和查找资料，发现这个问题可能有以下几个原因：

Chrome 版本更新：某些 Chrome 版本可能存在 UI 调整或 bug，导致过滤选项暂时消失
开发者工具设置被重置：有时候不小心点击了某些选项或快捷键，可能导致面板布局重置
浏览器插件冲突：某些浏览器插件可能会干扰开发者工具的正常显示
窗口大小问题：当开发者工具窗口过窄时，部分 UI 元素可能会被隐藏
缓存或配置损坏：浏览器本地存储的开发者工具配置可能出现问题

首先尝试调整开发者工具窗口的大小，特别是宽度，看看过滤选项是否因为空间不足被隐藏
在 Network 面板右上角，点击 ” 更多选项 ” 按钮（三个竖点图标），查看是否有 ”Filter” 相关选项被误关闭

打开 Chrome 开发者工具（F12 或 Ctrl+Shift+I）
点击右上角的设置齿轮图标
在 Preferences 选项卡中找到 ”Restore defaults and reload” 按钮并点击
这会重置所有开发者工具设置，通常可以解决 UI 异常问题

在 Chrome 地址栏输入：chrome://extensions/
逐一禁用扩展程序（或全部禁用），然后重新打开开发者工具检查
如果发现问题解决，再逐个启用扩展找出有冲突的那个

在 Chrome 地址栏输入：chrome://settings/help
查看当前 Chrome 版本，如果不是最新版，建议更新
某些情况下，回退到上一个稳定版本也可能解决问题

按下 Ctrl+Shift+Delete 打开清除浏览数据窗口
选择 ” 高级 ” 选项卡
勾选 ” 缓存的图像和文件 ” 和 ”Cookies 及其他网站数据 ”
时间范围选择 ” 所有时间 ”
点击 ” 清除数据 ” 按钮

除了解决过滤选项消失的问题，这里再分享几个 Network 面板的实用技巧：

快速过滤请求：
在搜索框输入 method:POST 可以筛选 POST 请求
输入 domain:example.com 可以筛选特定域名的请求
输入 larger-than:1M 可以筛选大于 1MB 的资源
保存请求数据：
右键点击任意请求，选择 ”Save all as HAR with content” 可以保存完整的网络日志
节流设置：
在 Network 面板右上角可以模拟慢速网络，测试网站在不同网络条件下的表现
请求阻塞：
右键点击请求可以选择 ”Block request URL”，用于测试资源加载失败时的页面表现

虽然大部分过滤可以直接在 UI 界面完成，但 Chrome 开发者工具也提供了强大的 API 支持。以下是一个简单的示例，展示如何通过命令行 API 过滤请求：

// 在 Console 面板中执行以下命令

// 只显示 XHR 请求
monitorEvents(window, 'xhr');

// 更高级的过滤 - 只显示状态码为 200 的 GET 请求
var requests = performance.getEntriesByType('resource');
requests.filter(r => r.initiatorType === 'xmlhttprequest' && r.transferSize > 0)
        .forEach(r => console.log(r));

开发者工具的 UI 问题虽然看起来是小问题，但确实会影响开发效率。通过这次排查，我学到了几点经验：