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

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

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

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

页面的适配

自带的手机模式

首先打开谷歌浏览器按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

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

目录
相关文章
|
12天前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
3天前
|
测试技术 Python
单元测试是软件开发中测试的最小单位
单元测试是软件开发中测试的最小单位
25 14
|
1天前
|
SQL 关系型数据库 MySQL
|
13天前
|
数据采集 监控 算法
LabVIEW开发新能源电机控制器测试系统
LabVIEW开发新能源电机控制器测试系统
18 4
|
13天前
|
存储 传感器 数据采集
LabVIEW开发EOL功能测试系统
LabVIEW开发EOL功能测试系统
21 3
|
13天前
|
敏捷开发 监控 测试技术
软件测试中的敏捷实践:如何有效整合测试与开发
【7月更文挑战第3天】在软件开发的快速迭代周期中,敏捷测试成为确保产品质量的关键。本文将探讨如何在敏捷开发环境中整合测试与开发工作,包括持续集成、测试自动化和跨功能团队协作的策略,旨在提升软件交付的速度和质量。
|
10天前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
17 0
|
11天前
|
运维 监控 大数据
部署-Linux01,后端开发,运维开发,大数据开发,测试开发,后端软件,大数据系统,运维监控,测试程序,网页服务都要在Linux中进行部署
部署-Linux01,后端开发,运维开发,大数据开发,测试开发,后端软件,大数据系统,运维监控,测试程序,网页服务都要在Linux中进行部署
支付系统---微信支付14----创建案例项目---介绍,第二步引入Swagger,接口文档和测试页面生成工具,定义统一结果的目的是让结果变得更加规范,以上就是谷粒项目的几个过程
支付系统---微信支付14----创建案例项目---介绍,第二步引入Swagger,接口文档和测试页面生成工具,定义统一结果的目的是让结果变得更加规范,以上就是谷粒项目的几个过程
|
11天前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改