Web开发调试方案分享 - 移动端调试

  • 作者:KK

  • 发表日期:2016.2.26


要点速读

一是使用 UC 浏览器开发者版本,官方有手机端调试文档;

二是修改手机系统的 hosts 让主机指向你的开发电脑或公司的测试机进行访问测试,在电脑端上改代码,手机刷新。

三是使用 Finddler 或其它类似软件,开启捕捉连接后,让移动端设置电脑的 IP 和 8888 端口(具体要看 Finddler 设置),让所有设备的请求都经过Finddler的眼皮底下,则可以让Finddler的自动响应器造一些自动响应数据做调试

UC浏览器的调试请大家先看官方文档,我这里暂时不写,其实我个人觉得实用性并不是非常大(特别是JS调试,或许因为我太水不会用~~),希望出现更多改进再说吧


开发调试

要确认代码在移动端上会呈现什么效果,我的办法就是修改安卓手机系统的hosts文件,将网址指向我的工作电脑IP,前提当然也是要连接了同一个内网才行,我推荐一个修改hosts的软件叫做Hosts修改工具,我在在应用宝上搜索下载的,你可以自己在别处找找或物色其它类似的工具

但是苹果设备试过越狱修改 hosts 都没用,看上去已经修改了,但实际上访问时却无法指向电脑,望经验人士可以指点一下


在线调试

和 PC 端一样,当线上发生问题,我们又不方便修改线上代码调试的时候(有的代码你根本无法改代码调试,比如我上面提到苹果设备无法让修改的 hosts 生效),这里就能教你本地修改本地调试。

先参考 其它经验分享 - Finddler - 代理设置 把代理设置一下,然后根据 前端在线调试 来设置自动响应,此时手机请求的数据都被 Finddler 自动响应了回去,所以手机收到的不是服务器响应回去的 HTML 代码(或js、css),而是 Finddler 伪造的 HTML,通过修改这个伪造的 HTML 文件我们就可以让手机端加载的“线上页面”发生各种变化了。