关于app上页面和js的调试

不久前折腾了一晚上关于app上的页面和js的调试:

首先得准备几个比较比较常用的工具:

1、chrome(这个都没有你还干啥fe呀)

2、Fiddler(抓包神器,基本也是必备咯)

3、sublime(编辑器至少得有一个吧)

then?

打开Fiddler,配置设置啥的都不在这里说了,篇幅有点长,PS:(不过比较方便的一个东西就是Fiddler上可以配hosts,不用再hosts文件下去配hosts了)

技术分享技术分享

这里说一下app里面的调试和一般的M端web调试的不同,在M端调试时把页面和js代理到本地修改就ok了,但是app里面就不一样了,app里面的页面和js很倔强,走缓存走的很严重,所以在这里我们简单叙述一下app的页面和js调试;

then?

假如前面的工具和配置都OK了,能正常抓包

一、页面html调试

1、抓包:打开Fiddler,用手机访问需要调试的页面,这时Fiddler上面会抓到一个记录,如下图:

技术分享

then?

2、ctrl+u拷贝出抓到的地址放到chrome里面访问,这样就可以看到手机上面访问的页面了,then在chrome里面再ctrl+u就可以查看页面源码,把源码copy出来单独起一个页面,在Fiddler里面把线上访问的页面代理到本地,注意这里我们把单起的页面的title改一下方便我们观察是否代理本地成功了:

技术分享

3、我们在代理的时候需要注意到的是在app里面访问Fiddler抓到的地址的最后包括os和webaddress,如果是安卓的机器的话你需要手动吧os改成ios才能正确访问;

另外一个问题就是webaddress在每次访问的时候都会动态改变,所以我们在代理的时候不要把后面的webaddress=xxxxxx加上,否者,你懂得

技术分享

技术分享

4、像上面的这样代理成功后访问app上面的页面,......页面咋没变? 当然没变咯我们在做一下处理,改一下页面显示(在代理到本地的html页面上的显示部分加点东西),像这样:

技术分享

好了页面代理差不多就是这样,你可以在本地任意修改你的页面了,app上也会有和chrome同步的变化

技术分享

then?

二、app上js的调试:

1、首先你的指导你要调试那个js,也就是那个js出问题了,这个定位问题的速度需要经验,不如说对全站业务逻辑比较熟悉的话,一看就知道是啥出了问题,是哪个js出了问题

一般来说我们是通过bug的view表现页面元素去找对应的id或者class,或者知道一些实现的方法名/参数名,然后通过在chrome里面搜索对应的js

技术分享

2、ok,找到相应的js后又把它代理到本地,这里需要注意的是我们一般去svn找到最新的代码down下来放到本地,然后把线上的js代理到本地,

技术分享

new.js是从svn上down下来的mclient.publish2.js,

3、代理好了之后,在new.js里面加点可以证明代理好了的代码,alert()最好,为啥?因为app上不认console,试着在chrome上看看(当然这里也需要注意到一点就是为了方便看到js是否真正代理到本地了,我们也需要像html一样做,在js第一行做一些标记,表明这个不是线上的js),被吓到了吧,啥反应都没得;为什么呢?

模板上加载的js明明是:

<script type="text/javascript" charset="utf-8" src="http://pic2.58.com/m58/app58/m_static/js/mclient.publish2.js?cachevers=575"></script>

技术分享

也把它代理到了本地:

技术分享

为什么就不行呢?这就是app上比较倔强的地方,由于app里面会缓存已经加载好了的js,app上面也不能像浏览器一样可以清除缓存和强制刷新,所以基本都是通过?加上版本号来更新js(这个不同公司更新方法不同,具体的请移步张云龙老师的blog静态资源的缓存更新),版本号一致的话,app将不会更新这个js(不会发出请求),所以代理的js不会生效,

解决办法就是让它更新,在模板里面把加载的js版本号改变一下:技术分享

ok,改好了,然后又试试!......还是不行,为什么,应该大家都懂,当时捣腾这个的时候进入了一个误区,代理的时候的地址带了版本号575的,然而模板里面请求的是带版本号576的js,很明显代理不成功嘛,

then

解决办法有两个:

a、把代理的时候的地址带了版本号575改成576,这个办法比较挫,因为每次修改完本地的new.js你需要看到修改后的效果你都需要做两件事情,1就是把模板里面加载的js版本号增加一下,2就是需要把代理的版本号也改成和模板加载的js版本号一致

b、代理的时候不带版本号:

技术分享

这样的话就不需要你每次修改本地js都去改代理的js版本号了,而只需要把模板上的版本号增加一下就ok了

技术分享

then?

end

文章没review,有错请大家指出

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。