共计 1835 个字符，预计需要花费 5 分钟才能阅读完成。
最近在调试网页时发现 Chrome 开发者工具的 Network 面板顶部的类型过滤选项（如 XHR、JS、CSS 等分类按钮）突然消失了。这个问题会导致无法快速筛选特定类型的网络请求，给调试工作带来不便。经过一番排查和尝试，终于找到了几种有效的解决方案，现在把经验分享给大家。
现象描述
正常情况下，Chrome DevTools 的 Network 面板顶部会有一排类型过滤按钮，包括：
- All
- XHR
- JS
- CSS
- Img
- Media
- Font
- Doc
- WS
- Manifest
- Other
但当出现问题时，这排过滤按钮会完全消失，只剩下搜索框和禁用缓存等少数几个按钮。
可能原因分析
经过研究和实践，发现这个问题可能有以下几个原因：
-
浏览器版本升级导致的 UI 改动
Chrome 的开发者工具经常会有 UI 调整，有时候某些功能会被暂时移除或重新设计。 -
第三方扩展程序冲突
特别是广告拦截类扩展（如 uBlock Origin）或开发者工具增强类扩展可能会干扰 DevTools 的正常功能。 -
用户配置文件损坏
Chrome 的用户配置文件可能损坏，导致开发者工具设置异常。 -
实验性功能开关误操作
在 chrome://flags 中启用了某些实验性功能可能导致此问题。
解决方案
方法一：重置实验性功能
- 在 Chrome 地址栏输入：
chrome://flags - 在搜索框中输入
Developer Tools - 将所有与开发者工具相关的实验性功能设置为
Default或Disabled - 重启浏览器
方法二：禁用可疑扩展
- 在 Chrome 地址栏输入：
chrome://extensions - 逐个禁用扩展（特别是广告拦截类）
- 每次禁用后检查 Network 面板是否恢复
- 找到有问题的扩展后，可以永久禁用或寻找替代品
方法三：创建新的浏览器配置文件
如果上述方法无效，可以尝试创建新的浏览器配置文件：
- 关闭所有 Chrome 窗口
- 打开终端 / 命令提示符
- 执行以下命令（Mac/Linux）：
mv ~/.config/google-chrome/Default ~/.config/google-chrome/Default_backupWindows 命令：
ren %LOCALAPPDATA%\Google\Chrome\User Data\Default Default_backup - 重新启动 Chrome，会创建一个新的默认配置文件
最佳实践
为了避免类似问题再次发生，可以采取以下预防措施：
- 备份 DevTools 设置
- 打开 DevTools
- 点击右上角的设置图标
-
在 Preferences > Experiments 中导出设置
-
使用稳定版 Chrome 进行开发
- 避免使用 Beta 或 Canary 版本作为主要开发浏览器
-
稳定版更新频率较低，问题更少
-
替代过滤方法
即使类型过滤按钮消失，仍可以使用以下方法过滤请求： - 在搜索框输入：
method:POST（过滤 POST 请求） - 使用正则表达式：
/.*\.js/（过滤所有 JS 文件） - 使用
domain:过滤特定域名的请求
高级解决方案
对于需要更精细控制的情况，可以使用 Chrome DevTools Protocol（CDP）直接控制网络过滤：
// 在 DevTools 控制台中执行
(async function() {const {Protocol} = await import('chrome://devtools-frontend/front_end/core/protocol/protocol.js');
await Protocol.Network.enable();
await Protocol.Network.setBlockedURLs({urls: ['*']
});
// 重置过滤
await Protocol.Network.setBlockedURLs({urls: []
});
})();或者手动添加过滤按钮：
// 在 DevTools 控制台中执行
UI.panels.network._networkLogView._filterBar._filters[0]._addFilter('XHR', 'xhr');总结与思考
遇到开发者工具功能异常时，建议按照以下顺序排查：
- 检查浏览器版本是否有已知问题
- 禁用所有扩展
- 重置实验性功能
- 创建新的用户配置文件
对于团队开发环境，可以考虑：
- 使用 Docker 固定浏览器和开发环境版本
- 建立浏览器环境监控方案，记录 DevTools 功能状态
- 定期备份开发者工具设置
希望这篇指南能帮助你快速恢复 Network 面板的过滤功能。如果问题仍然存在，可以考虑在 Chrome 的 Issue Tracker 上提交问题报告。
