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