App 开发神仙工具:帮你抓 Bug

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 本文分享优酷开源的 iOS 开发提效工具啄幕鸟,抓包、验埋点、视觉走查都很方便,离案也可随时定位问题,可帮助大家提高发现问题的效率。产品、测试、运营、UED 及开发人员皆宜。

一 背景

客户端日常开发中经常遇到各种低效痛点,比如开发 UI 界面时,开发、设计同学走查 UI 基本靠眼,不易于发现问题;设计同学想修改一个 UI 元素,除非是原开发者,其他同学不知道相关的 UI 类和 UI 布局,定位代码费时费力;再如出现 bug 时无法在 bug 现场获取数据定位问题,debug 依赖电脑联调,缺少独立便捷的 debug 工具。

对此优酷开发了啄幕鸟 iOS 提效工具平台,在端上整合各种高效 debug 工具,不依赖电脑联调,直接获取 App 运行时数据,快速定位问题,提高开发测试效率。

啄幕鸟项目现已开源,欢迎接入,共建共享。

二 啄幕鸟简介

啄幕鸟,即手机屏幕上的啄木鸟,森林里的啄木鸟抓虫子,优酷的啄幕鸟抓 bug。

啄幕鸟提效工具平台集合了 UI 检查、对象查看、方法监听、po 命令执行、JSON 抓包等十多个开发工具,不依赖电脑联调,直接获取运行时数据,快速定位 bug,简便易用,零侵入、零依赖、易接入、易扩展。

image.png

啄幕鸟架构图

image.png

啄幕鸟界面截图

1 啄幕鸟架构

啄幕鸟使用插件化架构,每个工具作为插件接入到啄幕鸟基础服务当中,各个插件相互独立,同时支持外部插件注册、定制等,啄幕鸟还提供了一些通用功能模块,如系统分享面板、屏幕日志等,方便各插件使用。

2 基础服务

基础服务包括生命周期管理,插件加载、注册、运行,资源管理,本地化等基础能力。

3 公共模块

啄幕鸟公共模块包括分享面板、图文预览、屏幕折线图、屏幕日志四部分,随着工具开发,越来越多的通用能力会总结到公共模块中。

1)分享面板封装了系统分享功能,方便各个工具导出信息,啄幕鸟中的文本、图片皆支持分享面板导出。

2)图文预览用以全屏查看文本、图片。

3)屏幕折线图方便插件直观的显示数据,啄幕鸟中性能插件使用了屏幕折线图显示性能数据。

4)屏幕日志模块方便各插件在 App 内显示日志、接受用户输入,屏幕日志界面大小可调,支持日志显示、用户输入、搜索、正则表达式过滤等功能,系统信息工具直接使用了屏幕日志显示信息:

image.png

系统信息插件中直接使用了屏幕日志显示信息

三 主要工具介绍

1 UI 检查工具

UI 检查包含控件拾取和测距条两个工具,控件拾取会根据手指在屏幕上的点击坐标,递归遍历 View 层级,获取包含触点坐标的最靠前的 UI 控件,并显示控件的类名、 frame、字体、图片 URL 等信息,方便地获取、导出运行时数据;测距条工具会在屏幕上添加大小、位置可控的 View 作为测量标尺,作为控件拾取的补充,对于某些不能通过控件拾取查看的大小间距,如行间距等,可以使用测距条测量。

image.png

控件拾取、测距条截图

2 In-App-Debug 工具

iOS 开发主要使用 LLDB 的断点、指令等进行 Debug,依赖电脑联调,In-App-Debug 即不依赖电脑,使用 App 内的 debug 工具获取运行时数据,帮助定位问题,啄幕鸟提供了多种查看运行时数据的方式:对象查看、方法监听、po 命令和 JSON 抓包,帮助在 bug 现场定位问题,In-App-Debug 工具都利用了 objective-C 的运行时特性,将运行时特性工具化,形成一能力多功能的开发工具,如方法监听既可以用于定位 bug,也可以监听网络方法抓取网络数据,其他工具也都有多种用途,可以极大提高 debug 效率。

1)对象查看

App 中所有的对象通过继承、代理、属性等关系,可以看作一个或多个连通图。从一个对象开始,可以利用运行时特性获取连通图里任一个对象的属性、成员变量,获取运行时数据,以定位问题。双击控件拾取的信息区即可打开对象查看,对象查看会显示拾取对象的属性、成员变量列表,点击对象即可查看它的属性,层层查找即可查看到每一个相关的对象,并可以通过命令读取对象 key-path-value、执行 po 命令等。

image.png

查看某 UILabel 对象、使用 k 命令获取圆角值

1-06-2.gif

UI 检查、对象查看 Demo

2)方法监听

对象查看提供了获取 App 静态数据的方式,而方法监听提供了获取动态数据的方式,输入监听命令即可监听任意 OC 方法的调用,输出调用参数和返回值,用以查看代码逻辑是否正常执行,关键方法是否调用,监听网络方法以在 App 内抓包等。

image.png

监听设置自动息屏方法并显示日志

1-08-2.gif

方法监听 Demo

方法监听利用了 OC 的消息转发机制,通过 hook 监听对象消息转发的相关方法,最后可以在 ykwoodpecker_forwardInvocation 方法中收到封装了被监听方法调用参数和返回值的 NSInvocation,即可获取 target、selector 等参数数组,根据参数编码规则解析相应的参数,最后修改 NSInvocation 的 selector 为指向原方法的 ykwoodpecker_selector,即可调用原方法获取返回值,输出日志。

image.png

使用方法监听需要输入类名、方法名、keypath 等参数,故采用了命令行进行交互,扩展性好,配合命令配置,输入也较方便。命令使用统一格式,<命令名缩写><空格><命令参数><空格><命令参数>,如监听命令 L className methodName,KVC 取值命令 k keyPath,调用栈查看命令 k callStack,所有命令详见工程 README。为方便输入,命令可通过后台配置,一键输入,命令配置采用如下格式的 JSON,可在啄幕鸟初始化时指定配置 JSON 的获取地址,推荐在 https://github.com/ZimWoodpecker/WoodpeckerCmdSource 工程中建立配置,方便命令共享。

image.png

后台命令配置格式

3)po 命令

po 命令是 iOS 开发中最常用的 debug 命令,po 命令工具会解析输入字符串,获取输入的方法名、参数等,动态调用所输入命令,并显示返回信息。

image.png

App 中执行 po 命令

4)JSON 抓包

使用方法监听抓包略有不便,数据量较大时会引起卡顿,因此提供了更方便的 JSON 抓包工具,通过监听 NSJSONSerialization 的 JSON 解析方法实现抓包。

image.png

JSON 抓包工具截图

四 更多功能

随着日常使用,啄幕鸟中增加了更多功能:

  • 系统信息:查看系统名称、版本、屏幕、UA 等信息,支持添加业务方信息。
  • SandBox:查看沙盒文件,导出文件等。
  • Defaults:查看、新增、删除 User Defaults。
  • 清除数据:清除所有沙盒数据,包括 User Default。
  • UI 对比:支持将设计图导入到 App 中进行对比,并可画线、标注需修改的地方,方便 UI 走查。
  • 查看图片资源、Bundle 资源:查看 App 中的图片资源与 Bundle 目录内容。
  • Crash:查看本地 crash 日志。
  • 触点显示:显示手指触控,方面录屏时显示触控操作。
  • 性能插件:查看 CPU、内存占用率,帧率,网络流量等。
  • 其他业务方注册的插件:环境切换、埋点、实验、调试工具等。

image.png

啄幕鸟工具插件截图

五 扩展开发

啄幕鸟使用插件化架构,新插件扩展方便,部分插件也支持功能扩展。一个类只需实现插件协议方法即可注册为插件,可定制插件分组、分组显示位置、插件名称、icon、插件显示位置等,简单方便,高可定制。控件拾取、系统信息等插件也支持功能扩展,通过监听相关系统通知可以获取拾取到的 View 等事件,并显示自定义信息,具体参见工程 README。

六 快速接入

啄幕鸟推出以来深受欢迎,已成为产品、设计、开发、测试日常互怼居家旅行必备之工具,啄幕鸟不依赖优酷、阿里或其它第三方库和数据,主要功能皆通过系统 API 或 hook 方式实现,没有使用 + load / initialize 方法,不开启啄幕鸟不会执行任何代码,简单安全,零侵入,零依赖。

啄幕鸟现已开源,是 AIOSO 的子项目之一,支持 iOS 8.0 及以上,阿里巴巴集团内外使用pod YKWoodpecker 即可接入。

Get Started:

pod  'YKWoodpecker'

一行代码打开啄幕鸟:

#import "YKWoodpecker.h"
 // 显示啄幕鸟入口
 [[YKWoodpeckerManager shareInstance] show];

更多介绍详见工程 README,Github 地址:
https://github.com/alibaba/youku-sdk-tool-woodpecker

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
3月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
771 7
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
783 1
|
3天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
2天前
鸿蒙语言开发 几十套鸿蒙ArkTs app毕业设计及课程作业
鸿蒙语言开发 几十套鸿蒙ArkTs app毕业设计及课程作业
13 1
|
11天前
|
JSON 缓存 前端开发
HarmonyOS NEXT 5.0鸿蒙开发一套影院APP(附带源码)
本项目基于HarmonyOS NEXT 5.0开发了一款影院应用程序,主要实现了电影和影院信息的展示功能。应用包括首页、电影列表、影院列表等模块。首页包含轮播图与正在热映及即将上映的电影切换显示;电影列表模块通过API获取电影数据并以网格形式展示,用户可以查看电影详情;影院列表则允许用户选择城市后查看对应影院信息,并支持城市选择弹窗。此外,项目中还集成了Axios用于网络请求,并进行了二次封装以简化接口调用流程,同时添加了请求和响应拦截器来处理通用逻辑。整体代码结构清晰,使用了组件化开发方式,便于维护和扩展。 该简介概括了提供的内容,但请注意实际开发中还需考虑UI优化、性能提升等方面的工作。
61 11
|
8天前
|
前端开发 数据库 UED
uniapp开发,前后端分离的陪玩系统优势,陪玩app功能特点,线上聊天线下陪玩,只要4800
前后端分离的陪玩系统将前端(用户界面)和后端(服务器逻辑)分开开发,前者负责页面渲染与用户交互,后者处理数据并提供接口。该架构提高开发效率、优化用户体验、增强可扩展性和稳定性,降低维护成本,提升安全性。玩家可发布陪玩需求,陪玩人员发布服务信息,支持在线聊天、预约及线下陪玩功能,满足多样化需求。[演示链接](https://www.51duoke.cn/games/?id=7)
|
14天前
|
供应链 搜索推荐 API
1688APP原数据API接口的开发、应用与收益(一篇文章全明白)
1688作为全球知名的B2B电商平台,通过开放的原数据API接口,为开发者提供了丰富的数据资源,涵盖商品信息、交易数据、店铺信息、物流信息和用户信息等。本文将深入探讨1688 APP原数据API接口的开发、应用及其带来的商业收益,包括提升流量、优化库存管理、增强用户体验等方面。
74 6
|
15天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
49 3
|
17天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
7天前
|
安全 算法 机器人
双重防护!红娘相亲app搭建开发,婚恋交友系统登录方式,密码+验证码的优势
在婚恋交友系统中,密码和验证码是两种重要的安全措施。密码用于验证用户身份,应设置为复杂组合以防止未经授权的访问;验证码则通过图形或字符识别,防止自动化攻击如暴力破解和注册机器人。两者同时开启可显著提高安全性,防止暴力破解和自动化注册,提升用户信任感。建议要求强密码、定期更新验证码样式,并在可疑登录时增加验证码复杂性。这样既能保障用户信息安全,又兼顾了用户体验。 ![交友11111.jpg](https://ucc.alicdn.com/pic/developer-ecology/hy2p6wcvgk4oe_c9eb8d6eb8144866b0cd1d96ffb0c907.jpg)