1、问题描述:在我们的日常开发生活中,肯定离不开Chrome开发者工具。通过控制台我们可看到资源加载、页面元素、数据请求、缓存情况等。在一次问题排查时,我突然发现其中的NetWork面板中只能看到图片的加载状况,看不到接口请求的相关信息,这对问题排查带来了极大的不便。
情况如图所示:
2、问题的解决:我首先想到是不是因为浏览器版本问题,但转念一想,应该不是;其次我想是不是电脑设置问题,显然更不是;所以我还是乖乖的去问度娘,至此,才发现了一个很严重的问题:我从没有认真的看过Chrome的控制台,更别提其了解每个工具的具体使用功能,只是默认使用基本开发辅助工具。然后查到问题原因,不过是因为我误点了NetWork面板下的img选项而已。
选择工具栏中的"All"选项,即可看到所有的网络请求加载情况:(就是这么简单...)
3、有兴趣的大家可以了解一下开发者工具中的各个小工具都是什么作用
附:
《chrome 控制台的 network 面板的使用总结》
作者:轻车剪地
链接:http://FrontEndDev.org/link/the-use-of-the-network-of-chrome-console-panel-concluded.html