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

  

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

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

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

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

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

  

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

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

  

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

  

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

  

  

  

chrome谷歌浏览器开发者工具-网络带宽控制的更多相关文章

  1. 关于Chrome谷歌浏览器开发者工具网络Network中返回无数据的问题

    1.如图所示,对于有些js文件,响应中无返回数据,Failed to load response data,当然本来是应该有数据,你用火狐浏览器看,就是有的,或者直接在浏览器地址栏里输入url,也可以 ...

  2. 谷歌Chrome浏览器开发者工具的基础功能

    上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要 ...

  3. [转]谷歌Chrome浏览器开发者工具教程—JS调试篇

    来源:http://blog.csdn.net/cyyax/article/details/51242720 上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工 ...

  4. Mac下safari、chrome打开开发者工具快捷键

    mac下safari和chrome打开开发者工具的快捷键相同,都是option(alt)+command+i 这个是我的默认配置,没有更改过的.

  5. 通过使用Chrome的开发者工具来学习JavaScript

    本文作者是Peter Rybin,Chrome开发者工具团队成员. 本文中,我们将通过使用Chrome的开发者工具,来学习JavaScript中的两个重要概念”闭包”和”内部属性”. 闭包 首先要讲的 ...

  6. Chrome的开发者工具(Chrome Developer Tools)

    Chrome的开发者工具(Chrome Developer Tools) 按F12 https://developer.chrome.com/devtools/index http://www.w3s ...

  7. 爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,loads,dump,load方法介绍

    爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,load ...

  8. chrome浏览器开发者工具使用教程[转]

    转自:http://www.cr173.com/html/16930_1.html 更多资源:https://developers.google.com/chrome-developer-tools/ ...

  9. [转]谷歌Chrome浏览器开发者工具教程—基础功能篇

    来源:http://www.xiazaiba.com/jiaocheng/5557.html Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英 ...

随机推荐

  1. WinForm时间选择控件(DateTimePicker)如何选择(显示)时分秒

    C# Windows窗体应用中,用到时间选择控件DateTimePicker,发现不能选择时分秒,难道要自己写一个控件?! 答案是否定的,通过属性修改是可以选择时间的,DateTimePicker完全 ...

  2. Android 自定义ViewGroup手把手教你实现ArcMenu

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37567907 逛eoe发现这样的UI效果,感觉很不错,后来知道github上有这 ...

  3. js定时器让动画隔秒运动

    现有一个需求,宝箱隔几秒动一次,抓住用户眼球,自己写了个 doem.

  4. Python爬虫利器四之PhantomJS的用法

    前言 大家有没有发现之前我们写的爬虫都有一个共性,就是只能爬取单纯的html代码,如果页面是JS渲染的该怎么办呢?如果我们单纯去分析一个个后台的请求,手动去摸索JS渲染的到的一些结果,那简直没天理了. ...

  5. django(权限、认证)系统——用户Login,Logout

    上面两篇文章,讲述的Django的Authentication系统的核心模型对象User API和相关的使用,本文继续深入,讨论如何在Web中使用Authentication系统. 前面说了,Djan ...

  6. django(权限、认证)系统——User模型

    在Django的世界中,在权限管理中有内置的Authentication系统.用来管理帐户,组,和许可.还有基于cookie的用户session.这篇blog主要用来探讨这套内置的Authentica ...

  7. ELK---日志分析系统

    ELK就是一套完整的日志分析系统 ELK=Logstash+Elasticsearch+Kibana 统一官网https://www.elastic.co/products ELK模块说明 Logst ...

  8. privoxy自动请求转发到多个网络

    有些时候我们需要通过不同的代理访问不同资源,比如某些ip或域名走本地网络,某些ip或域名走不可描述的代理等.当然这只是举个栗子! 我要解决的问题是:我的内网机器没有internet访问权限,但是我的应 ...

  9. Treap与fhq_Treap学习笔记

    1.普通Treap 通过左右旋来维护堆的性质 左右旋是不改变中序遍历的 #include<algorithm> #include<iostream> #include<c ...

  10. selenium IDE中log的保存与查看方法

    下载selenium IDE的log保存插件为File Logging(selenium IDE),下载安装方式如下: (1)打开firefox浏览器----点击右上角----附加组件---插件--- ...