关于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,有错请大家指出
关于app上页面和js的调试的更多相关文章
- 在Visual Studio上开发Node.js程序(2)——远程调试及发布到Azure
[题外话] 上次介绍了VS上开发Node.js的插件Node.js Tools for Visual Studio(NTVS),其提供了非常方便的开发和调试功能,当然很多情况下由于平台限制等原因需要在 ...
- 在mac上如何用safari浏览器调试ios手机的移动端页面
第一步 打开iphone手机的开发者模式,流程是:[设置]->[Safari]->[高级]->开启[Web检查器] 第二步 打开Mac上Safari的开发者模式,流程是[Safari ...
- 调试经验分享-让自己的电脑充当WI-Fi模块,用来抓取连接Wi-Fi模块APP上的通信数据
需求 手头有了厂家的APP和Wi-Fi模块 在已经知道APP是通过TCP连接Wi-Fi模块(8266), 同时也知道了连接的端口号的 情况下如何知道厂家的APP发送给Wi-Fi模块的数据 打开自己的笔 ...
- JS事件调试
JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置 日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. ...
- Dynamics CRM JS的调试的弊端解决办法
说道CRMJS的调试的博客,之前已经有人写过.很简单,和平常网站JS的调试过程大致相同. 但是Dynamics 中JS调试最麻烦的莫过于出错之后需要修改代码了.因为随着JS代码的修改,伴随着需要保存和 ...
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
- PHP实现openSug.js参数调试
这是一款利PHP对百度搜索下拉框提示免费代码实现参数配置调试的程序源代码. 由想要对网站进行搜索下拉调试的站长朋友们进行方便.快速的效果演示,具体参考下面的PHP代码. 如何使用? 请新建一份PHP文 ...
- App配置页面头部
记录一下 App配置页面头部 例 上图红色框部分就是自己配置的头部 //我的客户 "/OACustomer/Index": { title: "我的客户", h ...
- iOS提交应用至App Store流程及真机调试 一,证书、配置文件
前言:你要有苹果开发人员账号,我用的是个人账号.其次xcode为xcode 7,因为xcode 7须要 os x 系统 10.11 或更高的版本号, 所以os x 系统也须要 10.11 或更高的版本 ...
随机推荐
- UI:UIScrollView、UIPageControl
一.UIScrollView的常⽤用属性 二.UIScrollView的常⽤用代理方法 三.UIPageControl的使⽤用 四.UIPageControl与UIScrollView的结合使⽤用 U ...
- JavaScript 不重复的随机数
在 JavaScript 中,一般产生的随机数会重复,但是有时我们需要不重复的随机数,如何实现?本文给于解决方法,需要的朋友可以参考下 在 JavaScript 中,一般产生的随机数会重复,但 ...
- Mac OS X取消Apache(httpd)开机启动
安装MAMP后,启动服务时提示Apache启动失败,80端口被占用.查看进程发现存在几个httpd. OS X自带Apache,可是默认是没有启动的.我也没有开启Web共享,怎么就开机启动了呢? 不知 ...
- props 和 state的区别
作者:孙志勇 微博 日期:2016年11月29日 一.时效性 所有信息都具有时效性.文章的价值,往往跟时间有很大关联.特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时 ...
- Sublime Text3 激活教程
Sublime Text3激活 在使用Sublime时会定期弹出购买提示框,避免出现购买提示,影响工作效率,我们可以使用网上的激活码,虽然有些不厚道,但是工作以后,一定选择购买正版支持一下. 打开Su ...
- ProcessBuilder和Runtime远程执行
http://desert3.iteye.com/blog/1596020 ProcessBuilder.start() 和 Runtime.exec() 方法都被用来创建一个操作系统进程(执行命令行 ...
- Java浮点值拒绝服务漏洞危害分析
By 空虚浪子心 http://www.inbreak.net/ JAVA出了漏洞,CVE-2010-4476,会导致拒绝服务攻击.大家能从公告上,看到这样一段代码,挺长的.意思是只有开发人员写出这样 ...
- 怎样解决VirtrualBox不能新建64bit的系统的问题
假设你的VirtrualBox不能新建64bit的虚拟机一般有以下两个原因: 1.电脑是32位的,不支持创建64bit的虚拟机 2.电脑不支持Intel VT-x,或者是Intel VT-x没有打开 ...
- C#中Thread类中Join方法的理解(转载)
指在一线程里面调用另一线程join方法时,表示将本线程阻塞直至另一线程终止时再执行 比如 using System; namespace TestThreadJoin { class Pro ...
- ExtJS grid tableGrid study
Q: How to color the text in the grid Try: http://dev.sencha.com/playpen/docs/output/Ext.grid.TableG ...