chrome谷歌浏览器开发者工具-网络带宽控制
有时候我们想在本地测试一下图片预加载loading的加载情况,如下图:

可无奈一般网络带宽都比较好,基本上看不到效果,图片一下子就加载出来了,
可能这个时候有些小伙伴想到的办法是用定时器延迟加载
其实Google Chrome开发者工具的Network面板提供了2个不错的方法
方法一(推荐)如下图选择Network面板
第二行,最右边的Online选项里面的Fast 3G或者Slow 3G就可以让网络带宽变成3G网,这个时候一般就可以看到效果啦

注:如果你没有看到该选项,建议把开发者工具拉宽一些,有时候是被挡住了;还有就是谷歌浏览器建议为最新版本;
方法二:打开Network面板,点亮左上角摄像机的图标(鼠标移上去会提示Capture screenshots),如下图:

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

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

chrome谷歌浏览器开发者工具-网络带宽控制的更多相关文章
- 关于Chrome谷歌浏览器开发者工具网络Network中返回无数据的问题
1.如图所示,对于有些js文件,响应中无返回数据,Failed to load response data,当然本来是应该有数据,你用火狐浏览器看,就是有的,或者直接在浏览器地址栏里输入url,也可以 ...
- 谷歌Chrome浏览器开发者工具的基础功能
上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要 ...
- [转]谷歌Chrome浏览器开发者工具教程—JS调试篇
来源:http://blog.csdn.net/cyyax/article/details/51242720 上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工 ...
- Mac下safari、chrome打开开发者工具快捷键
mac下safari和chrome打开开发者工具的快捷键相同,都是option(alt)+command+i 这个是我的默认配置,没有更改过的.
- 通过使用Chrome的开发者工具来学习JavaScript
本文作者是Peter Rybin,Chrome开发者工具团队成员. 本文中,我们将通过使用Chrome的开发者工具,来学习JavaScript中的两个重要概念”闭包”和”内部属性”. 闭包 首先要讲的 ...
- Chrome的开发者工具(Chrome Developer Tools)
Chrome的开发者工具(Chrome Developer Tools) 按F12 https://developer.chrome.com/devtools/index http://www.w3s ...
- 爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,loads,dump,load方法介绍
爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,load ...
- chrome浏览器开发者工具使用教程[转]
转自:http://www.cr173.com/html/16930_1.html 更多资源:https://developers.google.com/chrome-developer-tools/ ...
- [转]谷歌Chrome浏览器开发者工具教程—基础功能篇
来源:http://www.xiazaiba.com/jiaocheng/5557.html Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英 ...
随机推荐
- 【新手向】自用的tooltip小插件,前端插件知识科普~
上面的tooltip就是成品图,为了和自己站点的风格保持一致所以自己写的. 第一部分:你绝对碰到过的匿名函数闭包问题 第二部分:写个tooltip demo 第三部分:源码地址 第一部分 你绝对碰到过 ...
- 【转】linux系统中如何进入退出vim编辑器,方法及区别
在linux家族中,vim编辑器是系统自带的文本编辑器,其功能强大自不必说了. 偶有小白,刚接触linux,要修改某个文本文件,不可能像WINDOWS那样操作,更有甚者,进入VI编辑器后,无法退出以致 ...
- 怎样在Ubuntu中设置环境变量
首先启动终端. 单击屏幕左上角的Ubuntu图标,在弹出的窗口中点击搜索栏,输入"terminal", 稍等片刻,终端就会赫然在目!二话不说,直接点击! 然后打开环境设置文 ...
- 如何在苹果笔记本上装win7系统
有一哥们,他说他boss给他配了台苹果,可是很不习惯,让我给装一个win系统.以下是我从百度借鉴的: 步骤一 先使用Boot Camp 分割磁盘 1 在Finder工具条中点选"前往&q ...
- go语言nsq源码解读一-基本介绍
简单介绍一下nsq. 参考 http://feilong.me/2013/05/nsq-realtime-message-processing-system 的介绍:NSQ是由知名短链接服务商bitl ...
- 【数学建模】【APIO2015】Palembang Bridges
Description 一条东西走向的穆西河将巴邻旁市一分为二,分割成了区域 A 和区域 B. 每一块区域沿着河岸都建了恰好 1000000001 栋的建筑,每条岸边的建筑都从 0 编号到 10000 ...
- python输出彩色字体
Python终端如何输出彩色字体 实现过程: 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. 转义序列是以ESC开头,即用\033来完成(ES ...
- .NET Core IdentityServer4实战 第三章-使用EntityFramework Core进行持久化配置
内容:本文带大家使用IdentityServer4进行使用使用EntityFramework Core进行配置和操作数据 作者:zara(张子浩) 欢迎分享,但需在文章鲜明处留下原文地址. 前两章内容 ...
- asp.net core系列 57 IS4 使用混合流(OIDC+OAuth2.0)添加API访问
一.概述 在上篇中,探讨了交互式用户身份验证,使用的是OIDC协议. 在之前篇中对API访问使用的是OAuth2.0协议.这篇把这两个部分放在一起,OpenID Connect和OAuth 2.0组合 ...
- windows下,提权代码.
#include <windows.h> bool AdjustPrivileges() { HANDLE hToken = NULL; TOKEN_PRIVILEGES tp; TOKE ...