开发通常在电脑端通过设置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。