移动端页面的调试技巧

2,687 阅读1分钟

Q: 如果在移动端(APP)中发现一个页面有问题, 我们该如何定位问题呢?
A: Fiddler(抓包) + weinre(调试 CSS 样式) + vConsole(调试 JS 逻辑)

调试要点

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

    • 使用 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/RosinTencent/vConsole 来更方便地查看日志信息

其他真机远程调试方法