移动前端页面与Chrome的远程真机调试

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

前几日刚入手新手机小米5,系统真心流畅呀。为啥要买小米5呢,因为要提高生产力呀,好好玩移动前端开发呀哈哈哈

那么问题来了,要怎么调试手机上的前端页面呢?

很久很久以前,我的做法是:在PC上用Chrome移动模拟器调试好后,基本OK,再把相关文件传到手机上,在真机上测试以防特殊问题出现。

这个主要有两个缺点:一是传来传去的麻烦,数据量大的那就更麻烦了;二是只能显示地看着页面测试,不能做到真正的调试,测试出现问题了又得重新传。

现在,我的做法是:用PC端的Chrome与手机端的Chrome连接,通过一条数据线,进行远程的真机调试。

这么就改善了上述的缺点,虽然可能也会有其他不足的地方,但目前来说,应付一般的移动端调试,应该足够了。

接下来,就通过小米5,诠释这一调试方案的准备过程

一、PC端准备Chrome新版本、手机端准备移动Chrome新版本

二、手机的开发者选项打开,其中的USB调试打开

三、通过数据线连接PC,我的是Win7 X64系统,苹果MAC的应该也可以,这一步是装好手机的驱动

Win7默认连接的时候会自动安装相应驱动程序,如果安装不成功,可以用第三方的手机助手,它们也会帮你安装,或者自己手动安装

比如小米5自动安装驱动成功了,但ADB Interface却出现了问题,在设备管理器那里可以看到感叹号,所以手动安装:

访问 小米官网 ,选择相关下载,下载相应的驱动包,如图

下载成功后,把压缩包解压出来,如/Driver 的目录形式,手动安装,打开设备管理器,如果驱动以及OK了就可以忽略下一步了

如果ADB Interface处有感叹号,就右键更新驱动程序,按步骤进行

我的驱动是已经OK了所以出现上图

驱动有问题的话,就选择从磁盘安装,选择/Driver 目录下的相应inf文件,进行安装就可以了

最后,长成这样就OK了

驱动安装的步骤告一段落,苹果MAC的原理也差不多,也得保证好驱动的支持。

四、确定PC端Chrome与移动端Chrome的连接,进行调试

PC端打开 chrome://inspect/#devices ,可以看到,没有发现设备

数据线连接手机,(选择允许设备调试)看到设备

这样就可以PC端和移动端同步了,比如输入框中输入url进行跳转

在移动端Chrome中就可以看到页面得到了更新,选择inspect选项,进行审查元素,可弹出调试窗口

1 位置可以自定义链接更新

2 位置是手机Chrome中页面在PC中的映射,这样以来可以直接在此映射上审查元素,如 3 所示

4 位置控制是否需要映射,如果取消选中,则取消映射,且可在手机上审查元素,如图

5 位置中可以做相应设置

五、端口转发功能,实现本地/服务器相关页面的调试

上面说到的调试只是基本的功能,只能调试服务器(特定链接)上的页面,如果要调试本地的页面文件呢?

我写了个本地的文件,要调试,结果是拒绝访问

解决办法是配置一个本地服务器,然后通过端口转发(Port Forwarding)这个功能,实现相关页面的调试

类似这样配置好可用于端口转发的端口

或者从这里进入配置

配置本地服务器的端口(我使用到了wampserver ,用了Apache的服务器

Apache设置好端口为8080之后,PC端访问成功,同步到手机,手机端也访问成功,接下来就可以进行调试了

参考文章:Chrome Remote Debugging

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码匠的流水账

聊聊phantomjs的优化措施

phantomjs相当于一个后台浏览器,有点内嵌jetty的味道,通常在自动化测试或者爬虫领域用。

2061
来自专栏月色的自留地

在Mac上使用vs-code快速上手c语言学习(入门文,老鸟退散)

1K4
来自专栏阿北的知识分享

这周撸了两款小程序,总结下经验。

当一个小程序Page的js文件中存在 onShareAppMessage 方法时,可以触发转发功能,但是通过小程序开发者工具生成的模板中,入口文件的js中并没有...

3115
来自专栏信安之路

Clickjacking简单介绍

今天没有原创文章发了,从乌云知识库里选了一个文章给大家分享一下,不知道这种方式,大家是否能够接我从乌云知识库里选择一些文章给大家分享,请大家给我提出来,我来根据...

900
来自专栏康怀帅的专栏

SSH 隧道与转发内网穿透(转载)

大家都知道 SSH 是一种安全的传输协议,用在连接服务器上比较多。不过其实除了这个功能,它的隧道转发功能更是吸引人。下面是个人根据自己的需求以及在网上查找的资料...

5845
来自专栏开源优测

移动测试Appium开发环境搭建

移动测试Appium开发环境搭建 概述 本文主要分享移动测试Appium开发环境搭建所需要的主要工具、组件等,但并不详解的对每个工具、组件的安装进行详细的说明。...

2754
来自专栏程序员互动联盟

【专业技术】Windows里面如何玩转线程?

我们在编写程序的时候,常常会需要一些线程的delay函数。这个问题说简单也简单,说复杂也复杂。比如很多人读知道delay直接用Windows的API函数Slee...

3484
来自专栏bboysoul

ubuntu安装kali工具包

网上关于这方面的教程很多,大部分都是关于更换源的,今天我要推荐的方法原理一样,不过比较方便。今天要推荐的脚本是katoolin,它可以近似完美帮我们解决安装ka...

1062
来自专栏前端杂谈

广告等第三方应用嵌入到web页面方案 之 使用iframe嵌入

4907
来自专栏前端布道

Angular开发实践(一):环境准备及框架搭建

引言 在工作中引入Angular框架将近一年了,在这一年中不断的踩坑和填坑,当然也学习和积累了很多的知识,包括MVVM框架、前后端分离、前端工程化、SPA优化等...

3837

扫码关注云+社区

领取腾讯云代金券