chrome浏览器的devtool使用,移动前端页面与Chrome的中距离真机调节和测试

By admin in 4858美高梅 on 2019年4月28日

一年不见,腾讯网都长草啦……

移步前端页面与Chrome的远程真机调节和测试,chrome真机

一年不见,博客园都长草啦......

 

前日刚入手新手提式有线电电话机小米5,系统真心流畅呀。为什么要买One plus五呢,因为要加强生产力呀,好风趣移动前端开垦呀哈哈

4858美高梅 1

chrome浏览器的devtool使用,移动前端页面与Chrome的中距离真机调节和测试。那正是说难点来了,要怎么调节和测试手提式有线电话机上的前端页面吗?

很久很久从前,作者的做法是:在PC上用Chrome移动模拟器调节和测试好后,基本OK,再把有关文书传到手提式有线话机上,在真机上测试以免特殊主题材料应运而生。

其一重点有多个缺陷:1是传来传去的麻烦,数据量大的那就更麻烦了;二是不得不呈现地望着页面测试,不能够做到真正的调解,测试出现难题了又得重新传。

于今,作者的做法是:用PC端的Chrome与手提式有线话机端的Chrome连接,通过一条数据线,进行长距离的真机调节和测试。

那样就革新了上述的短处,尽管恐怕也会有其余不足的地点,但日前来说,应付一般的活动端调试,应该丰裕了。

 

接下去,就经过华为5,解说这一调养方案的预备进度

 

1、PC端筹划Chrome新本子、手提式有线电话机端图谋活动Chrome新本子

贰、手提式有线电话机的开荒者选项展开,个中的USB调试展开

4858美高梅 2

 

 

叁、通过数据线连接PC,笔者的是Win7X6四种类,苹果MAC的应该也得以,这一步是装好手提式无线电话机的驱动

Win七暗中认可连接的时候会活动安装相应驱动程序,若是设置不成事,能够用第1方的手提式有线电话机帮手,它们也会帮您安装,恐怕本人手动安装

举例BlackBerry5机动安装驱动成功了,但ADB
Interface却出现了难点,在设施管理器那里可以看出惊讶号,所以手动安装:

走访 三星官方网址 ,选择有关下载,下载相应的驱动包,如图

4858美高梅 3

4858美高梅 4

4858美高梅 5

下载成功后,把减掉包解压出来,如/Driver
的目录情势,手动安装,张开设备处理器,若是驱动以及OK了就能够忽略下一步了

举例ADB Interface处有惊叹号,就右键更新驱动程序,按步骤进行

4858美高梅 6

4858美高梅 7

4858美高梅 8

自身的驱动是现已OK了所以出现上海体育场所

使得有标题的话,就挑选从磁盘安装,选用/Driver
目录下的相应inf文件,进行安装就能够了

4858美高梅 9

4858美高梅 10

最后,长成那样就OK了

4858美高梅 11

使得装置的步子告一段落,苹果MAC的规律也可能,也得保证好驱动的帮衬。

 

4、确定PC端Chrome与运动端Chrome的连日,进行调节和测试

PC端打开 chrome://inspect/#devices ,能够旁观,未有意识设备

4858美高梅 12 

数据线连接手提式有线电电话机,(选取允许设备调试)看到器具

4858美高梅 13

那般就足以PC端和移动端同步了,比如输入框中输入url进行跳转

4858美高梅 14

4858美高梅 15

在移动端Chrome中就可以看看页面得到了革新,选用inspect选项,进行审查批准成分,可弹出调节和测试窗口

4858美高梅 16

1 地点能够自定义链接更新

4个人置是手机Chrome中页面在PC中的映射,那样来说能够一贯在此映射上审查成分,如
3 所示

二人置调控是或不是须求映射,要是撤废选中,则撤除映射,且可在手提式有线电电话机上审查成分,如图

4858美高梅 17

4858美高梅 18

5 地方中能够做相应设置

4858美高梅 19

4858美高梅 20

 

五、端口转载功用,实现本地/服务器相关页面包车型客车调治

地点谈到的调度只是大旨的功能,只可以调节和测试服务器(特定链接)上的页面,固然要调度本地的页面文件呢?

4858美高梅 21

4858美高梅 22

4858美高梅 23

本身写了个地面包车型地铁文件,要调整,结果是拒绝访问

化解办法是布置1个地面服务器,然后通过端口转载(Port
Forwarding)那个职能,达成相关页面包车型地铁调度

恍如那样安顿好可用以端口转载的端口

4858美高梅 24

要么从此处进入配置

4858美高梅 25

配备本地服务器的端口(笔者动用到了wampserver ,用了Apache的服务器

Apache设置好端口为8080过后,PC端访问成功,同步到手提式有线话机,手提式有线电话机端也拜会成功,接下去就足以开始展览调节和测试了

4858美高梅 26

4858美高梅 27

4858美高梅 28

 

 

参照作品:Chrome Remote Debugging

一年不见,新浪都长草啦…… 前些天刚入手菜鸟机 HTC伍,系统真心流畅呀。为什么要买…

一年不见,新浪都长草啦……

Learning Hybird App Test–Appium Java(Leyden)

 

 

浏览器的长距离调节和测试工具,使得我们能够通过PC上张开的调节台,调试手机浏览器中正在运转的代码。运转于
Android 四+系统的Chrome for Android 同样也得以包容ADB(Android Debug
Bridge)达成桌面远程调节和测试。桌面版Chrome3二+已经帮助免安装ADB就能够达成远程调节和测试移动道具页面/WebView

Android远程调节和测试如今支撑全数操作系统,并且支持以下: 
● 调节和测试站点的页面 
● 调节和测试安卓原生App中的WebView 
● 实时将安卓设备的显示器图像同步显示到支付机器。 
● 通过端口转发(port forwarding)与虚拟主机映射(virtual host
mapping)实现安卓移动道具与费用服务器实行交互调节和测试。

而在新型的Android 四.四 基特kat版本中,原本基于Android
WebKit的WebView达成被换到基于Chromium的WebView完成。

后天刚动手菜鸟机小米5,系统真心流畅呀。为什么要买一加伍吗,因为要加强生产力呀,好有趣移动前端开辟呀哈哈

前日刚入手菜鸟机小米5,系统真心流畅呀。为什么要买iPhone伍吗,因为要增长生产力呀,好有意思移动前端开垦呀哈哈

移动端 

4858美高梅 29

4858美高梅 30

  1. 在eclipse中配置AndroidSDK环境(Android6.0、ADT23.0) 
  2. 将手提式有线电话机与PC通过USB连接,开启USB调节和测试格局; 
  3. 运用360有线电话帮手或在dos窗口输入adb devices查看手提式有线电话机驱动连接是或不是中标;

那么难题来了,要怎么调节和测试手提式有线电电话机上的前端页面吗?

那正是说难点来了,要怎么调节和测试手提式有线电话机上的前端页面吗?

PC端 

很久自古以来,作者的做法是:在PC上用Chrome移动模拟器调节和测试好后,基本OK,再把相关文件传到手提式有线电话机上,在真机上测试以免特殊主题材料应运而生。

很久自古以来,小编的做法是:在PC上用Chrome移动模拟器调节和测试好后,基本OK,再把有关文书传到手提式有线电话机上,在真机上测试避防特殊难题应运而生。

  1. 在Chrome浏览器地址栏输入chrome://inspect,进入调节和测试格局; 
  2. 此时页面显示了手提式有线电话机型号、驱动名称、应用软件要调整的WebView名称; 
  3. 点击inspect,若成功加载与APP端一样分界面包车型客车调节和测试页面,则安顿成功; 
    肆.
    若赢得不到WebView或许调节和测试页面预览框突显空白,则需求展开VPN破解–安装FQ软件(由于暗中同意的DevTools使用的是appspot服务器,那在境内是供给翻越GWF)

本条珍视有多少个毛病:壹是传来传去的麻烦,数据量大的那就更麻烦了;二是不得不展现地望着页面测试,无法做到真正的调理,测试出现难题了又得重复传。

这些入眼有五个毛病:1是传来传去的劳动,数据量大的那就更麻烦了;二是不得不呈现地看着页面测试,无法不辱职分真正的调整,测试出现难题了又得重复传。

4858美高梅 31

于今,笔者的做法是:用PC端的Chrome与手提式有线电话机端的Chrome连接,通过一条数据线,实行长距离的真机调节和测试。

现在,笔者的做法是:用PC端的Chrome与手提式无线电话机端的Chrome连接,通过一条数据线,进行长距离的真机调节和测试。

4858美高梅 32

如此那般就革新了上述的欠缺,即便只怕也会有其余不足的地点,但当下以来,应付一般的活动端调节和测试,应该丰硕了。

诸如此类就立异了上述的弱点,尽管大概也会有其余不足的地点,但日前的话,应付一般的移位端调节和测试,应该丰硕了。

 

 

接下去,就透过Samsung五,讲授那一调节和测试方案的备选过程

接下去,就透过One plus5,讲解那1调理方案的希图进度

 

 

1、PC端准备Chrome新本子、手提式无线话机端绸缪活动Chrome新本子

壹、PC端希图Chrome新本子、手提式有线电话机端筹算活动Chrome新本子

二、手提式无线电话机的开荒者选项张开,当中的USB调节和测试展开

2、手提式有线电话机的开荒者选项展开,在这之中的USB调节和测试展开

4858美高梅 33

4858美高梅 34

 

 

 

 

叁、通过数据线连接PC,笔者的是Win7X64体系,苹果MAC的相应也得以,这一步是装好手提式有线电话机的驱动

三、通过数据线连接PC,作者的是Win7X64种类,苹果MAC的应有也得以,这一步是装好手提式有线电话机的驱动

Win柒暗许连接的时候会自动安装相应驱动程序,如若设置不成功,能够用第3方的手提式无线电话机帮手,它们也会帮您安装,也许自个儿手动安装

Win柒私下认可连接的时候会活动安装相应驱动程序,若是设置不成事,能够用第一方的手提式有线电电话机帮手,它们也会帮您安装,大概本人手动安装

譬如说One plus5自行安装驱动成功了,但ADB
Interface却出现了难点,在设备处理器那里能够看来惊讶号,所以手动安装:

比方说Samsung伍自行安装驱动成功了,但ADB
Interface却出现了难点,在装备管理器那里能够看到惊叹号,所以手动安装:

访问 华为官方网址 ,选拔有关下载,下载相应的驱动包,如图

访问 索尼爱立信官方网址 ,选拔有关下载,下载相应的驱动包,如图

4858美高梅 35

4858美高梅 36

4858美高梅 37

4858美高梅 38

4858美高梅 39

4858美高梅 40

下载成功后,把减掉包解压出来,如/Driver
的目录格局,手动安装,张开设备管理器,如若驱动以及OK了就足以忽略下一步了

下载成功后,把减掉包解压出来,如/Driver
的目录方式,手动安装,展开设备管理器,假诺驱动以及OK了即可忽略下一步了

若果ADB Interface处有惊叹号,就右键更新驱动程序,按步骤实行

假使ADB Interface处有惊叹号,就右键更新驱动程序,按步骤实行

4858美高梅 41

4858美高梅 42

4858美高梅 43

4858美高梅 44

4858美高梅 45

4858美高梅 46

作者的驱动是早已OK了为此出现上海体育场合

4858美高梅 ,本身的驱动是早已OK了为此出现上海体育场地

使得有标题标话,就挑选从磁盘安装,接纳/Driver
目录下的附和inf文件,进行设置就能够了

使得有标题标话,就挑选从磁盘安装,采用/Driver
目录下的照拂inf文件,进行安装就足以了

4858美高梅 47

4858美高梅 48

4858美高梅 49

4858美高梅 50

末段,长成那样就OK了

最后,长成这样就OK了

4858美高梅 51

4858美高梅 52

使得装置的步骤告1段落,苹果MAC的规律也好些个,也得保证好驱动的支撑。

使得装置的步调告壹段落,苹果MAC的原理也大约,也得保险好驱动的扶助。

 

 

4、明确PC端Chrome与移动端Chrome的接二连三,进行调解

四、明确PC端Chrome与运动端Chrome的连年,举办调度

PC端打开 chrome://inspect/#devices ,能够见到,没有察觉设备

PC端打开  ,能够看到,未有意识设备

4858美高梅 53 

4858美高梅 54 

数据线连接手提式有线电话机,(采用允许设备调节和测试)看到器械

数据线连接手提式有线电话机,(选择允许设备调节和测试)看到器具

4858美高梅 55

4858美高梅 56

诸如此类就能够PC端和移动端同步了,比如输入框中输入url进行跳转

这么就能够PC端和移动端同步了,比方输入框中输入url进行跳转

4858美高梅 57

4858美高梅 58

4858美高梅 59

4858美高梅 60

在移动端Chrome中就可以观察页面获得了翻新,选用inspect选项,举行审核成分,可弹出调节和测试窗口

在活动端Chrome中就能够见见页面获得了立异,选择inspect选项,实行审查批准成分,可弹出调节和测试窗口

4858美高梅 61

4858美高梅 62

壹 地点能够自定义链接更新

1 地方能够自定义链接更新

二地方是手提式有线电话机Chrome中页面在PC中的映射,那样以来能够一直在此映射上查处成分,如
三 所示

4人置是手提式有线电话机Chrome中页面在PC中的映射,这样来讲能够一贯在此映射上查处元素,如
三 所示

二人置调整是还是不是须要映射,假设撤废选中,则撤销映射,且可在三哥伦比亚大学上查处元素,如图

4地点调整是或不是须要映射,假使撤废选中,则裁撤映射,且可在手提式有线电话机上查处成分,如图

4858美高梅 63

4858美高梅 64

4858美高梅 65

4858美高梅 66

伍 地点中得以做相应设置

5 地方中能够做相应设置

4858美高梅 67

4858美高梅 68

4858美高梅 69

4858美高梅 70

 

 

5、端口转发作用,达成本地/服务器相关页面包车型大巴调治

伍、端口转载功用,达成本地/服务器相关页面包车型地铁调解

地方谈起的调节和测试只是焦点的功效,只可以调节和测试服务器(特定链接)上的页面,要是要调整本地的页面文件呢?

地方聊起的调节和测试只是宗旨的效劳,只能调节和测试服务器(特定链接)上的页面,借使要调解本地的页面文件呢?

4858美高梅 71

4858美高梅 72

4858美高梅 73

4858美高梅 74

4858美高梅 75

4858美高梅 76

自笔者写了个地面包车型大巴文书,要调度,结果是拒绝访问

自家写了个地方的文件,要调治,结果是不容访问

消除办法是安排三个本地服务器,然后通过端口转载(Port
Forwarding)那个意义,落成相关页面的调解

化解办法是布局一个本地服务器,然后经过端口转载(Port
Forwarding)这几个效果,实现相关页面包车型客车调和

看似那样安插好可用于端口转载的端口

类似那样布署好可用以端口转载的端口

4858美高梅 77

4858美高梅 78

要么从此处进入配置

抑或从那边进入配置

4858美高梅 79

4858美高梅 80

配备本地服务器的端口(小编动用到了wampserver ,用了Apache的服务器

布局本地服务器的端口(作者动用到了wampserver ,用了Apache的服务器

Apache设置好端口为8080随后,PC端访问成功,同步到手提式有线电话机,手提式有线电话机端也走访成功,接下去就足以展开调解了

Apache设置好端口为8080后头,PC端访问成功,同步到手提式有线电话机,手提式有线电话机端也拜会成功,接下去就能够实行调节和测试了

4858美高梅 81

4858美高梅 82

4858美高梅 83

4858美高梅 84

4858美高梅 85

4858美高梅 86

 

 

 

 

参考小说:Chrome Remote
Debugging

参照小说:Chrome Remote
Debugging

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有