手机端调试大全

1.如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面(摘自:https://www.cnblogs.com/JinQingsong/p/6591830.html)
使用chrome remote debug出现空白或者404,解决方式(摘自:https://www.jianshu.com/p/7be573c2f183)

2.如何使用电脑上的safari浏览器来调试ios手机上的移动端页面(摘自:https://blog.csdn.net/guoyuyanmen/article/details/52485439)
3.charles调试，证书安装
https://blog.csdn.net/zpf_nevergiveup/article/details/78994481

1. [如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面]

第一步 首先你得打开手机的开发者选项，确保USB调试和通过USB验证应用程序保持打开状态，如图所示

image

第二步 打开你电脑的上谷歌浏览器，调出控制台，点击如图所示这个3旁边的3个点，这里面有更多的功能，点击More tools，在之后的页面中discover USB devices选项打钩，用你数据链连接你的电脑和手机，确认后,左侧devices会显示连接设备,代表链接成功。

image

image

image

image

第三步 在电脑上的谷歌浏览器输入这个网址chrome://inspect/

image

第四步 手机端打开界面（部分app应用不支持，可用谷歌浏览器打开界面），输入你想要调试的网页，我一般都是把网页放到我的本地服务器，在手机浏览器上输入我的本地网址，如果是一个百度页面的例子

image

最后一步，我们点击inspect就可以审查手机页面了，审查方法就跟审查PC网页一样了。

image

访问 `chrome://inspect/#devices`出现空白页或出现404,用以下方式排查可基本解决问题
1.能够访问google.com
2.手机开启usb调试模式
3.允许电脑访问手机
4. 清除一下这里的缓存 chrome://appcache-internals/# 

safari调试iPhone app web页面

Safari设置
打开Safari偏好者设置，选中“高级菜单”，在页面最下方看到“在菜单中显示开发菜单”的复选框，在复选框内打钩，这样设置完毕就能在Safari菜单中看到开发菜单了

image.png

iPhone设置
打开iPhone手机设置app 选择Safari，找到高级选项，有JavaScript开关web检查器开关，讲两个开关都打开

image.png

调试
到此，准备工作完成。这时候讲iPhone链接到mac上，打开Safari浏览器，运行手机app里面的web页面，在开发菜单中选择连接的手机，找到调试的网页，就能在Safari里面调试了

image.png

Safari调试窗口

image.png

Safari控制台
在Safari中鼠标右键，选择检查元素，就可以看见Safari控制台了。如果看不到检查元素选项，依照上面Safari设置打开开发选项