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

• 作者：KK

• 发表日期：2016.2.26

要点速读 ¶

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

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

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

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

开发调试 ¶

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

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

在线调试 ¶

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

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