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

一年不见,天涯论坛都长草啦……

一年不见,和讯都长草啦……

运动前端页面与Chrome的长途真机调试,chrome真机

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

 

前几天刚入手生手提式有线电话机小米5,系统真心流畅呀。为何要买中兴伍吗,因为要增加生产力呀,好风趣移动前端开采呀哈哈

澳门葡京 1

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

很久自古以来,作者的做法是:在PC上用Chrome移动模拟器调节和测试好后,基本OK,再把相关文件传到手提式无线话机上,在真机上测试避防特殊主题素材出现。

本条关键有三个缺陷:一是传来传去的分神,数据量大的那就更麻烦了;②是不得不展现地望着页面测试,没办法到位真正的调治,测试出现难点了又得重新传。

近期,笔者的做法是:用PC端的Chrome与手提式有线电话机端的Chrome连接,通过一条数据线,进行远程的真机调节和测试。

这么就革新了上述的老毛病,就算大概也会有其它不足的地方,但目前来讲,应付一般的运动端调节和测试,应该丰富了。

 

接下去,就因而黑莓伍,讲明这一调治将养方案的预备进度

 

一、PC端筹划Chrome新本子、手提式有线电话机端准备运动Chrome新本子

贰、手提式有线电话机的开拓者选项张开,个中的USB调节和测试展开

澳门葡京 2

 

 

3、通过数据线连接PC,作者的是Win7X6四系统,苹果MAC的应当也足以,这一步是装好手提式有线电话机的驱动

Win7暗中同意连接的时候会自行安装相应驱动程序,固然设置不成功,可以用第3方的手提式有线电话机帮手,它们也会帮您安装,可能自个儿手动安装

比方HTC五自动安装驱动成功了,但ADB
Interface却出现了难点,在设备管理器那里能够看来感叹号,所以手动安装:

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

澳门葡京 3

澳门葡京 4

澳门葡京 5

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

倘若ADB Interface处有惊讶号,就右键更新驱动程序,按步骤举行

澳门葡京 6

澳门葡京 7

澳门葡京 8

自家的驱动是早就OK了所以出现上海教室

使得有难题来讲,就接纳从磁盘安装,选取/Driver
目录下的照管inf文件,进行设置就足以了

澳门葡京 9

澳门葡京 10

终极,长成那样就OK了

澳门葡京 11

使得装置的手续告一段落,苹果MAC的法则也基本上,也得有限援助好驱动的支撑。

 

4、明确PC端Chrome与活动端Chrome的连年,举办调和

PC端打开 chrome://inspect/#devices ,可以见到,未有意识设备

澳门葡京 12 

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

澳门葡京 13

那般就足以PC端和移动端同步了,举个例子输入框中输入url实行跳转

澳门葡京 14

澳门葡京 15

在运动端Chrome中就能够看看页面得到了履新,采纳inspect选项,实行审查批准成分,可弹出调节和测试窗口

澳门葡京 16

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

3人置是手提式无线电话机Chrome中页面在PC中的映射,那样以来可以直接在此映射上查处成分,如
三 所示

二地点调控是还是不是要求映射,假如撤废选中,则撤废映射,且可在妹夫大上查处成分,如图

澳门葡京 17

澳门葡京 18

五 地方中能够做相应设置

澳门葡京 19

澳门葡京 20

 

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

地点提及的调度只是大旨的功效,只可以调节和测试服务器(特定链接)上的页面,如若要调度本地的页面文件呢?

澳门葡京 21

澳门葡京 22

澳门葡京 23

本身写了个地面的公文,要调度,结果是拒绝访问

chrome浏览器的devtool使用,移动前端页面与Chrome的远程真机调节和测试。消除办法是布置1个当地服务器,然后通过端口转载(Port
Forwarding)那一个职能,达成相关页面包车型客车调治

接近那样安顿好可用来端口转载的端口

澳门葡京 24

抑或从那边进入配置

澳门葡京 25

计划本地服务器的端口(小编使用到了wampserver ,用了Apache的服务器

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

澳门葡京 26

澳门葡京 27

澳门葡京 28

 

 

参考作品:Chrome Remote Debugging

一年不见,新浪都长草啦…… 明天刚出手新手提式有线电话机 OPPO5,系统真心流畅呀。为何要买…

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 4.4 Kitkat版本中,原本基于Android
Web基特的WebView落成被换到基于Chromium的WebView达成。

前些天刚入手新手提式有线电话机小米5,系统真心流畅呀。为何要买Nokia伍啊,因为要升高生产力呀,好风趣移动前端开采呀哈哈

前些天刚动手菜鸟机小米5,系统真心流畅呀。为什么要买OPPO5吧,因为要巩固生产力呀,好有意思移动前端开拓呀哈哈

移动端 

澳门葡京 29

澳门葡京 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)

其一第2有多个毛病:壹是传来传去的难为,数据量大的那就更麻烦了;二是不得不突显地瞅着页面测试,无法做到真正的调理,测试出现难点了又得重新传。

那些重大有七个毛病:一是传来传去的劳动,数据量大的那就更麻烦了;贰是不得不呈现地望着页面测试,不可能不负众望真正的调试,测试出现难题了又得重复传。

澳门葡京 31

近来,作者的做法是:用PC端的Chrome与手提式无线电话机端的Chrome连接,通过一条数据线,实行远程的真机调节和测试。

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

澳门葡京 32

那样就立异了上述的通病,即使恐怕也会有其余不足的地点,但眼前以来,应付一般的运动端调节和测试,应该丰盛了。

这么就改革了上述的缺点,固然也许也会有其余不足的地点,但目前的话,应付一般的位移端调节和测试,应该充裕了。

 

 

接下去,就透过金立五,讲解那一调节和测试方案的备选进度

接下去,就透过Nokia伍,疏解那一调弄整理方案的预备进度

 

 

壹、PC端希图Chrome新本子、手提式有线电话机端准备运动Chrome新本子

壹、PC端计划Chrome新本子、手提式无线电话机端筹算活动Chrome新本子

2、手提式有线电话机的开拓者选项张开,个中的USB调节和测试打开

贰、手提式有线电话机的开拓者选项打开,个中的USB调节和测试展开

澳门葡京 33

澳门葡京 34

 

 

 

 

3、通过数据线连接PC,小编的是Win7X64系统,苹果MAC的相应也能够,这一步是装好手提式无线电话机的驱动

三、通过数据线连接PC,作者的是Win七X64系统,苹果MAC的应当也能够,这一步是装好手提式有线电话机的驱动

Win7暗中认可连接的时候会自动安装相应驱动程序,若是设置不成事,能够用第二方的手提式有线电电话机助手,它们也会帮您安装,可能自身手动安装

Win七暗许连接的时候会活动安装相应驱动程序,假诺设置不成功,能够用第一方的无绳电话机帮手,它们也会帮您安装,大概自身手动安装

例如BlackBerry5机动安装驱动成功了,但ADB
Interface却出现了难题,在器物处理器那里能够看看惊叹号,所以手动安装:

譬喻HTC5机动安装驱动成功了,但ADB
Interface却出现了难题,在设施管理器那里能够看来惊讶号,所以手动安装:

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

访问 酷派官方网站 ,选拔有关下载,下载相应的驱动包,如图

澳门葡京 35

澳门葡京 36

澳门葡京 37

澳门葡京 38

澳门葡京 39

澳门葡京 40

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

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

万1ADB Interface处有感慨号,就右键更新驱动程序,按步骤实行

若是ADB Interface处有感慨号,就右键更新驱动程序,按步骤举行

澳门葡京 41

澳门葡京 42

澳门葡京 43

澳门葡京 44

澳门葡京 45

澳门葡京 46

小编的驱动是早已OK了为此出现上图

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

使得有失水准来说,就挑选从磁盘安装,采纳/Driver
目录下的对应inf文件,实行设置就足以了

使得非常来讲,就采纳从磁盘安装,选拔/Driver
目录下的附和inf文件,进行设置就足以了

澳门葡京 47

澳门葡京 48

澳门葡京 49

澳门葡京 50

终极,长成那样就OK了

末段,长成那样就OK了

澳门葡京 51

澳门葡京 52

使得装置的步调告1段落,苹果MAC的原理也大都,也得保险好驱动的支撑。

使得装置的步子告壹段落,苹果MAC的法则也大半,也得有限协理好驱动的援助。

 

 

4、明显PC端Chrome与活动端Chrome的总是,实行调治将养

④、鲜明PC端Chrome与移动端Chrome的两次三番,进行调治

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

澳门葡京,PC端打开  ,可以见到,没有发觉设备

澳门葡京 53 

澳门葡京 54 

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

数据线连接手机,(选拔允许设备调节和测试)看到器械

澳门葡京 55

澳门葡京 56

如此就能够PC端和移动端同步了,举例输入框中输入url举行跳转

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

澳门葡京 57

澳门葡京 58

澳门葡京 59

澳门葡京 60

在活动端Chrome中就能够看来页面获得了翻新,采取inspect选项,实行复核成分,可弹出调节和测试窗口

在活动端Chrome中就足以看到页面得到了履新,选取inspect选项,举行审查成分,可弹出调试窗口

澳门葡京 61

澳门葡京 62

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

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

几个人置是手提式有线电话机Chrome中页面在PC中的映射,那样的话能够一直在此映射上查处成分,如
3 所示

四地点是手提式有线电话机Chrome中页面在PC中的映射,这样的话能够一直在此映射上审查元素,如
叁 所示

二个人置调控是还是不是须要映射,即使撤消选中,则撤除映射,且可在手机上审查成分,如图

四地点调节是或不是须求映射,若是撤废选中,则打消映射,且可在手机上审查成分,如图

澳门葡京 63

澳门葡京 64

澳门葡京 65

澳门葡京 66

5 地方中得以做相应设置

伍 地点中能够做相应设置

澳门葡京 67

澳门葡京 68

澳门葡京 69

澳门葡京 70

 

 

五、端口转载功用,落成当地/服务器相关页面包车型客车调解

5、端口转载功效,完结本地/服务器相关页面包车型客车调节和测试

地方谈起的调试只是宗旨的法力,只可以调节和测试服务器(特定链接)上的页面,借使要调治本地的页面文件呢?

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

澳门葡京 71

澳门葡京 72

澳门葡京 73

澳门葡京 74

澳门葡京 75

澳门葡京 76

小编写了个地点的公文,要调度,结果是不容访问

本身写了个地方的文本,要调整,结果是不容访问

消除办法是安顿3个地面服务器,然后经过端口转发(Port
Forwarding)那些职能,达成相关页面包车型地铁调治将养

化解办法是布置3个本地服务器,然后通过端口转载(Port
Forwarding)那些功用,完结相关页面包车型客车调和

类似那样安顿好可用于端口转发的端口

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

澳门葡京 77

澳门葡京 78

依然从此间进入配置

也许从那里进入配置

澳门葡京 79

澳门葡京 80

安插本地服务器的端口(小编利用到了wampserver ,用了Apache的服务器

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

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

Apache设置好端口为8080之后,PC端访问成功,同步到手机,手机端也访问成功,接下去就能够进行调度了

澳门葡京 81

澳门葡京 82

澳门葡京 83

澳门葡京 84

澳门葡京 85

澳门葡京 86

 

 

 

 

参考小说:Chrome Remote
Debugging

参考小说:Chrome Remote
Debugging

相关文章

发表评论

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

*
*
Website