有时候我们想在本地测试一下图片预加载loading的加载情况,如下图:

 

  chrome谷歌浏览器开发者工具-网络带宽控制

 

  可无奈一般网络带宽都比较好,基本上看不到效果,图片一下子就加载出来了,

  可能这个时候有些小伙伴想到的办法是用定时器延迟加载

  其实Google Chrome开发者工具的Network面板提供了2个不错的方法

 

 

  方法一(推荐)如下图选择Network面板

  第二行,最右边的Online选项里面的Fast 3G或者Slow 3G就可以让网络带宽变成3G网,这个时候一般就可以看到效果啦

  chrome谷歌浏览器开发者工具-网络带宽控制

 

  注:如果你没有看到该选项,建议把开发者工具拉宽一些,有时候是被挡住了;还有就是谷歌浏览器建议为最新版本;

 

 

  方法二:打开Network面板,点亮左上角摄像机的图标(鼠标移上去会提示Capture screenshots),如下图:

  chrome谷歌浏览器开发者工具-网络带宽控制

 

 

 

  点亮该图标后,会打开新的一折叠面板,在该面板上会提示按Ctrl + R来启动截图,如下图:

  chrome谷歌浏览器开发者工具-网络带宽控制

 

 

 

  按Ctrl + R后,截图自动完成,双击截图就能查看大图;并且点击截图以后可以查看该截图时刻的Network情况。如下图所示:

  chrome谷歌浏览器开发者工具-网络带宽控制

 

 

  

 

  

 

相关文章:

  • 2022-01-03
  • 2021-08-12
  • 2021-06-11
  • 2021-11-30
  • 2021-06-15
  • 2022-01-11
猜你喜欢
  • 2021-11-29
  • 2021-10-19
  • 2021-12-04
  • 2022-01-07
  • 2021-05-07
  • 2022-01-23
  • 2021-04-19
相关资源
相似解决方案