移动端HTML5应用程序调试

 

移动端HTML5应用程序调试

在做HTML5 web应用程序的时候，特别是需要和网络打交道，调试程序可能会占很大部分的时间,以下介绍几种调试方法。

 

1.使用fiddler辅助调试。

fiddler(http://www.fiddler2.com/fiddler2/)主要是用来跟踪PC端的http请求，可能很多人已经用过了。同样，它在调试移动web应用程序的时候，也是大有作为的，主要应用在以下几个方面。

a) 跟踪移动设备的http请求

fiddler本身就是一个代理服务器，所以移动设备在设置了代理之后，在pc上通过fiddler是可以看到移动端的http请求的（当然要求移动设备和pc在同一个局域网内）。要实现这个，需要开启fiddler的接受远程连接的选项。其中端口需要在移动端用到，如下图。

 

 

其中ios设备和android设备设置代理服务器的方式不一样。

ios设备的设置比较简单，只需要进入相关的无线网络名称,再手动设置代理即可，如下图

 

android设置目前没有比较方便的设置方法，不过通过一个软件(TransProxy)可以方便的设置，前提是手机必须有root权限。

装完TransProxy软件后，设置好IP和端口，再选中enable proxy即可。

 

移动端代理设置好之后，使用浏览器打开网页，在PC端使用fiddler就可以跟踪到http请求了。

附TransProxy下载地址。

 

b) 更改来自服务器的响应内容

有的时候，我们在更改web程序的源码(JavaScript,css)的时候，有可能必须要放到远程服务器上。但是每次修改都必须得上传的话，影响开发效率。这个时候，就可以用fiddler的AutoResponder功能，即更改来自服务器的响应内容。这里的更改同样适用于上面提到的移动端的访问。设置如下图所示：

 

 

相关选项解释如下：

Enable automatic responses: 是否允许AutoResponder。这一项必须选中，不选的话代表不使用AutoResponder。

Unmatched requests passthrough: 这一项也必须选中，因为我们只需要fiddler托管列表中的URL。

Enable Latency：是否允许延迟，可以模拟延迟加载。选中之后，在相关的URL上点击右键，即可设置延迟的时间，单位是毫秒。

在移动HTML5开发的时候，模拟低网速，还是有一点意义的。

设置方式见下图：

2. 用Chrome/Safari调试。

有经验的web开发者应该都用过Chrome/Safari来调试HTML页面，由于这两个浏览器对HTML5的支持非常好，所以用来调试移动端HTML5程序一样很好用。

为了得到最真实的体验，我们可能需要改浏览器的UA(User Agent)。

更改Safari的User Agent

a,先在菜单栏中显示开发菜单。

 

b,更改User Agent。

 

更改chrome的User Agent

chrome浏览器下面，按F12，点击右下角的setting图标，在overrides选项卡中，可以找到修改ua的选项。