云南网站建设天软科技,网站建设公司的问答营销案例,工作人员否认陈道明演庆余年2,公司网站能自己做吗、 今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧#xff0c;主要是最近做个微信公共号网站。所以就要对页面测试拉。移动网页我们最长测得就是各种手机大小的页面效果和出现网络问题的效果展示。
今天就简单分享下在谷歌浏览器测试页面的适配和网速限制展示。…、 今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧主要是最近做个微信公共号网站。所以就要对页面测试拉。移动网页我们最长测得就是各种手机大小的页面效果和出现网络问题的效果展示。
今天就简单分享下在谷歌浏览器测试页面的适配和网速限制展示。
页面的适配
自带的手机模式
首先打开谷歌浏览器按F12我们调到手机模式 进入之后我们可以看到我们的页面成了手机页面当然谷歌也很人性化的给了我们很多手机的效果 但是我们总是会有不满足的因为可能项目的要求不同吧反正就是这里面没有你想要的那怎么办当然是增加自己的手机喽。
自己添加手机模式
我们还是下拉处自带的手机模式然后在最下面我们看到Edit点击进入他。然后在SettingDevices当然在这里你会看到更多的手机模式 不过我还是想要自己的这个时候在点击Add Custom devices然后填写手机名字可以任意起然后是宽度和长度还有devicePixelRatio手机像素比这里宽度和长度的填写需要根据公式计算
宽度手机像素宽/像素比
长度手机像素长/像素比
手机像素比可以通过以下网址测试https://www.zhangxinxu.com/study/201208/window-device-pixel-ratio.html
然后是填写userAgent,这个可以通过使用手机打开:http://www.runoob.com/try/try.php?filenametry_nav_useragent 填写完成点击save保存即可。然后选择显示就可以在列表看到了 网速限制展示
断网模式
很多情况下我们的项目会在网速不好的时候运行但是测试这种情况哪我就是使用谷歌浏览器的网速限制模式
我们切换到手机模式后会在头部看到这个 这种就是我们最常用的也是默认的但是我们如果需要断线测试一下怎么办通过点击下拉我们可以看到 然后我们选择offline请看效果在页面的头部会提示这个这是百度给的提示也说明了这是断网的情况模拟。 大多数情况下我们看到的是这种的小鸟 这也说明是断网模式。 限速模式
上面除了点击offline还有另外的mid-tier mobile和 low-end mobile分别代表了快速一点和慢速说白了就是网速一个快一点一个非常慢相对比较。
通过这两个打开百度翻译可以很明显的感觉到网页的打开速度 通过页面的加载项也可以很明显的看出来加载速度变慢 添加自己的限速规则
除了这个地方还可以在控制台的NetWork中找到在这了还可以添加自己的限速规则哦。 点击Add添加自己的限速设置填写名字下载限制上传限制延迟保存即可。 然后是我自己的设置应用到百度网页没可以看到基本就跟打不开差不多了。 本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id0ajkhjtitle【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果
