iOS开发技巧-使用Reveal查看第三方APP的界面结构

看完这篇文章你将会GET以下几个技能

  • 苹果手机越狱
  • 动态调试自己的APP界面
  • 动态调试第三方的APP界面

前言

我们平时在做原生界面开发的时候,想要查看界面的层次结构,可以使用Xcode自带的功能Debug View Hierarchy,但如果电脑稍微旧一点,可能打开都会卡一会才能显示出来,而且功能又少,只能简单地查看一下当前界面的层次结构。

Reveal or Lookin

为了解决这个开发中的痛点,其实国内外都已经有很成熟的第三方软件可以供我们调试界面了,例如国外开发的Reveal以及国内由腾讯技术团队开发的Lookin

Reveal:可以调试自己的APP(不需要越狱)以及其他第三方APP的界面结构(需要越狱)
Lookin:仅可以调试自己的APP的界面结构,不需要越狱

比较之下,Reveal的功能更加强大点,所以接下来我会讲解RevealReveal可以干些什么呢?

  • 实时显示APP当前界面的层次结构。(Lookin还可以看到对应元素的命名)
  • 可以动态更改界面的元素,例如文字颜色,背景颜色,View之间的间距等等。这个很有用,有时候我们想要改一下间距或者颜色的话,需要改一次又编译一次,然后不满意继续改继续编译,浪费了很多时间,学会利用Reveal会让你节省很多开发时间,提高工作效率
  • 可以直接调试第三方APP的界面(本文的重点
  • ...

我在网上搜到很多关于Reveal的文章大多都是几年前的了,到现在没有更新过,如果我们直接按着这些文章来学的话可能会走很多弯路,因为有一些东西没有讲得很清楚并且Reveal最新版本的其中的一些文件已经改了名了,所以在这里整理一下目前正确的使用方法

调试自己的APP

如果仅仅需要调试自己的APP的话,直接把下面流程拿到的RevealServer.framework丢进工程目录就可以进行调试了,不需要越狱

进入正题 - 分析任意APP的界面结构

准备材料
  • 一台越狱iPhone
  • 安装Reveal(官网版本是收费的,有一段免费使用时间,我在网上找到一个破解版本可以免费使用,下载链接:https://pan.baidu.com/s/1cKbaoAm2dBsJ9gw-c9j0OQ 密码:2b49
越狱

我使用的是iPhone5s 系统版本 9.3.2
建议用windows电脑下载爱思助手,一键越狱(mac版本的爱思助手好像已经不能使用越狱功能了),也可以使用其他越狱方法,能成功越狱就行。

iOS开发技巧-使用Reveal查看第三方APP的界面结构_第1张图片

按照步骤一步一步越狱就可以了

  • 越狱成功后会有一个软件叫Cydia,能打开说明越狱成功,上面那种越狱方法是非完美越狱,重启设备后需要重新越狱,手机浏览网站http://jb92.i4.cn进行修复即可
  • 打开Cydia,点搜索,分别按顺序搜索并安装Cydia SubstrateOpenSSH
  • CydiaSubstrate是一个框架,允许第三方的开发者在系统的方法里打一些运行时补丁,扩展一些方法.只有安装了CydiaSubstrate才会有下面要用到的目录,/Library/MobileSubstrate/DinamicLibraries
配置文件
  • 手机需要用数据线连接电脑
  • 安装好openSSH之后,需要拷贝Reveal的两个东西到手机对应目录里面
  • 如果是下载了我上面提供的破解版,里面的文件目录是这样的
iOS开发技巧-使用Reveal查看第三方APP的界面结构_第2张图片

Reveal拖入应用程序即安装完成,然后打开Reveal->Help->Show Reveal Library in Finder->iOS Library

iOS开发技巧-使用Reveal查看第三方APP的界面结构_第3张图片
  • 拷贝Reveal.framework
    打开后把RevealServer.framework拷贝到桌面或者其他地方
iOS开发技巧-使用Reveal查看第三方APP的界面结构_第4张图片

把拷贝完的文件的文件名由RevealServer.framework修改为Reveal.framework

iOS开发技巧-使用Reveal查看第三方APP的界面结构_第5张图片

然后丢进手机文件夹/System/Library/Frameworks/目录下,可以直接使用爱思助手的文件管理导入到该目录下面,也可以使用openSSH导入
终端输入

scp -r /Users/Jimmy/Desktop/Reveal.framework [email protected]:/System/Library/Frameworks

上面这条指令中,注意替换一下自己的reveal.framework的绝对路径,以及自己手机的ip地址

  • 拷贝libReveal.dylib
    还有一个文件需要导入,把reveal.framework下的RevealServer名字改为libReveal.dylib
iOS开发技巧-使用Reveal查看第三方APP的界面结构_第6张图片

然后按上面那种方式导入到/Library/MobileSubstrate/DynamicLibraries/目录下

scp /Users/Jimmy/Desktop/RevealServer.framework/RevealServer [email protected]:/Library/MobileSubstrate/DynamicLibraries
  • 创建libReveal.plist文件并导入
    通过终端在电脑上创建一个名为 libReveal.plist文件
MacdeMacBook-Pro:~ Jimmy$ echo "" > libReveal.plist

往文件里加入下面内容

{
    Filter = {
        Bundles = (
            "com.taobao.taobao4iphone"
        );
    };
}

如下

iOS开发技巧-使用Reveal查看第三方APP的界面结构_第7张图片

加入你想查看的AppBundle IdBundles数组中,可以通过爱思助手查看对应APP文件夹的iTunesMetadata.plist文件中的softwareVersionBundleId对应的值,以上是某宝的Bundle Id

然后把这个文件导入到/Library/MobileSubstrate/DynamicLibraries/目录下,导入方式同上。

配置完成
  • 重启一下手机,如果是非完美越狱的话重启后需要再次越狱(如果是按我这种方式越狱的话,手机浏览爱思助手提供的网站进行修复即可)

  • 现在可以直接打开Reveal调试第三方App了,这里我用某宝举例。
    有两种连接方式,一种是通过数据线连接,另一种是通过WIFI连接(手机和电脑必须在同一个WIFI下)

  • 手机打开某宝APPReveal的可调试列表中就会显示某宝了

    iOS开发技巧-使用Reveal查看第三方APP的界面结构_第8张图片

    下面是某宝的首页的层次结构

  • 以后遇到什么不懂的布局/觉得自己的布局很糟糕/对别人app的布局好奇的话都可以通过Reveal来分析他们的布局了,对比优秀的App的布局和你的布局,学习他们好的地方~

你可能感兴趣的:(iOS开发技巧-使用Reveal查看第三方APP的界面结构)