【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果-阿里云开发者社区

开发者社区> yanbigfeg> 正文

【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果

简介: 、    今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧,主要是最近做个微信公共号网站。所以就要对页面测试拉。移动网页我们最长测得就是各种手机大小的页面效果和出现网络问题的效果展示。 今天就简单分享下在谷歌浏览器测试页面的适配和网速限制展示。
+关注继续查看

、    今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧,主要是最近做个微信公共号网站。所以就要对页面测试拉。移动网页我们最长测得就是各种手机大小的页面效果和出现网络问题的效果展示。

今天就简单分享下在谷歌浏览器测试页面的适配和网速限制展示。

页面的适配

自带的手机模式

首先打开谷歌浏览器按F12我们调到手机模式:

 进入之后我们可以看到我们的页面成了手机页面,当然谷歌也很人性化的给了我们很多手机的效果:

但是我们总是会有不满足的因为,可能项目的要求不同吧,反正就是这里面没有你想要的那怎么办,当然是增加自己的手机喽。

自己添加手机模式

我们还是下拉处自带的手机模式,然后在最下面我们看到Edit,点击进入他。然后在Setting=>Devices,当然在这里你会看到更多的手机模式

不过我还是想要自己的,这个时候在点击Add Custom devices,然后填写手机名字(可以任意起),然后是宽度和长度,还有devicePixelRatio(手机像素比),这里宽度和长度的填写需要根据公式计算:

宽度=手机像素宽/像素比
长度=手机像素长/像素比

手机像素比可以通过以下网址测试:https://www.zhangxinxu.com/study/201208/window-device-pixel-ratio.html

然后是填写userAgent,这个可以通过使用手机打开:http://www.runoob.com/try/try.php?filename=try_nav_useragent

 填写完成点击save保存即可。然后选择显示就可以在列表看到了:

 网速限制展示

断网模式

很多情况下我们的项目会在网速不好的时候运行,但是测试这种情况哪?我就是使用谷歌浏览器的网速限制模式:

我们切换到手机模式后会在头部看到这个

这种就是我们最常用的也是默认的,但是我们如果需要断线测试一下怎么办,通过点击下拉我们可以看到:

然后我们选择offline:请看效果,在页面的头部会提示这个这是百度给的提示也说明了这是断网的情况模拟。

大多数情况下我们看到的是这种的小鸟:

这也说明是断网模式。

 限速模式

上面除了点击offline还有另外的,mid-tier mobile和 low-end mobile分别代表了快速一点和慢速,说白了就是网速一个快一点一个非常慢相对比较。

通过这两个打开百度翻译可以很明显的感觉到网页的打开速度:

通过页面的加载项也可以很明显的看出来加载速度变慢:

添加自己的限速规则

除了这个地方还可以在控制台的NetWork中找到,在这了还可以添加自己的限速规则哦。

 点击Add添加自己的限速设置,填写名字,下载限制,上传限制,延迟,保存即可。

然后是我自己的设置应用到百度网页没可以看到基本就跟打不开差不多了。

 

作者:YanBigFeg —— 颜秉锋

出处:http://www.cnblogs.com/yanbigfeg

本文版权归作者和博客园共有,欢迎转载,转载请标明出处。如果您觉得本篇博文对您有所收获,觉得小弟还算用心,请点击右下角的 [推荐],谢谢!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7359 0
基于OpenCASCADE的三维工厂浏览程序的开发
基于OpenCASCADE的三维工厂浏览程序的开发 eryar@163.com 摘要:本文简要介绍了借助于开源的几何造型内核OpenCASCADE把从AVEVA Plant(PDMS)中导出的数据重新以三维展示,类似AVEVA Review的功能;以及利用OCC的数据交换功能模块,将导出的数据转换成常见三维数据标准存储格式,便于其它CAD之间的数据交换,类似Mechanical Equipment Interface的功能。
1958 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
9066 0
Unity3d手游开发中的特殊文件夹
这里列举出手游开发中用到了所有特殊文件夹。 1.Editor Editor 文件夹可以在根目录下,也可以在子目录里,只要名子叫Editor就可以。
680 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
10671 0
首次曝光 | 阿里数万名开发者都在使用的数据库开发工具到底长什么样?
数据管理DMS(Data Management Service)是阿里巴巴自研图形化的数据库开发工具,已服务阿里巴巴及阿里云上几十万开发者实现安全便捷的数据库访问开发工作。用户可以通过DMS实现25种常见数据库的访问研发。
1344 0
从零开始搭建自己的VueJS2.0+ElementUI单页面网站(二、编写导航页)
前言 在从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建)一文中我们已经配置好了开发所需要的各种环境,在这一篇博文中我们正式进入开发。
2598 0
+关注
63
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载