iPhone页面的常用调试方法

在iPhone中调试,大体上与上文 安卓中的移动页面调试 类似,区别主要是iOS系统中的一些限制,导致某些工具无法使用。 本文基于此,简要介绍在iPhone中如何调试页面。 最终可以实现在Mac平台使用Safari(或结合ios_webkit_dubug_proxy使用Chrome)调试手机中Safari的页面,结合Charles进行抓包请求断点,再通过微信ipa包重签名来调试微信的WKWebView 在Windows中结合Fiddler与ios_webkit_debug_proxy中转实现Chrome调试手机的Safari浏览器

一、能够访问页面

某些页面需要设置HOST才能进行访问,在iPhone上不好设置HOST,所以需要一些代理工具帮助我们

除了Windows平台中常用的代理调试工具Fiddler之外,还可以使用Mac中的常用代理工具 Charles

Fiddler

与上文类似,在iPhone中的WiFi设置里面,设置代理为Windows的 ip:host,如果需要访问HTTPS的页面还需要设置证书

Charles

在手机上设置好代理后,访问页面时在Charles中统一请求接入即可

当需要进行HTTPS页面的访问时,也需要在Mac和iPhone中都设置好证书

 安装后可在Mac证书列表中看到

并设置相关的域

根据Charles的提示,手机连接代理之后访问 chls.pro/ssl 安装证书,再访问即可

而对于某些需要账号授权登陆的页面,涉及到Cookie的模拟登录,可以使用这两个代理工具进行设置

在Fiddler中可以按前文安卓的配置

在Charles中也有对应的方法

二、审查元素查看页面输出

可以使用Chrome的设备模拟来查看页面

不过对于iPhone的调试,还需要进行真机的页面查看

一般来说,iPhone中的页面是在Safari浏览器中查看的

微信中的内置浏览器是WKWebView内核或 UIWebView ,WKWebView的版本依赖于IOS的版本。其中 UIWebViewer 只是系统浏览器的一部分组建,功能不全或有所 限制

所以某些情况下可直接在手机的Safari浏览器进行查看调试,某些情况还是少不了在微信内置浏览器中进行

Safari远程调试

这个方法需要结合Mac的Safari浏览器使用,通过Mac与iPhone进行连接来调试

手机上访问某个页面,选取进行调试,将会打开Safari的开发者工具,可以看到熟悉的几个面板

除了审查元素查看日志之外,还可进行脚本的断点调试,查看网络请求等操作。

不过功能相对Chrome DevTools来说,相对简单了些,对于简单的页面可直接使用

对于高版本的iOS系统(如iPhone 7),进行远程调试的Mac主机的系统版本也有限制,并非任何Mac和iPhone之间都能进行调试

此外,这种远程调试仅支持调试手机的Safari浏览器,无法调试微信的内置浏览器

基于Weinre的调试

参考前文

基于微信开发者工具的调试

参考前文

与前文类似,这两种方法都能进行基础的页面信息查看,不支持HTTPS,使用spy-debugger可支持HTTPS

基于 spy-debugger 的调试

参考前文,设置好相应的HTTPS证书

基于 ios-webkit-debug-proxy 的调试

Mac上的safari调试功能不够好,而且不能调试微信中的页面,使用weinre只能简单地调试微信页面,无法进行脚本断点等高级功能

最好的办法莫过于让iPhone可Chrome Devtools进行连接,充分利用好的调试工具与现有的平台,进行调试。

ios-webkit-debug-proxy 支持多平台,这么来说我们可以不借助Mac主机实现调试iPhone的需求。不过配置过程稍微有些繁琐

在Mac中安装

在前面install前面加上参数是因为brew的update太慢了,手动设置成不需要update

另外,可以看到报错了,在这里设置权限即可

在手机打开某个页面,然后访问 localhost:9221 ,即可进行调试

或者之间在chrome中输入 chrome://inspect 也可看到相应信息

美中不足还是无法检测微信中的页面

在Windows中配置

在windows中配置相对麻烦了些,首先需要安装powershell(win10中已经自带),然后安装 scoop ,再安装这个插件

同样地,访问相应的页面

或者使用Chrome自身的DevTools来调试,即可实现在Window中调试手机Safari页面(然而还是不支持微信内置的)

调试微信内置的webview

要调试微信内置的webview,就需要对其进行重签名打包, 让iOS觉得我们是微信这个APP的开发者(苹果的限制太多了)

相关链接 相关链接

相关步骤:

在现有证书基础上(如果没有证书需要自己设置)

1. 下载 IPAPatch ,解压。

可以看到如下文件信息

2. 下载越狱版的微信ipa(尽量通过正规渠道获取,也可直接在PP助手下载,下载的时候不要连接手机)

ipa是iOS的应用程序文件包,类似安卓中的apk,正常版本的带有加密信息,打包后会出问题,越狱版已经去壳,可以签入我们的证书

3. 将 IPAPatch文件夹中的 /Assets/app.ipa 替换成这个微信 ipa

4. 用XCode打开 /IPAPatch.xcodeproj 

5. 设置 一个新的 BundleID,选用AppleID Team,设置Code Signing,选择真机 target,然后运行安装即可

遇到报错信息就按提示进行解决

可能遇到的问题有:

no matching provisioning profiles found   确认是否配置了证书,简单的操作可以直接按提示进行fixed

Code signing is required for product type 'Framework' in     不要忘了设置Framework中的签名

Xcode: failed to get the task for process  打开应用是会伴有闪退现象。 签名需要使用开发版(iOS Developer),不要使用发布版(iOS Distribution),ipa包需使用越狱版

Xcode “Device Locked” When iPhone is unlocked   记得在手机上选择信任电脑

could not find developer disk image   低版本的XCode不包含新版iOS的系统依赖,需要更新XCode为最新版,或者直接下载对应的包,放到XCode的包目录中

安装成功后一直停留在启动画面 可能是XCode开启了调试断点功能,取消即可

安装之后原有微信应用打不开了,如果使用不恰当的ipa包,会有意外的副作用,所以得谨慎选择ipa包

安装成功后,即可打开新的微信使用

登陆后,访问相关页面,就可以调试webview了

方法同上,可在Mac上使用Safari来调试内置浏览器的页面,公众号,小程序等

或者,直接使用我们的windows系统,开启 ios_webkit_debug_proxy 后,在Chrome中调试即可

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Danny的专栏

学习中遇到的小技巧 二 (陆续更新……)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

1164
来自专栏云+创业计划

静态网站在腾讯云上的托管

可以把静态网站中的各类资源,如图片、音视频、脚本文件等内容,可以存放至腾讯云对象存储(COS),把网站逻辑部署至腾讯云服务器(CVM)。当用户向网站发起访问时,...

1.7K2
来自专栏非著名程序员

环境配置:React Native智能开发工具,可代码提醒的IDE—VS Code

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) VS Code是一个专门为React Nat...

3755
来自专栏deed博客

[代码参考]在html文件调用其它html文件的几种方法

2173
来自专栏云计算教程系列

如何在Ubuntu 14.04上使用Fail2Ban保护WordPress

WordPress是一个非常强大的内容管理系统(CMS),是免费和开源的。因为任何人都可以发表评论,创建一个帐户,并在WordPress上发帖,许多恶意行为者已...

1480
来自专栏freesan44

加载RAM磁盘编译Xcode项目

每次对Xcode iOS项目进行clean、build或者在iOS虚拟机上launch,Xcode都会在DeriveData文件夹中进行读写操作。换句话说,就是...

992
来自专栏崔庆才的专栏

只会用Selenium爬网页?Appium爬App了解一下

2.9K5
来自专栏黑白安全

WordPress 4.9.6任意文件删除漏洞利用

WordPress是目前网络上最受欢迎的CMS。约有30%的网站都在使用它。这种广泛的采用,也使其成为了网络犯罪分子非常感兴趣的一个目标.RIPS团队在7个月前...

2425
来自专栏张戈的专栏

借助PageSpeed,为Nginx网站服务器提速

网站加载速度越快,访客互动性、留住率和转换率就越高,这早已不是什么秘密。网站每延迟 100 毫秒,亚马逊的销售额就会减少 1%;延迟增加 500 毫秒,这意味着...

3897
来自专栏前端达人

在 React 应用中获取数据

可以说 React 是构建 web 应用最流行的库。然而,它并不是全能的 web 框架。它只关注 MVC 中的 view 模块。

2492

扫码关注云+社区

领取腾讯云代金券