Chrome DevTools中XHR标签显示JS加载请求的原因及设置方法

为什么XHR标签会展示JS请求 #

• 这不是DevTools的分类bug，本质是新版Chrome的Network面板归类逻辑和大家的固有认知存在差异。
• 早期Chrome的Network面板分类是严格互斥的：JS请求仅归属到JS标签下，XHR请求仅归属到XHR标签下。但现在的归类逻辑调整为多标签模式，同一条请求可以同时被打上多个类型标签，出现在多个分类页签里。
• 只要请求是由JavaScript运行时主动发起（不是浏览器解析HTML过程中自动加载的静态资源），无论返回内容的MIME类型是JSON、JS还是其他格式，系统都会自动给它打上XHR标签。像动态import()加载的ES模块JS chunk、通过XHR/Fetch接口拉取的JS格式内容、动态插入<script>标签触发的跨域脚本请求，都会同时出现在JS标签和XHR标签列表中，自然会在XHR页签看到JS请求条目。

如何设置让XHR标签仅显示真正的XHR/Fetch请求 #

• 打开Network面板后，按快捷键Ctrl+F（Windows/Linux）/Cmd+F（macOS）调出顶部的筛选输入框。
• 输入基础排除规则-javascript并回车，所有MIME类型为JS的请求就会从当前列表中被隐藏。
• 如果需要更精准的过滤效果，可以直接使用组合筛选规则xhr/fetch -javascript，这套规则会只匹配通过XMLHttpRequest、Fetch API发起的请求，同时排除所有返回JS内容的条目，彻底清除混在XHR列表里的脚本加载请求。

注意：这套筛选规则会保存在Chrome本地偏好中，设置一次后后续打开DevTools会自动沿用，不需要每次重复配置。

内容的提问来源于stack exchange，提问作者Dolphin