关于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,有错请大家指出