调试H5页面-chrome调试手机

开发通常在电脑端通过设置UA来模拟移动端浏览器,但是有时候无法满足要求。手机上应该如何调试H5,打印相应的log信息,而不是使用alert来调试?

移动端调试方法其一就是通过chrome浏览器,缺点就是只能调试通过手机端的chrome浏览器打开的网页,通过其他浏览器测试一些兼容性问题就无法调试

步骤如下:

1、pc端和移动端均需要安装chrome浏览器(听说需要PC 端的 chrome 比手机端的 chrome 版本高才行-没试过低的,本身安装后版本就是这样,手机端比较低)

2、手机需要在“设置”中打开“开发者模式”(一般是在关于手机选项中开启),启用 usb 调试(以下是我测试的手机华为nova 4):

           

3、使用数据线将手机连接pc

4、手机和电脑打开Chrome浏览器,px端访问chrome://inspect/#devices,(登录Chrome账号-远程调试无法在访客模式及隐身模式下运行),注意请勾选:Discover USB devices

5、手机端打开需要调试的网页,或者在以下<Open tab with url>中输入网页地址,点击open,手机端和pc端会同步操作

6、点击inspect进行调试

7、通过如下调试页面进行调试:(可能打不开,注意如下问题)

问题:6操作后一般会出现404或打开空白,主要是因为调试工具需要访问chrome-devtools-frontend.appspot.com 和chrometophone.appspot.com,因为都是外网环境,所以无法访问。

解决:自己翻墙或者设置host

一、翻墙:可以采用Lantern、GreenVPN等等

二、设置host:通过host文件方式,寻找国内可以访问的 IP 地址。来访问这 2 个网址。----未测试,采用步骤一,网上找些免费的VPN简单又方便
打开 http://ping.chinaz.com,输入chrometophone.appspot.com 进行搜索,排除超时的和其他国家的,一般像是香港和台湾还有可以访问的。

把可以访问的 IP 地址添加到 host 文件去,如下:

172.217.24.20 chrome-devtools-frontend.appspot.com
172.217.24.20 chrometophone.appspot.com

之后访问一下 chrome-devtools-frontend.appspot.com若是打开则就可以调试了,重复上面的6点击inspect。

Guess you like

Origin blog.csdn.net/CamilleZJ/article/details/113182038