xueqianban 移动端页面的调试技巧

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 来更方便地查看日志信息