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

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

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

页面的适配

自带的手机模式

首先打开谷歌浏览器按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=【开发调试】谷歌浏览器中调试移动网页和测试网速下页面效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/371107.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

拼多多分享好友砍价Java实现_拼多多砍价怎么分享到朋友圈 砍价发到微信朋友圈方法...

拼多多是一款电商社交的共享式购物平台,现在还推出了砍价的活动,只要邀请好友砍价,你就以最低的价格购买商品,还可以可能是免费拿到,那么今天小编就给大家讲讲如何将自己的砍价信息分享到微信朋友圈。首先下载手机拼多…

通过6个简单的步骤在Windows上运行Apache Hive

注意 :您需要安装cygwin才能运行本教程,因为Hadoop(Hive需要)需要cygwin才能在Windows上运行。 至少,系统中必须存在Basic,Net(OpenSSH,tcp_wrapper软件包)和与安全相关的…

vue 环境的搭建及初始化项目

其实超级简单,虽然网上很多,但是我顺便记录下相当于做笔记吧 1nodejs 的安装, 在node官网下载,点击安装,安装的时候最好选择路径在d盘 2设置环境变量 我的电脑-->属性-->系统环境变量- 系统变量新增一个NODE…

Java堆转储:您可以完成任务吗?

如果您像我一样对Java性能充满热情,那么堆转储分析对您来说应该不是一个谜。 如果是这样,那么好消息是您将有机会提高您的Java故障诊断技能和JVM知识。 JVM现已发展到今天,与旧的JDK 1.0 – JDK 1.4天相比,今天生成和分析JVM堆转…

java 调用 ictclas50_1-Ictclas50分词系统ForJava

Ictclas50是一个分词库,我嘛主要用来做中文分词,其也能分出词性等东西。1.环境搭建进入到下载页面进行下载:如下图: 因为我的系统是64位的windows,所以选择了到数第三行进行下载。其JAVA版本是通过JNI去调用dll库&…

Beam概念学习系列之Pipeline Runners

不多说,直接上干货! https://beam.apache.org/get-started/beam-overview/ 在 Beam 管道上运行引擎会根据你选择的分布式处理引擎,其中兼容的 API 转换你的 Beam 程序应用,让你的 Beam 应用程序可以有效的运行在指定的分布式处理引…

运行 java classnotfound_JAR运行出现ClassNotFoundException异常的解决办法

2009年10月30日最近在弄个聊天室,由于要跟数据库通信,用到了JDBC的3个jar,在eclipse里OK的,但布置到服务器坏事了,不知道怎么弄JDBC的3个jar了写个autoStart.batjava -jar chatServer.jarpause运行报错:F:\mydocuments\java project\socketTest\release>java -jar chatServe…

idea 创建多模块依赖Maven项目

转载地址: http://www.cnblogs.com/tibit/p/6185704.html idea 创建多模块依赖Maven项目 本来网上的教程还算多,但是本着自己有的才是自己的原则,还是自己写一份的好,虽然可能自己也不会真的用得着。 1. 创建一个新maven项目 2.…

用Java弹出创建新的消息通知

首先创建JFrame作为弹出窗口。 在其中添加一些JLabel以包含信息,并在适当的位置分配它们,使其看起来像一条通知消息。 下面给出了示例代码: String message You got a new notification message. Isnt it awesome to have such a notificat…

定位-固定定位

把box2设为固定定位&#xff1a; <!DOCTYPE html> <html lang"en" dir"ltr"><head><meta charset"utf-8"><title>定位</title><style media"screen">.box1{width:100px; height: 100px;ba…

Java并发执行器的懒惰开发人员简介

如果我告诉您util.concurrent API自2004年起提供此类服务&#xff0c;我就会自欺欺人。但是&#xff0c;我想回顾一下一些很酷的功能。 并发专家&#xff0c;现在是时候关闭该窗口了。 所有其他人&#xff0c;请紧紧抓住乐趣。 你不会忘记你的根源 执行程序是具有单个执行方法…

《我们应该怎样做需求分析》阅读笔记

认识&#xff1a;软件需求分析是贯穿软件项目从出生到成长或者死亡的&#xff0c;我们必须搞清楚到手的软件是为了什么要做什么做成什么样&#xff0c;通过顾客的描述彼此的合作分析需求与业务逻辑&#xff0c;不断改进从而实现软件在合理范围内符合顾客要求。 怎么做&#xff…

(转)VS2010/MFC编程入门之前言

鸡啄米的C编程入门系列给大家讲了C的编程入门知识&#xff0c;大家对C语言在语法和设计思想上应该有了一定的了解了。但是教程中讲的例子只是一个个简单的例程&#xff0c;并没有可视化窗口。鸡啄米在这套VS2010/MFC编程入门教程中将会给大家讲解怎样使用VS2010进行可视化编程&…

JavaOne 2012:JavaFX图形技巧和窍门

我回到希尔顿&#xff08;皇家宴会厅B&#xff09;看了Richard Bair的&#xff08;Oracle Java客户架构师&#xff09;的“ JavaFX图形技巧和窍门”。 Bair与FX Experience相关联&#xff0c;并且显然了解JavaFX。 拜尔说&#xff0c;他演讲的主题是表演。 他告诫说&#xff0c…

web前端知识点1

1. input属于窗体元素,层级显示比flash、其它元素都高。请判断这句话的正确与否。 错误 层级显示优先级&#xff1a; frameset > 表单元素 > 非表单元素 在html中&#xff0c;帧元素&#xff08;frameset&#xff09;的优先级最高&#xff0c;表单元素比非表单元素的优…

java单元测试算初级_Java____Eclipse下JUnit单元测试(初级)

给大家分享一个链接希望对你们有帮助 http://blog.csdn.net/huangbiao86/article/details/6709742今天看图片命名唯一的策略时看到有个大大用JUnit测试&#xff0c;神奇的样子&#xff0c;遂上网搜集来三篇JUnit测试的入门文章&#xff0c;作为参考。原作地址在上面&#xff0c…

有没有更好的Marker方法?

自Java 1.5推出以来&#xff0c;就是否在Java中使用Marker接口进行了广泛的讨论和辩论。 这是因为Java 1.5引入了注释功能&#xff0c;这些功能几乎可以解决Marker接口的目的。 本文将涵盖这场辩论的一个有趣的部分。 定义&#xff1a; Java中的标记接口是一个空接口&#xff…

php jquery ajax登录,jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

弹出层主要用于展示丰富的页面信息&#xff0c;还有一个更好的应用是弹出表单层丰富交互应用。常见的应用有弹出登录表单层&#xff0c;用户提交登录信息&#xff0c;后台验证登录成功后&#xff0c;弹出层消失&#xff0c;主页面局部刷新用户信息。本文我们将给大家介绍如何使…

# 20155337 2017-2018-1 《信息安全系统设计基础》第二周课堂实践+myod

20155337 2017-2018-1 《信息安全系统设计基础》第二周课堂实践myod 因为在课上已经提交了四个实验&#xff0c;还欠缺最后一个实验&#xff0c;反省一下自己还是操作不熟练&#xff0c;平时在课下应该多多练习linux的命令训练。 实践一 每个* .c一个文件&#xff0c;每个*.h一…

CometD:Java Web应用程序的Facebook类似聊天

聊天就像吃一块蛋糕或喝一杯热咖啡一样容易。 您是否曾经考虑过自己开发聊天程序&#xff1f; 您知道&#xff0c;聊天不容易。 但是&#xff0c;如果您是开发人员&#xff0c;并且阅读了本文的结尾&#xff0c;则可以尝试自己开发一个聊天应用程序&#xff0c;并允许您的用户通…