移动web app开发-----调试篇

      俗话说‘工欲善其事必先利其器’，那么在写这个移动端web app开发的系列文章之前，为了让大家少走一些弯路，先来给大家介绍一下我们常用 在开发过程中所使用的调试工具。

     相信大家进行过web开发开发的人对于一些常用的调试工具都比较熟悉了。在firefox上，firebug了算是最流行的，还有它的很多插件，像yslow等；在chrome我们可以从‘菜单----->工具------>开发人员工具’中打开，我们一般情况下用的都是一些最基本的功能，像检查javascript的内存消耗，cpu占用这些功能有时也很有用，有关这个工具的详细介绍都在 这里；在mac的safari上我们可以从‘safari---->偏好设置------->高级’的最下面选中‘在菜单栏中显示开发菜单’，里面有各种各样的我们想用的调试工具，像用户代理，javascript调试器，和dom检查器,详细介绍参考这篇 文章；在ie的高级版本中我们可以从‘工具----->开发人员工具’就会出现各种各样的调试工具了；这些工具我们在进行移动开发时也会常常用到，但是有时候我们没法在pc上发现出现的错误，这时候就只能通过远程调试或者在移动工具本地端直接开启提示工具，下面重点说下这两种方式的调试方法。

     远程调试：这种调试方式就是把在移动设备上打印的调试信息显示在pc端，这样在pc端观察调试的信息就会非常方便，

这种调试方式跟设备无关，所有设备上的使用方式都是一样的。这样的方式有以下几种可选：

• jsconsole:这个调试工具是我最喜欢的，它配置非常简单，就是能够打印一些log信息，只需要在你的页面上包含该工具为你生成的一个js文件，就可以使用了；然后在在桌面的浏览器上监听你的调试文件所对应的key,具体使用方法可以参考这里。

• mobile perf 和 jdrop :这两个工具是配合使用的，mobile perf是一个工具集，是作为书签来使用的，里面包括firebug lite,webtiming,page resouce等等，这些工具可以像桌面的工具一样调试网页，然后把打印的这些工具存在jdrop上。mobile perf这个工具集中那些工具原来都是为桌面调试使用的，并没有对移动设备进行优化，所以性能很低，半天打不开。jdrop这个工具需要google或者twitter的账号登陆，这两个网站的账号在中国必须翻墙，相信这个对大家来说不是问题。

• shadow：这个工具是 adobe收购phone gap 后，基于phone gap公司的 weinre的基础上开发的，使得配置更加简单。直接使用weire也可以调试，只不过配置比较复杂。  
• logcat:这个工具是android的调试工具，它基于eclipse。具体安装过程，可以参考这篇文章
• charles:这个工具类似fiddler,或者httpwatch,这个http请求抓包或者资源的加载测量工具,能够通过设置代理，测量资源在移动设备上的加载性能。

     本地调试：这种调试直接在移动设备上调试，跟设备有关，优点是不需要配置，直接开启，缺点是空间小，不易观察。

• iOS:直接在‘设置-----》safari------->开发者------>开启调试控制台’，这样在javascript文件中用console.log打印的调试信息就会在地址栏的下方出现调试信息
• android:首先在地址栏中输入：about:debug,这样就会在设置的菜单栏出现调试的菜单;然后选择‘菜单---->设置----->选中show javascript console’,这样就会把使用console.log输出的信息显示在浏览器地址栏的上方。

以上就是我们团队使用比较多的调试工具，相信大家也有很多自己喜欢的调试工具，大家可以补充。