zoukankan      html  css  js  c++  java
  • 关于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,有错请大家指出

  • 相关阅读:
    django 项目需要注意的一些点
    VUE之路
    Oracle 表格碎片的查看方法
    RHEL 6.x or 7.x 使用分区绑定ASM 磁盘的方法
    RMAN 修复主库 nologging 操作导致物理备库的坏块
    Oracle 数据库19c 回退降级到 11.2.0.4 方案
    如何评估oracle 数据库rman全备和增量备份大小
    在将Oracle GI和DB升级到19c或降级到以前的版本之前需要应用的补丁 (Doc ID 2668071.1)
    Oracle 数据库坏块处理
    opatch auto 安装11.2.0.4.20190115 PSU遇到 OUI-67133: Execution of PRE script failed,with returen value 1 报错
  • 原文地址:https://www.cnblogs.com/cdwp8/p/4355819.html
Copyright © 2011-2022 走看看