优雅地调试线上代码

# 问题

接到一个紧急修复需求,发现一个 H5 游戏在 iOS9 下显示高度没有铺满屏幕,需要调整高度达到自适应。

# 需求分析

  1. 页面是一个 iframe,由 jssdk 控制
  2. iframe 高度 100%,但在 iOS9 下,底部遮盖高度 20px
  3. 顶部黑边 20px,由底层写死,js 无法控制
  4. 顶部黑边不能移除,目的需要兼容曲面屏

# 初步结论

在 iOS9 下,iframe 的高度 100% 并不是屏幕的高度

# 验证结论

# 调试环境

# 配置 Charles

  1. 打开 Charles,确保已开启 RecordSSL ProxyWindows Proxy
  2. 打开 SSL Proxy 设置:Proxy - SSL Proxying Settings,添加本地代理:*:443
  3. 记住代理端口:Proxy - Proxy Settings

# 配置测试机

  1. 卸载游戏重新安装
  2. 设置 WIFI 手动代理,IP 为电脑局域网 IP,端口为代理端口
  3. 安装 SSL 证书,测试机访问并安装:chls.pro/ssl

# 使用 Charles

  1. 测试机打开游戏,在 Charles 抓到对应的 js
  2. 右键 js,选择 Map LocalMap From 已自动填写,选择 Map To 为本地的 js
  3. 清除 Charles 本地 Session,测试机重新打开游戏,现在,js 已经被替换成本地了

# 得到结论

由于 consolealert 看不到信息,所以直接把信息写到 html 上

分析发现: screen.height 和 iframe 的 clientHeight 相等,也就是顶部黑边高度也算进去了,所以需要减去黑边

# 总结

最麻烦的调试莫过于,有限时间内,线上代码动不得,本地代码难测,于是就有了本文,通过“自己劫持自己”的方式,更优雅快速地调试并修复 BUG,同理,这种方式可以运用到微信开发等。

# 附言

Charles,是一个抓包神器,不仅可以用于调试,而且还可以模拟网络状态(后面来了个添加 Loading 效果的需求,刚好这个功能可以模拟慢速网络),当然还有很多其它用处。