大佬教程收集整理的这篇文章主要介绍了移动端网页调试方案,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
chrome、safari、firefox、samsung browser
不同平台实现不一样
微信平台
微信iOS端是采用wkwebkit进行渲染的,Android平台采用的是x5内核
if (Build.VERSION.SDK_INT >= Build.VERSION_CODEs.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
adb devices
然后从chrome浏览器F12找到Remote devices
inspect你想要监听的页面,如下
使用Safari自带的开发者工具
通过网络代理进行设备网络请求的监听,注意https需要设置证书,并且就算设置了证书,tls1.2以上的post请求也无法监听,只能监听tls1.2以下的,还有就是现在很多app基于https的,当它判断你的证书自定义的时候,会抛出异常无法进行api请求,请自行判断。
代理主机名为你的笔记本在局域网下的ip地址,端口号在charles软件中proxy->proxy setTings中设置
代理设置好后Android设备可能需要关闭wifi再重新打开wifi代理才能生效,并且第一次代理charles软件需要点击allow。
https证书安装:Help -> SSL Proxying -> Install Charles Root Certification on a Mobile Device or a Remote Revice,它会指导你用手机下载一个charles自定义的https证书然后安装。
由于某些app并没有打开remote debug,而我们又要内嵌自己的页面进行调试,抓包只能检测网络请求。所以这个工具就有了使用场景。它能够检测elements并查看js输出信息。
使用方法:
pw1 npm -g install weinre weinre --boundHost 192.168.1.194 --httpPort 9090
html <script src="http://m.kuaijiajin.club:9090/target/target-script-min.js#anonymous" ></script>
在chrome浏览器中打开地址,选择elements和console监测页面
总的来说,这几种方案覆盖了大部分使用场景,开发过程中问题不大。如果还有别的要排查的,总体来说不外乎加日志、加alert等等,最优解是自带的web检查器,不过还是结合着用吧,非常方便。
当然,还有一些很好用的调试工具像腾讯出品的vConsole也不错,自己看着选择吧。
还有,如app容器是你自己开发的,Android studio是会在log里打印出console信息的。
我们简单分下情况:
一般来说你需要用到的大部分ES6特性。 在Android 6.0或iOS 10.0以上均已实现随便用,这以下就要注意兼容性问题了。 其中一些基础特性,Android 5.1就已经支持了。
以上是大佬教程为你收集整理的移动端网页调试方案全部内容,希望文章能够帮你解决移动端网页调试方案所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。