有时候我们想在本地测试一下图片预加载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. celery学习笔记2

    1.定义: Celery是一个异步的任务队列(也叫做分布式任务队列) 2.工作结构 Celery分为3个部分 (1)worker部分负责任务的处理,即工作进程(我的理解工作进程就是你写的python代 ...

  2. Java 中的纤程库 – Quasar

    来源:鸟窝, colobu.com/2016/07/14/Java-Fiber-Quasar/ 如有好文章投稿,请点击 → 这里了解详情 最近遇到的一个问题大概是微服务架构中经常会遇到的一个问题: 服 ...

  3. Windows 使用 Visual Studio 编译 caffe

    说明:最近看 caffe 发现在 github 上下载的源码没有windows版本的,需要自己生成项目文件才能用 Visual Studio 编译,这里记录一下生成Windows项目文件的方法以及编译 ...

  4. [USACO11JAN]大陆议会The Continental Cowngress_2-sat

    [USACO11JAN]大陆议会The Continental Cowngress_2-sat 题意: 由于对Farmer John的领导感到极其不悦,奶牛们退出了农场,组建了奶牛议会. 议会以“每头 ...

  5. AbstractQueuedSynchronizer AQS框架源码剖析

    一.引子 Java.util.concurrent包都是Doug Lea写的,来混个眼熟 是的,就是他,提出了JSR166(Java Specification RequestsJava 规范提案), ...

  6. java中八大基本数据类型详解

    1.基本数据类型的分类 java中的类型分为基本数据类型和引用类型,今天我们讨论的是java中的八大基本数据类型. 基本数据类型可以分为三类:1.数值类型.2.字符类型.3.布尔类型. 数值类型又分为 ...

  7. selenium+python,解决selenium弹出新页面,无法定位元素的问题(报错:Unable to locate element:元素)

    1.问题发生描述: 从一个页面进行点击等操作,页面跳转到第二个页面,对第二个页面中的元素,采取任何措施定位都报错,问题报错点如下: 2.出现问题的原因: 窗口句柄还停留在上一个页面,对于当前新弹出的页 ...

  8. Python从入门到放弃

    计算机基础 01 计算机基础之编程 02 计算机组成原理 03 计算机操作系统 04 编程语言分类 Python解释器 05 Python和Python解释器 06 执行Python程序的两种方式 0 ...

  9. 大数据技术之_19_Spark学习_02_Spark Core 应用解析小结

    1.RDD 全称 弹性分布式数据集 Resilient Distributed Dataset它就是一个 class. abstract class RDD[T: ClassTag](    @tra ...

  10. Python中pathlib模块

    Python中pathlib模块 Path.cwd():返回当前目录的路径 Path.home():返回当前用户的家目录 Path.stat():返回此路径信息 Path.touch():创建文件 P ...