【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果
、 今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧,主要是最近做个微信公共号网站。所以就要对页面测试拉。移动网页我们最长测得就是各种手机大小的页面效果和出现网络问题的效果展示。
今天就简单分享下在谷歌浏览器测试页面的适配和网速限制展示。
页面的适配
自带的手机模式
首先打开谷歌浏览器按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添加自己的限速设置,填写名字,下载限制,上传限制,延迟,保存即可。
然后是我自己的设置应用到百度网页没可以看到基本就跟打不开差不多了。
本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=0ajkhj&title=【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果
【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果相关推荐
- <Linux开发> ubuntu开发工具-Ubuntu测试网速及实时网速图
<Linux开发> ubuntu开发工具-Ubuntu测试网速及实时网速图 一.查看网线上行.下行网速 1.安装speedtest-cli工具 water@water-Tower-PC:~ ...
- 网站站长必备的六款网页负载、网速性能测试工具
转自:http://www.cnplugins.com/zhuanti/sixwebmastertestplugins.html 有大数据表明,一个网页打开的速度超过4秒,用户就会关掉页面,对于网站来 ...
- 关于对【网页游戏官网-部分游戏页面特效实现思路】的阐述
[版权声明]未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) https://blog.csdn.net/m0_69908381/article/details/129957557> 出自 ...
- 在谷歌浏览器中调试js代码
用谷歌浏览器打开待调试界面,然后鼠标右键,选择检查 浏览器会出现以下界面,选择sources,并选择左侧文件夹中该页面的文件(此时开发页面会分为三栏,最左侧是页面文件,中间是源代码,最右侧是调试窗口栏 ...
- php中怎样阻止网页进行跳转,阻止php页面跳转方法
阻止php页面跳转方法 一. header 函数 header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. 参数 void header (string string [,bo ...
- ⚓写写5G网速及页面提速中的延迟加载Lazyloading
最近关注网络速度多一些,无论是财经人士口中的新基建的5G,还是家庭路由器中的5G Wifi,也包括即将购买新的5G手机- 写完上一篇:gMIS吉米斯 升级支持IPv4/IPv6双栈网络模式 之后,觉 ...
- 代码改了,开发环境没问题,但是部署到测试环境,却没有效果?原来是它在作怪(浏览器缓存)
解决:明明代码改了却无效,结果清除浏览器的缓存后解决,问题出在同一个资源请求后缓存起来了,就返回304状态码就是请求到的是浏览器的缓存,所以强刷新一波就行.点开浏览器的工具找到清除缓存.或者contr ...
- 如何使用谷歌浏览器远程调试安卓/ios真机H5应用?
1.背景 今年年初受疫情的影响,给大部分同事办公带来了不便,因此,公司今年开始着手移动办公,将部分原来需要在PC端操作的功能逐渐增加到了移动端,开发了很多的H5报表.因为是内部用的功能,在测试的时候也 ...
- 在Visual Studio中调试samples中可能出现的错误
在Visual Studio中调试samples中可能出现的错误 进入samples/opencl文件夹下,打开OpenCLSamples.sln,然后选择" 生成 -> 重新生成解决 ...
最新文章
- Flash Builder 4.7 安装
- debug —— list调试命令
- .NET的一点历史故事:作者的一些感想
- 诗与远方:无题(三十七)- 凿壁偷光
- silverlight中DataGrid错误:data未定义
- 大家都来测试测试自己的flex水平
- php中的 i详解,浅析PHP中的i++与++i的区别及效率
- java~modelMapper需要注意的几点
- moodle4.04无法上传中文文件名
- 纯js浏览器h5调用摄像头扫描识别解析 条形码+二维码
- 储能补贴有望出台?钱从哪来还是个问题
- 人教版五年级下册计算机试题答案,人教版五年级下册语文试卷
- 微信支付退款 升级版 【码云gvp 】
- vue2 项目启动一直卡在98%Starting development server...98% after emitting CopyPlugin
- Secret-Key Encryption Lab网安实验
- 用bat批量启动多个软件/程序
- 高德 获取城市地铁站点数据
- Henry前端笔记之响应式布局与弹性布局
- shell查mysql_通过shell检查mysql主机和数据库,生成html报表的脚本
- 从文化地理看三国演义
热门文章
- win10电脑开机密码忘了怎么办_Mac电脑忘记开机密码怎么办?Mac开机密码快速恢复方法...
- thinkphp3.2自定义success及error跳转页面
- [LeetCode][JavaScript]Roman to Integer
- 使用openocd调试Linux内核,openocd安装与调试
- android自定义表盘部件,Android自定义view仿支付宝芝麻信用表盘
- php pdo 参数绑定,PDO预处理之参数绑定和列绑定
- 接口 java性能_接口测试性能测试
- 技术前沿资讯-Apache Flink 1.14 新特性介绍
- python标准库模块_Python标准库模块之heapq
- 帝国cms录入表单模板php,帝国cms7.5在线表单提交制作教程