真机调试H5页面

文章背景：

由于市面上有各种不同型号的手机，尤其是安卓手机，不同手机上的wap端的h5页面出现不同的问题，但又不好调试，在pc端的手机模拟器上又看不出来，给开发造成很大的困难，在此我们就迫切的需要一个能够真机调试的方法

Android  手机真机调试（包括微信）

物料准备：

工具 chrome 浏览器 

重点：得科学上网

要调试的浏览器页面：  

手机打开 开发者 模式

安卓数据线（能传输数据的）

打开方式， 请自行 百度

始终允许 设备访问

调试步骤：

1. 将手机与 电脑通过USB 线 （可以连接数据的USB线）进行连接

2. 用chrome 浏览器打开 chrome://inspect（连接的时候，chrome浏览器要科学上网，不然手机和chrome连不上）可以看到下面的界面

3. 想要调试哪个页面，点击对应的网址就可以

调试微信页面

因 android 手机 微信大部分都是基于 微信的X5 内核 ，所以在 微信中开启 X5 内核 的inspect  即能实现通过， chrome 远程真机调试微信页面 。 

部分手机微信默认没有X5内核，微信中打开 URL debugmm.qq.com/?forcex5=tr… 进行X5内核安装

打开方式。 

通过 微信 打开 X5  debug URL （ debugx5.qq.com ）

选择 信息 tab 勾选  打开TBS 内核调试功能 。

用微信打开页面。 即可 在第一步中 ，找到url 地址进行审查修改。

IOS 手机真机调试（Mac + iphone） 

第一步：打开苹果手机 设置 > Safari浏览器 > 高级 > JavaScript + 网页检查器

第二步：打开 Mac 上的Safari浏览器 > 偏好设置 > 高级 > 在菜单栏中显示“开发”菜单

第三步：用原装数据先连接你的 Mac 电脑和苹果手机，并选择信任设备。然后在手机 Safari浏览器 中打开你需要调试的页面 m2.qschou.com，点击safari的开发菜单，选择iphone，即可看见刚打开的 m2.qschou.com，点击，即可出现调试器

有不懂的小伙伴可以评论区留言