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

原创 2012年05月21日 22:10:00
      俗话说‘工欲善其事必先利其器’,那么在写这个移动端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输出的信息显示在浏览器地址栏的上方。
以上就是我们团队使用比较多的调试工具,相信大家也有很多自己喜欢的调试工具,大家可以补充。


移动端Web开发调试之Weinre调试教程

在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统下页面如何如何,某某系统浏览器下页面怎么怎么滴。看着满满的测试汇总文档,我们曾经在...
  • freshlover
  • freshlover
  • 2015年01月12日 11:53
  • 39113

android webApp 调试问题解决

前不久做了个webapp,在pc上chrome调试都是可以的。但是手机上显示却有点问题,所以一直是想在手机浏览器上调试,但是一直没有相关支持,后来google终于出了chrome beta版,还把手机...
  • Sencha_Android
  • Sencha_Android
  • 2012年06月29日 11:17
  • 3114

safari调试iPhone app web页面

safari调试iPhone app web页面date: 2016-09-09 09:36:29Overview当下移动端开发过程中大量使用前段H5、js等等技术,而这些web页面的调试在Xcode...
  • guoyuyanmen
  • guoyuyanmen
  • 2016年09月09日 11:18
  • 20731

用Web App Debugger简单调试ISAPI

以isapi为例:       1、新建一个project,用isapi/nsapi;       2、remove这个project中所有的unit;    ...
  • zhongguoren666
  • zhongguoren666
  • 2011年11月11日 10:45
  • 1539

移动端Web开发调试之Chrome远程调试(Remote Debugging)

近几年,浏览器厂商也纷纷推出自己的远程调试(RemoteDebugging)工具,比如Opera Mobile 可以借助其推出的跨设备跨平台桌面开发者工具Opera Dragonfly 实现远程调试,...
  • freshlover
  • freshlover
  • 2015年01月08日 20:22
  • 178126

Chrome手机调试(WebView或如Hbuilder开发的Web App)

概述 调试是软件开发过程中很重要的环节,它能帮助开发者快速的定位和解决开发过程中碰到的问题。对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速...
  • wenbitianxiafeng
  • wenbitianxiafeng
  • 2015年04月27日 17:17
  • 5322

webapp开发调试环境--weinre配置

用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发,与真机上的效果还是有些偏差,opera手机模拟器的效果亦不佳。有时在pc上开发出来的webapp效果良好,在部分真机上就出现了偏差,这时候就...
  • Smy_yu
  • Smy_yu
  • 2014年08月29日 12:02
  • 2997

webapp调试技巧,页面自刷新,远程调试

在调试过程中,最浪费时间的就是调试了,修改了在部署上再反映在手机浏览器中。 因此才有了 如此的想法 第一:我要做到文件修改后页面自动刷新 第二:能够在远程浏览DOM文件结构,能够像f...
  • xpjcoo
  • xpjcoo
  • 2015年08月26日 10:16
  • 1054

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

俗话说‘工欲善其事必先利其器’,那么在写这个移动端web app开发的系列文章之前,为了让大家少走一些弯路,先来给大家介绍一下我们常用在开发过程中所使用的调试工具。      相信大家进行过...
  • lishengzhang
  • lishengzhang
  • 2012年05月19日 23:45
  • 208

移动web app开发-----调试篇(转载)

移动web app开发-----调试篇    俗话说‘工欲善其事必先利其器’,那么在写这个移动端web app开发的系列文章之前,为了让大家少走一些弯路,先来给大家介绍一...
  • terencetian
  • terencetian
  • 2012年10月19日 10:30
  • 505
收藏助手
不良信息举报
您举报文章:移动web app开发-----调试篇
举报原因:
原因补充:

(最多只允许输入30个字)