Chrome DevTools Network面板不显示Service Worker JS文件请求咨询

是否支持查看该类请求 #

完全支持查看。浏览器拉取SW脚本文件本身的请求不属于浏览器内核私有隐藏请求，只是默认不会出现在普通页面上下文的Network请求列表中。

默认不展示的原因 #

• 请求发起上下文不属于当前页面：Service Worker的注册、脚本拉取动作由浏览器独立的SW管理线程触发，不属于当前页面渲染主线程、页面内JS触发的请求，而默认打开的Network面板仅捕获当前标签页页面对应上下文发起的网络请求，因此默认不会展示这类跨上下文的请求。
• 触发请求的条件默认不满足：SW完成首次注册激活后，浏览器默认仅在24小时周期到期、页面主动调用registration.update()方法、开发者手动清除站点SW存储、DevTools开启了Disable cache/Update on reload配置时才会重新发起SW脚本拉取请求，如果刷新页面时没有触发上述条件，浏览器会直接使用本地已缓存的SW脚本，根本不会发起网络请求，自然不会有对应记录。

查看该请求的操作方法 #

• 方法一：打开DevTools切换到Application面板，选中左侧Service Workers项，勾选面板上的「Update on reload」选项，硬刷新页面后将Network面板的请求筛选类型切换为All，即可在请求列表中找到SW脚本文件对应的请求记录。
• 方法二：打开DevTools后按ESC键调出底部抽屉栏，点击抽屉栏左上角的更多菜单，勾选Network选项打开抽屉内的全局Network面板，该面板默认捕获浏览器所有上下文的网络请求，包括SW线程发起的脚本拉取请求，触发SW更新后即可直接看到对应记录。
• 方法三：Chromium内核浏览器（Chrome、Edge等）可直接访问chrome://serviceworker-internals/管理页，找到当前站点对应的SW条目，点击Update按钮主动触发脚本拉取，对应请求会同步展示在DevTools的Network面板中。

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