問題
接到一個緊急修復需求，發現一個 H5 遊戲在 iOS9 下顯示高度沒有鋪滿螢幕，需要調整高度達到自適應。
需求分析
- 頁面是一個 iframe，由 jssdk 控制
- iframe 高度 100%，但在 iOS9 下，底部遮蓋高度 20px
- 頂部黑邊 20px，由底層寫死，js 無法控制
- 頂部黑邊不能移除，目的需要相容曲面屏
初步結論
在 iOS9 下，iframe 的高度 100% 並不是螢幕的高度
驗證結論
除錯環境
- Charles：Web 除錯代理應用程式
- 測試機和電腦在同一區域網
配置 Charles
- 開啟 Charles，確保已開啟
Record、SSL Proxy和Windows Proxy - 開啟
SSL Proxy設定：Proxy-SSL Proxying Settings，新增本地代理：*:443 - 記住代理埠：
Proxy-Proxy Settings
配置測試機
- 解除安裝遊戲重新安裝
- 設定 WIFI 手動代理，IP 為電腦區域網 IP，埠為代理埠
- 安裝 SSL 證照，測試機訪問並安裝：
chls.pro/ssl
使用 Charles
- 測試機開啟遊戲，在 Charles 抓到對應的 js
- 右鍵 js，選擇
Map Local，Map From已自動填寫，選擇Map To為本地的 js - 清除 Charles 本地 Session，測試機重新開啟遊戲，現在，js 已經被替換成本地了
得到結論
由於 console 和 alert 看不到資訊，所以直接把資訊寫到 html 上
分析發現： screen.height 和 iframe 的 clientHeight 相等，也就是頂部黑邊高度也算進去了，所以需要減去黑邊
總結
最麻煩的除錯莫過於，有限時間內，線上程式碼動不得，原生程式碼難測，於是就有了本文，通過“自己劫持自己”的方式，更優雅快速地除錯並修復 BUG，同理，這種方式可以運用到微信開發等。
附言
Charles，是一個抓包神器，不僅可以用於除錯，而且還可以模擬網路狀態（後面來了個新增 Loading 效果的需求，剛好這個功能可以模擬慢速網路），當然還有很多其它用處。
本作品採用《CC 協議》，轉載必須註明作者和本文連結
