前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >优雅地调试线上代码

优雅地调试线上代码

作者头像
cnguu
发布2020-10-12 13:33:40
5610
发布2020-10-12 13:33:40
举报
文章被收录于专栏:凉风有信凉风有信

# 问题

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

# 需求分析

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

# 初步结论

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

# 验证结论

# 调试环境

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

# 配置 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 效果的需求,刚好这个功能可以模拟慢速网络),当然还有很多其它用处。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/4/17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • # 问题
  • # 需求分析
  • # 初步结论
  • # 验证结论
    • # 调试环境
      • # 配置 Charles
        • # 配置测试机
          • # 使用 Charles
          • # 得到结论
          • # 总结
          • # 附言
          相关产品与服务
          SSL 证书
          腾讯云 SSL 证书(SSL Certificates)为您提供 SSL 证书的申请、管理、部署等服务,为您提供一站式 HTTPS 解决方案。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档