移动端页面的调试技巧

[ufologist]

Q: 如果在移动端(APP)中发现一个页面有问题, 我们该如何定位问题呢? A: Fiddler(抓包) + weinre(调试 CSS 样式) + vConsole(调试 JS 逻辑) A: Mobile Debug 一站式解决你的所有移动端远程调试烦恼(代理抓包/请求劫持/网页调试)

调试要点

• 替换线上文件为本地文件

  • 使用 Fiddler 抓取 APP 中的 HTTP(S) 请求, 开启 AutoResponder 将线上文件替换为本地文件来调试
  • 在手机上设置 WIFI 网络使用 Fiddler 的代理
  • 注意如果是抓取 HTTPS 的请求, 需要开启 Fiddler 解密 HTTPS 的功能, 并在手机上安装 Fiddler 的证书 http://IP:8888 Fiddler Echo Service 会有 FiddlerRoot certificate 下载

• 如果是页面样式的问题, 推荐使用 weinre 来调试

  • 开启 weinre Server
  • 在需要调试的页面中插入 Target Script
  • 打开 debug client user interface

• 如果是页面功能的问题, 通常是 JS 报错了

  • 可以在页面中添加一个全局错误处理来辅助定位问题

  <script>
  // 新建一个 <script> 放置在页面最上面
  window.onerror = function(messageOrEvent, source, lineno, colno, error) {
      alert(JSON.stringify(arguments, null, 4));
  };
  </script>

• 如果加载的 JS 是跨域的, 那么错误信息只有 Script error, 此时该如何获取到有用的错误信息呢?

  • 如果放置 JS 的服务器支持 CORS, 需要设置 <script> 标签 crossorigin="anonymous"
  • 如果不支持 CORS, 可以通过 Fiddler 拦截页面, 修改 JS 到同域名下, 再拦截该请求将 JS 资源映射到本地文件
  • 推荐使用 AlloyTeam/Rosin 和 Tencent/vConsole 来更方便地查看日志信息

其他真机远程调试方法

• jieyou/remote_inspect_web_on_real_device

[px0078]

👍

[aafnnp]

TBS_Studio,谢谢

[xiaobinwu]

good