移动端调试

标签：style   blog   http   color   使用   os   strong   文件   

      最近两年无线端的html页面很火，博主最近也做了几个手机项目。相信做过的人都会碰到调试这个棘手的问题。一是没有相应的设备，所以很多人使用虚拟机调试，二是没有较好的调试工具，没法实时得到调试信息。现在将我的一些调试经验总结一下：

本文介绍了无线端调试的四种方式，分别是：

• charles设置代理 
• fiddler设置代理
• MTL 工具使用
• weinre （查看dom元素，查看console.log输出的数据）

（如果大家还有其它的调试方法，欢迎补充）

一、charles设置代理

 charles 一个比fiddler更强大的http调试工具。如果想对charles有更一步的了解，可以猛戳这里.  下面我们用 Mac+ipone/ipad进行演示

1.设置入口

2.设置，端口设置为 7999，这里可以随意

3.手机设置

4.点开右侧箭头，进入代理设置，主机名为你电脑的IP，mac下通过 ifconfig 命令查看，IP为 charles 设置的监听地址

5.手机尝试连接时，charles 会提示

6. 也可以直接设置允许连接

7.配置好了之后记得启动监听程序（command+r）

8.打开手机浏览器，进入百度，可以看到

二、fiddler设置代理

1.设置入口

2.设置端口，并允许远程连接

3.cmd下查看自己的ip，填入手机代理设置（同charles手机代理设置），并将上面设置的监听端口填入 8088

4.打开你的手机浏览器，进入百度，你会在 fiddler 中看到

然后就尽情调试你的程序吧~

三、MTL工具使用

MTL是我们公司内部的一个无线测试平台。原理就是将无线端的请求代理到这个平台，可以看到接口的返回数据，也可以自己mock一些ajax数据进行响应。呵呵，由于一些大家都知道的原因，具体的就不讲了。相信你们公司也一些自己的测试平台

四、weinre

上面讲的三种方式都是查看接口的，下面就简单介绍一下Weinre。Weinre的本意是Web Inspector Remote，它是一种远程调试工具。功能与Firebug、Webkit inspector类似，可以帮助我们即时更改页面元素、样式，调试JS，查看console输出信息等

1.安装

npm install –g weinre

2.打开

weinre -httpPort 7999 -boundHost -all-

• httpPort 监听端口
• boundHost –all- 绑定主机

3.说明都写在图片里头，相信聪明的你可以悟到

4.真机调试

移动设备须有有wifi无线连接，且和电脑在同一网段。把要调试的页面放在服务器中相应的文件夹中。在手机的页面中打开要测试的页面地址，如：http://192.168.0.102/index.html 。回到http://localhost:8081页面，点击“debug client user interface:”链接进入weinre的Debug界面，如果成功添加了Debug Target，这里可以看到它。

　　2、接下来我们就可用自己熟悉的方式调试页面了，并且调试结果会实时显示在移动设备上

MAC系统更为简单，不用命令行，直接运行app即可启动weinre，接下来的步骤和windows一样。

 欢迎大家提供其它更多的调试方案，有问题可以联系我哦！ sx.shao@qq.com

(最后特别感谢阎王同学的支持！)

移动端调试,布布扣,bubuko.com

移动端调试

标签：style   blog   http   color   使用   os   strong   文件   

原文地址：http://www.cnblogs.com/summer_shao/p/3919397.html