浏览器大坑！ERR_INSUFFICIENT_RESOURCES报错和Chrome net export介绍

常在前端搬砖，哪有不被浏览器坑的。最近公司内就有很多人不断提单过来说我们的页面白屏了！显示网页可能暂时无法连接，或者它已永久性地移动到了新网址 ERR_INSUFFICIENT_RESOURCES
这是什么玩意！完全无从着手，一开始还以为是性能问题或是网络请求问题（比如短时间内疯狂发请求），结果排查下来感觉都没关系。这时候有的用户反馈关闭浏览器，或者清理了浏览器缓存，问题就解决了，但是开着页面过一两天又出现了！What？

问题根因

这里就不卖关子了，其实网上只要耐心搜索，还是有几篇文章说到点上的，其实这是chrome浏览器的锅，而引发的原因是一个接口content-autofill.googleapis.com
1.当我们在网页中使用表单自动填充功能时，chrome就会自己发送后台请求到这个站点，这个请求，你在F12的dev tools的network标签中是无法捕获的，是一个浏览器后台请求，所以你根本感知不到它发送失败，这个我们等下会重点说
2.如果我们的机器，无法访问这个站点，比如有的公司组网时无法访问外网，或者要走代理，而代理到content-autofill.googleapis.com这个站点不通，那么会造成这个请求不断重新发送，一直挂起的网络请求不断累积，导致ERR_INSUFFICIENT_RESOURCES

定位方法 - chrome net export

这个解释，还是合情合理的，事实上我们让客户把代理打开，以及代理配置可访问content-autofill.googleapis.com站点后，就没有人反馈过这个问题了。
其实这里更值得说的是定位方法，网上的大佬是直接去编译chromium源码然后定位根因的（虽然一开始我也跟着做了），但不得不说这个方法真的成本很高，当时编译就花了大概八个小时…后面还要跑起来，风扇一直起飞~
其实有一个更快的确认方法，就是在浏览器的地址栏中，输入chrome://net-export/，这是chrome的一个抓包工具，我们先介绍它的使用方式

1.在浏览器地址栏中，输入chrome://net-export/
2.点击Start Logging to Disk，然后自定义选择一个路径存放日志文件即可

3.访问网页，然后打开使用到表单的部分，重复提交表单几次
4.回到net export页面，点击Stop Logging
5.随后我们点击如下图所示netlog viewer

6.点击选择文件并选择我们刚刚保存的日志文件

7.在这里，我们就能看到后台发送到content-autofill.googleapis.com站点的请求啦！我自己的电脑上，这里访问互联网通畅，所以能看到都是绿色的；如果是一个有问题的机器，你就能看到这里大量的红色，这个时候就能够判断是访问不通造成的问题了

当然，net export抓包工具的作用远远不止在这里，本文只是作为一个引子，让大家知道还有这么一个好用的网络分析工具

另外，这个问题在最新版本的chrome（v123）上好像已经修复了，大家也可以尝试升级浏览器看看情况
https://issues.chromium.org/issues/40268530