有时候我们想在本地测试一下图片预加载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. Load balancer does not have available server for client

    最近在研究spring-cloud,研究zuul组件时发生下列错误: Caused by: com.netflix.client.ClientException: Load balancer does ...

  2. jdbc 链接数据库步骤 7步

    JDBC连接数据库   •创建一个以JDBC连接数据库的程序,包含7个步骤:   1.加载JDBC驱动程序:       在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), ...

  3. Python实现Telnet自动连接检测密码

    最近在学习Python网络相关编程,这个代码实现了Telnet自动连接检测root用户密码,密码取自密码本,一个一个检测密码是否匹配,直到匹配成功,屏幕输出停止. Python内置了telnetlib ...

  4. Python random() 函数

    描述 random() 方法返回随机生成的一个实数,它在[0,1)范围内. 语法 以下是 random() 方法的语法: import random random.random() 注意:random ...

  5. 由一条sql语句想到的子查询优化

    摘要:相信大家都使用过子查询,因为使用子查询可以一次性的完成很多逻辑上需要多个步骤才能完成的SQL操作,比较灵活,我也喜欢用,可最近因为一条包含子查询的select count(*)语句导致点开管理系 ...

  6. BZOJ_4238_电压_树上差分+dfs树

    BZOJ_4238_电压_树上差分+dfs树 Description 你知道Just Odd Inventions社吗?这个公司的业务是“只不过是奇妙的发明(Just Odd Inventions)” ...

  7. openoffice excel word 转换pdf 支持本地调用和远程调用

    OpenOffice.org 是一套跨平台的办公室软件套件,能在Windows.Linux.MacOS X (X11)和 Solaris 等操作系统上执行.它与各个主要的办公室软件套件兼容.OpenO ...

  8. 轻量化卷积神经网络MobileNet论文详解(V1&V2)

    本文是 Google 团队在 MobileNet 基础上提出的 MobileNetV2,其同样是一个轻量化卷积神经网络.目标主要是在提升现有算法的精度的同时也提升速度,以便加速深度网络在移动端的应用.

  9. ceph 常见问题百科全书---luminous安装部署篇

    1. 执行步骤:ceph-deploy new node        机器:centos 7.5   ceph  Luminous版本     源:阿里云 问题: Traceback (most r ...

  10. MySQL · 引擎特性 · 临时表那些事儿

    前言 相比于普通的用户数据表,MySQL/InnoDB中的临时表,大家应该会陌生很多.再加上不同的临时表创建的时机和创建的位置都不固定,这也进一步加大神秘感.最让人捉摸不透的是,临时表很多时候会先创建 ...