通过案例学习如何在mac中抓取http请求信息

需求背景

在进行移动端开发时,往往需要查看手机中客户端或h5中发起的请求情况。在windows中我们常常使用的是fiddler,但是由于其是.net开发的,无法在mac上运行。当然,你可以在mac上安装虚拟机(如:virtualbox)之后安装fiddler间接在mac上使用fiddler,具体可以参考http://www.cnblogs.com/mcho/p/3983056.html,这些间接的办法比较多,在此就不一一列举。下面将为你介绍我在mac分析http请求的工具Charles

简介

Charles是一个类似于fiddler的网络抓包工具,它是用java进行开发的,支持windows、mac、linux。安装方便快捷,直接在其下载页面下载对应平台的安装包安装即可。所以,对于用户来说是极方便的。
Charles 是收费软件,可以免费试用 30 天。试用期过后,未付费的用户仍然可以继续使用,但是每次使用时间不能超过 30 分钟,并且启动时将会有 10 秒种的延时。因此,该付费方案对广大用户还是相当友好的,即使你长期不付费,也能使用完整的软件功能。只是当你需要长时间进行封包调试时,会因为 Charles 强制关闭而遇到影响。其也提供免费试用版,但是功能受到了限制。当然如果条件不允许,你也可以在网上找不需要收费的(你懂的)。更多介绍及功能可以参考官方文档或这篇博文

案例

下面通过描述排查一个线上问题过程中如何使用Charles的,排查过程中仅用到了部分功能,更多功能请访问简介中提供的链接。

问题背景

我们一个功能活动由于切换域名导致微信分享中分享出去的内容是当前页面的,正确的分享内容应该是我们自定义配置的。然而使用切换前的域名是可以正确分享的。


如果对微信开发不太熟悉可以参考微信开发文档,在排除问题的时候,我对微信开发相关的内容也是一知半解,说白了在这一块我也是个小白。


发生问题的可能原因

  • 可能性1:最开始怀疑的是切换域名之后,新的域名没法正确的获取jsapi_ticket(jsapi_ticket是公众号用于调用微信JS接口的临时票据),经过确认,新域名下和原域名下获取ticket的接口返回的ticket等信息都是正确的,所以排除。直接调用接口,未使用到Charles
  • 可能性2:微信jssdk是根据每个公众号、每个域名单独定制的?(怀疑),查看了前端引入的jssdk,并没有域名相关的内容,所以排除。
  • 可能性3:没有可能性3了,不知道原因了,当看了微信开发文档之后,看到jssdk可以开启调试模式。原文内容:调用config 接口的时候传入参数 debug: true 可以开启debug模式,页面会alert出错误信息。(参看附录5-常见错误及解决方法小节)

使用Charles来解决问题

来到这一步之前跳过n步关于查找如何在mac上抓取http请求信息。

安装Charles

安装后打开效果如下:

开启Recording功能

点击start recording按钮,开启代理,Charles默认的端口为8888.

设置手机

点开手机对应的网络(注意此处的网络,需要是mac和手机在同一个局域网),选择为手动代理,将mac的ip地址和Charles的默认端口8888加入到网络设置中的手动代理设置中,点击确认,重新连接网络即可。

修改微信config接口的调试模式

wx.config({
           debug: !0, //此处设置为true即可开启调试模式
           appId: a.appId,
           timestamp: a.timestamp,
           nonceStr: a.noncestr,
           signature: a.signiture,
           jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareQZone"]
           })

使用Charles的map local功能

charles的map local功能可以将指定的请求用本地文件作为响应,这样就可以让我们的页面使用我们修改之后的js文件,即开启了微信config接口的调试模式。作为后端开发,当时想到的办法就这个,如果你有更好的办法请分享于我

微信打开活动

将我们的活动url转换成二维码,然后打开微信扫一扫,然后微信jssdk就将我们的问题直接通过alert展现在我们的面前,问题找到。

微信文档说明如下:

invalid url domain当前页面所在域名与使用的appid没有绑定,请确认正确填写绑定的域名,如果使用了端口号,则配置的绑定域名也要加上端口号(一个appid可以绑定三个有效域名,见 目录1.1.1)。

补充说明

由于微信中对于静态资源缓存比较严重,你可以通过使用maplocal功能将引入资源的页面请求用修改后的html文件引入。可以在meta中加入缓存控制,下面是我加入的部分代码(详见map local 图片2):

 3 <head>                                                                           
 4   <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>  
 5   <meta http-equiv="Pragma" content="no-cache" />                                
 6   <meta http-equiv="Expires" content="0" />                                      
     .
     .
     .                                                                                                          
16 </head> 
     .
     .
     .
50 <script src="//h5g.*****.com/assets/app/javascripts/*****-68d7458bcbbcabd9.js?v=2"></script>  //隐藏了业务相关部分,通过v=?来引入最新修改js
51 </body>                                                                          
52 </html> 

标签:

专题:

发表于2017-03-12 14:13:08,最后修改于2019-08-02 18:42:12。

本站文章欢迎链接分享,禁止全文转载。


« 上一篇 Working_With_Process读书笔记 下一篇 » 记一次线上回滚代码的经历

推荐阅读

Big Image