IT学习站-137zw.com

more +资源更新Forums

more +随机图赏Gallery

Zabbix 4.0 企业级自动化监控系统实战,完整版Zabbix 4.0 企业级自动化监控系统实战,完整版
Java程序员面试笔试真题与解析 完整pdf扫描版Java程序员面试笔试真题与解析 完整pdf扫描版
价值348元 RabbitMQ消息中间件技术精讲2018视频教程 百度云价值348元 RabbitMQ消息中间件技术精讲2018视频教程 百度云
10节课让你成为滚床单高手  强烈推荐 屌丝的福音10节课让你成为滚床单高手 强烈推荐 屌丝的福音
Spring Boot编程思想(核心篇) PDF 电子书 百度云 网盘下载Spring Boot编程思想(核心篇) PDF 电子书 百度云 网盘下载
最新流出的传智博学谷黑马python5.0课程最新流出的传智博学谷黑马python5.0课程

移动端网页调试方案

移动端网页调试方案

[复制链接]
小雨敲窗y | 显示全部楼层 发表于: 2019-11-14 11:55:00
小雨敲窗y 发表于: 2019-11-14 11:55:00 | 显示全部楼层 |阅读模式
查看: 45|回复: 0
移动端调试方案

页面容器

移动设备上的各种浏览器

chrome、safari、firefox、samsung browser
各类app内的webview

不同平台实现不一样

  • iOS平台
    iOS 8.0以前的UIWebView,现在(2019年)基本被淘汰,不用管。
    iOS 8.0及以后的WKWebView,主流应用内均使用它作为容器展示html
  • Android平台
    WebView实现一般为Android WebView,部分手机厂商会默认设置成chrome实现,差别不是很大。
  • 微信平台
微信iOS端是采用wkwebkit进行渲染的,Android平台采用的是x5内核
debug方案

Android端

由于移动端网页开发不能直接打开developer tools,导致我们调试起来稍微麻烦。好在我们有解决方案:
Remote Devices
谷歌为我们提供的开发利器,让我们可以在电脑端使用developer tools进行elements检查和network监测,非常方便快捷。
使用方式:

  • app容器需要进行如下设置,chrome、samsung浏览器不用,默认就能打开
  • 手机打开usb调试
  • 手机和电脑通过数据线连接,通过命令行执行,显示如图之后,表示成功连接
    移动端网页调试方案  技术博客 1054457-20190909193149112-1034960866

  • 然后从chrome浏览器F12找到Remote devices
    移动端网页调试方案  技术博客 1054457-20190909193307597-1656299586

  • inspect你想要监听的页面,如下
    移动端网页调试方案  技术博客 1054457-20190909193402958-1848428342

iOS端

使用Safari自带的开发者工具

  • 首先是iOS设备点击设置->Safari->高级设置->打开web检查器
  • 如果是app容器,使用webview加载页面,那么app容器需要是开发包,apple store上的正式包是不行的。
    移动端网页调试方案  技术博客 1054457-20190909193448179-1188227893

跨平台

抓包工具Charles

通过网络代理进行设备网络请求的监听,注意https需要设置证书,并且就算设置了证书,tls1.2以上的post请求也无法监听,只能监听tls1.2以下的,还有就是现在很多app基于https的,当它判断你的证书自定义的时候,会抛出异常无法进行api请求,请自行判断。

  • 设备和电脑连到同一局域网,在Android设备中点击wifi详情,进入高级设置里设置网络代理,iOS设备点击wifi详情,点击配置代理选择手动。
  • 代理主机名为你的笔记本在局域网下的ip地址,端口号在charles软件中proxy->proxy settings中设置
    移动端网页调试方案  技术博客 1054457-20190909194910241-2017344744

  • 代理设置好后Android设备可能需要关闭wifi再重新打开wifi代理才能生效,并且第一次代理charles软件需要点击allow。
    移动端网页调试方案  技术博客 1054457-20190909193610591-1372754864

  • https证书安装:Help -> SSL Proxying -> Install Charles Root Certification on a Mobile Device or a Remote Revice,它会指导你用手机下载一个charles自定义的https证书然后安装。
调试工具weinre

由于某些app并没有打开remote debug,而我们又要内嵌自己的页面进行调试,抓包只能检测网络请求。所以这个工具就有了使用场景。它能够检测elements并查看js输出信息。
使用方法:

  • 通过npm安装weinre
  • 在你要调试的页面中插入js脚本,anonymous是appid,你可以自定义
    [code][/code]
  • 在chrome浏览器中打开地址,选择elements和console监测页面
    移动端网页调试方案  技术博客 1054457-20190909193651705-528014737

其他方案

总的来说,这几种方案覆盖了大部分使用场景,开发过程中问题不大。如果还有别的要排查的,总体来说不外乎加日志、加alert等等,最优解是自带的web检查器,不过还是结合着用吧,非常方便。
当然,还有一些很好用的调试工具像腾讯出品的vConsole也不错,自己看着选择吧。
还有,如app容器是你自己开发的,Android studio是会在log里打印出console信息的。
附录:ES6标准兼容情况

我们简单分下情况:
一般来说你需要用到的大部分ES6特性。 在Android 6.0或iOS 10.0以上均已实现随便用,这以下就要注意兼容性问题了。 其中一些基础特性,Android 5.1就已经支持了。
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3hape0w9ueqsk

来源:http://www.137zw.com
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
137zw.com IT学习站致力于免费提供精品的java技术教程和python技术教程,CCNA书籍/资料/CCNP书籍/资料教程/CCIE书籍/资料/H3C学习/认证/一级建造师考试/微软学习/认证/包括基础教程和高级实战教程,同时也提供分享网站源码下载和互联网相关一系列的技术教程,我们想做的就是让知识分享更有价值!(IT学习站官方唯一域名地址:www.137zw.com 请谨防假冒网站!)本站所有资源全部收集于互联网或网友自行分享,分享目的仅供大家学习与参考,如无意中侵犯您的合法权益,请联系本站管理员进行删除处理!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

浙ICP备19022368号-1|Archiver|手机版|IT学习站-137zw.com

GMT+8, 2020-7-11 00:42 , Processed in 0.264710 second(s), 34 queries .

快速回复 返回顶部 返回列表