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

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

 

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

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

好久好久之前，个人作法是：在PC上用Chrome移动模拟器调试好后，基本OK，再把相关文件传到手机上，在真机上测试以防特殊问题出现。

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

如今，个人作法是：用PC端的Chrome与手机端的Chrome链接，经过一条数据线，进行远程的真机调试。

这么就改善了上述的缺点，虽然可能也会有其余不足的地方，但目前来讲，应付通常的移动端调试，应该足够了。

 

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

 

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

2、手机的开发者选项打开，其中的USB调试打开

 

 

3、经过数据线链接PC，个人是Win7 X64系统，苹果MAC的应该也能够，这一步是装好手机的驱动

Win7默认链接的时候会自动安装相应驱动程序，若是安装不成功，能够用第三方的手机助手，它们也会帮你安装，或者本身手动安装

好比小米5自动安装驱动成功了，但ADB Interface却出现了问题，在设备管理器那里能够看到感叹号，因此手动安装：

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

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

若是ADB Interface处有感叹号，就右键更新驱动程序，按步骤进行

个人驱动是已经OK了因此出现上图

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

最后，长成这样就OK了

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

 

4、肯定PC端Chrome与移动端Chrome的链接，进行调试

PC端打开 chrome://inspect/#devices ，能够看到，没有发现设备

 

数据线链接手机，（选择容许设备调试）看到设备

这样就能够PC端和移动端同步了，好比输入框中输入url进行跳转

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

1 位置能够自定义连接更新

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

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

5 位置中能够作相应设置

 

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

上面说到的调试只是基本的功能，只能调试服务器（特定连接）上的页面，若是要调试本地的页面文件呢？

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

解决办法是配置一个本地服务器，而后经过端口转发（Port Forwarding）这个功能，实现相关页面的调试

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

或者从这里进入配置

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

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

 

 

参考文章：Chrome Remote Debugging