共计 1703 个字符，预计需要花费 5 分钟才能阅读完成。
最近在调试网页时，突然发现 Chrome 开发者工具的网络面板（Network）中，过滤网络类型的选项不见了。这让我调试 XHR 请求变得很麻烦，经过一番折腾终于解决了问题，记录下排查过程和解决方法，希望能帮到遇到同样问题的朋友。
问题现象
正常情况下，在 Chrome 开发者工具的网络面板顶部应该有一个过滤输入框，可以输入关键词过滤请求，旁边还有 XHR、JS、CSS 等按钮用于按类型筛选。但突然某天打开发现：
- 过滤输入框还在，但按类型筛选的按钮全部消失了
- 只能手动输入 ”xhr” 等关键词来筛选，很不方便
- 刷新页面、重启 Chrome 都无法恢复
可能的原因
经过搜索和尝试，发现这个问题通常有以下几个原因：
- Chrome 版本更新：某些 Chrome 版本更新可能会临时改变开发者工具的 UI 布局
- 开发者工具设置被重置：可能不小心点击了某些重置选项
- 插件冲突：某些 Chrome 插件会干扰开发者工具的正常功能
- 窗口大小问题：当开发者工具窗口过小时，部分 UI 元素会被自动隐藏
解决方案
1. 检查开发者工具布局
首先检查是不是因为窗口太小导致过滤选项被自动隐藏了：
- 打开开发者工具（F12）
- 尝试拖动调整开发者工具窗口的大小，看看过滤选项是否会重新出现
- 确保开发者工具是独立窗口或足够大的 dock 区域
2. 重置开发者工具设置
如果调整窗口大小没用，可以尝试重置开发者工具设置：
- 打开开发者工具
- 点击右上角的齿轮图标（设置）
- 在 Preferences 标签下找到 ”Restore defaults and reload” 按钮
- 点击后开发者工具会重置并刷新
3. 检查 Chrome 插件
某些插件可能会干扰开发者工具：
- 在 Chrome 地址栏输入：chrome://extensions/
- 逐个禁用可疑的插件（特别是开发者工具类插件）
- 每次禁用一个插件后，重启 Chrome 并检查问题是否解决
4. 更新 Chrome 浏览器
如果是版本问题，可以尝试：
- 在 Chrome 地址栏输入：chrome://settings/help
- 检查并安装最新版本的 Chrome
- 重启浏览器
5. 终极解决方案
如果以上方法都不奏效，可以尝试：
- 完全关闭 Chrome
- 删除开发者工具的本地设置（会重置所有自定义设置）：
- Windows: 删除
%LocalAppData%\Google\Chrome\User Data\Default\Preferences文件 - Mac: 删除
~/Library/Application Support/Google/Chrome/Default/Preferences文件 - 重新启动 Chrome
网络面板使用技巧
除了解决这个问题，这里分享几个网络面板的实用技巧：
- 快速过滤请求：
- 输入
method:POST可以筛选 POST 请求 - 输入
domain:api.example.com可以筛选特定域名的请求 -
输入
larger-than:100K可以筛选大于 100KB 的请求 -
自定义过滤按钮：
-
在过滤输入框右键可以添加自定义的过滤按钮
-
保存请求数据：
- 右键请求可以选择 ”Save as HAR with content” 保存完整的请求数据
代码示例：使用开发者工具 API 过滤请求
如果你是通过脚本使用开发者工具，可以使用以下代码示例来过滤网络请求：
// 监听网络请求
chrome.devtools.network.onRequestFinished.addListener(function(request) {
// 只显示 XHR 请求
if(request.request.method === 'POST') {console.log('XHR 请求:', request.request.url);
}
});总结与思考
这次问题的解决过程让我意识到，开发者工具虽然强大，但也可能因为各种原因出现 UI 异常。遇到类似问题时，可以按照以下思路排查：
- 先检查最简单的窗口布局问题
- 尝试重置设置
- 排查插件冲突
- 考虑浏览器版本问题
- 最后才考虑删除本地设置等激进方法
平时使用开发者工具时，建议：
- 保持 Chrome 浏览器更新到最新版本
- 谨慎安装开发者工具类插件
- 定期备份重要的开发者工具设置
- 了解开发者工具的快捷键和高级功能
希望这篇文章能帮你解决网络面板过滤选项消失的问题，如果还有其他开发者工具相关的问题，欢迎交流讨论。
正文完
