iPhone頁面的經常使用調試方法

 在iPhone中調試，大致上與上文 安卓中的移動頁面調試 相似，區別主要是iOS系統中的一些限制，致使某些工具沒法使用。

本文基於此，簡要介紹在iPhone中如何調試頁面。

最終能夠實如今Mac平臺使用Safari（或結合ios_webkit_dubug_proxy使用Chrome）調試手機中Safari的頁面，結合Charles進行抓包請求斷點，再經過微信ipa包重簽名來調試微信的WKWebView

在Windows中結合Fiddler與ios_webkit_debug_proxy中轉實現Chrome調試手機的Safari瀏覽器

 

1、可以訪問頁面

某些頁面須要設置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中也有對應的方法

 

2、審查元素查看頁面輸出

可使用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 ，再安裝這個插件

• 安裝powershell3: https://www.microsoft.com/en-us/download/details.aspx?id=34595
• 安裝scoop: iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
• 安裝git: scoop install git
• 關聯包集：scoop bucket add extras
• 安裝工具：scoop install ios-webkit-debug-proxy
• USB鏈接設備（或模擬器）
• 開啓ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html（參數免FQ）
• 設置Chrome://inspect中監聽端口
• 若是沒有設備列表，可能須要安裝iTunes來獲取（間接地使用受權功能）

一樣地，訪問相應的頁面

或者使用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中調試便可