摘要：今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧，主要是最近做个微信公共号网站。今天就简单分享下在谷歌浏览器测试页面的适配和网速限制展示。
、 今天有幸给大家分享一下谷歌浏览器针对移动网页测试的技巧，主要是最近做个微信公共号网站。所以就要对页面测试拉。移动网页我们最长测得就是各种手机大小的页面效果和出现网络问题的效果展示。
今天就简单分享下在谷歌浏览器测试页面的适配和网速限制展示。
首先打开谷歌浏览器按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添加自己的限速设置，填写名字，下载限制，上传限制，延迟，保存即可。
然后是我自己的设置应用到百度网页没可以看到基本就跟打不开差不多了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1807.html
摘要：用于显示日志信息及输入一些命令请求监听。可获得请求列表，点开某一项将看到数据头部数据。包含本次请求的请求方法状态码请求服务器的地址其他一些设置响应头部包含用户代理，帮服务器识别设备用预览。 九宫格——用html+css制作一个网页 一. 目标效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述 圆角...
摘要：管理工具是一款非常好用的管理和开发工具。接口调试开发的一款功能强大的网页调试与发送网页请求。 PHPIDe 我首先力荐PHPstorm10。目前用起来很爽，集成xdebug,集成git进去，当然英文不好的同学在下载个汉化包，在线调试。提供诸于：智能HTML/CSS/JavaScript/PHP编辑、代码质量分析、调试和测试等功能。另外，它还是跨平台。 Mysql管理工具 Navicat...
摘要：可用于拦截某一请求，并重定向到本地的资源，或者使用的内置响应。作为目前最好用的调试工具之一，功能很强大，这里仅做简单介绍，有兴趣的可以深入学习。 前言 Fiddler 是目前最强大最好用的调试工具之一，它能记录所有客户端和服务器的http和https请求，设置 CGI 请求的断点，甚至修改输入输出数据。fiddler 的工作原理，是它在 web server 和 web browser...
摘要：作为一名资深码农，结合身边一群民工的真实体验，小编有那么一点权威给各位推荐几款程序员必备常用的扩展插件。插件是一款为谷歌浏览器定制的非常强大的一款管理插件。 作为一名资深码农，结合身边一群IT民工的真实体验，小编有那么一点权威给各位推荐几款程序员必备、常用的chrome扩展插件。1.Click&Clean下载地址：http://www.cnplugins.com/offi...Clic...
摘要：我个人比较推荐的方法是或者安卓手机的这种方式，比较简单方便快捷，然后根据具体的环境再选择更为合适的调试方法。 本文首次发表于本人的个人博客：http://cherryblog.site/ ，欢迎大家到我的博客查看更多文章~ 前言 在开发中前端免不了要进行移动端的开发，然而在电脑上看的样式和手机上还是有一定的差距的，因为手机上有顶部的状态栏和底部的菜单栏，特别是在qq内置浏览器中打开，差...
阅读 426·2023-04-25 19:43
阅读 3621·2021-11-30 14:52
阅读 3414·2021-11-30 14:52
阅读 3347·2021-11-30 14:49
阅读 3275·2021-11-30 14:49
阅读 3520·2021-11-29 11:00
阅读 3487·2021-11-29 11:00
阅读 3518·2021-11-29 11:00
