优雅地调试线上代码

问题

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

需求分析

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

初步结论

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

验证结论

调试环境

• Charles：Web 调试代理应用程序
• 测试机和电脑在同一局域网

配置 Charles

1. 打开 Charles，确保已开启 Record 、 SSL Proxy 和 Windows 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 Local，Map From 已自动填写，选择 Map To 为本地的 js
3. 清除 Charles 本地 Session，测试机重新打开游戏，现在，js 已经被替换成本地了

得到结论

由于 console 和 alert 看不到信息，所以直接把信息写到 html 上

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

总结

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

附言

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

本作品采用《CC 协议》，转载必须注明作者和本文链接