抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，经常用来检查网络安全,数据截取等场景中.
我们在做手机应用开发和测试的时候，经常需要来监测、调试以及修改这个App向后端服务器发起的的API请求.在这种场景下,由于App并不能像PC的浏览器Chrome一样提供有开发者工具来捕获接口请求,所以我们需要一款抓包工具来做这样的事情.
而微信公众号应用的开发和测试也可以应用此方法来操作.
抓包工具有很多,比如 Windows 系统中经常使用的 Fiddler,Mac 电脑系统中经常使用的Charles.
可能某些童鞋有过使用这两个工具的经验,今天我来给大家简单介绍一下微信web开发者工具.它是微信官方为帮助开发者开发和调试基于微信的网页，而推出的工具。它是一个桌面应用，通过模拟微信客户端的表现，使得开发者可以使用这个工具方便地在 Windows 或者 Mac 上进行开发和调试.
安装
Windows 64位版本： https://mp.weixin.qq.com/debug/cgi-bin/webdebugger/download?from=mpwiki&os=x64
Windows 32位版本： https://mp.weixin.qq.com/debug/cgi-bin/webdebugger/download?from=mpwiki&os=x86
Mac版本：
https://mp.weixin.qq.com/debug/cgi-bin/webdebugger/download?from=mpwiki&os=darwin
支持 win7 及以上版本，支持OS X 10.8 及以上版本
大家可以根据自己的电脑系统下载不同的安装文件来安装此程序,装完之后打开此应用,第一次打开时需要使用微信扫码登录,如图1所示:
成功登录之后将显示所示
顶部菜单栏是刷新、后退、选中地址栏等动作的统一入口，以及微信客户端版本的模拟设置页。左侧是微信的界面模拟器，可以直接操作网页，模拟用户真实行为。右侧上方是地址栏，用于输入待调试的页面链接，以及清除缓存按钮。右侧下方是相关的请求和返回结果，以及调试界面和登录按钮。
此处我主要来介绍如何使用工具提供的移动调试功能来对公众号应用进行抓包,下述操作均以夜点娱乐公众号应用为例,诸位可以先在微信中关注此公众号.让我们切换到右侧地址栏下的移动调试页签,在此处诸位可以根据自己的手机设备来选择你使用的设备类型,并在调试方式处选择普通调试,如图3,图4所示
按照调试步骤操作完成之后,点击开始测试按钮,我们将开启一个新的窗体,如图5所示
接着我们在微信中进入夜点娱乐公众号,点击左下角的立即预定菜单,接着我们回到刚才打开的图5窗体界面,并切换到Network 页签,此时我们将能看到一个列表页面,如图6所示
此列表中显示的是该页面所加载的所有的请求数据,包括 js,css,图片,接口调用,第三方服务接口调用,最先请求的居于列表的最底层,,点击其中的任意一行,就能看到调用的请求地址,请求参数和响应结果,如图7,图8所示
我们需要知道被测应用的服务域名当我们已知夜点娱乐的服务域名,此处为 letsktv.chinacloudapp.cn,那我们重点关注 host 是letsktv.chinacloudapp.cn的请求即可,也可以进一步过滤掉静态资源,诸如 js,css,图片文件的请求,专注于真实接口调用分析,如果找到我们需要的接口,简单的将其复制到文本编辑器即可,通常接口调用返回的格式是编码后的json字符串,可以使用 JSON在线格式化 来进行格式化查看.
此处给出调用/user/oauthlogin接口的例子
request
POST //user/oauthlogin HTTP/1.1
Host : letsktv.chinacloudapp.cn
content-length : 233
origin : http://letsktv.chinacloudapp.cn
user-agent : Mozilla/5.0 (Linux; Android 5.1.1; OPPO A53m Build/LMY47V) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.2 TBS/036555 Safari/537.36 MicroMessenger/6.3.22.821 NetType/WIFI Language/zh_CN
content-type : application/json;charset=UTF-8
accept : application/json, text/plain, */*
x-ktv-application-name : eec607d1f47c18c9160634fd0954da1a
x-requested-with : XMLHttpRequest
x-ktv-application-platform : 1
x-ktv-vendor-name : 1d55af1659424cf94d869e2580a11bf8
referer : http://letsktv.chinacloudapp.cn/dist/?
accept-encoding : gzip,deflate
accept-language : zh-CN,zh;q=0.8,en;q=0.6,zh-TW;q=0.4
cookie : PHPSESSID=t7gpbek7ks7vcnekre659iqo11; Hm_lvt_a9e84022ad4ba5c4e42b26942cda6755=1471361379,1471363668,1471400714,1471410707; Hm_lpvt_a9e84022ad4ba5c4e42b26942cda6755=1471410709
connection : keep-alive
request body
{"type":"wechat","openid":"okwyOwsZZhu7_3zIQNtfB9r3CKhE","display_name":"\u7275\u732a\u7684\u4ed3\u9f20","avatar_url":"http://wx.qlogo.cn/mmopen/JQpUg1oh5aelkvzXvcicURj0n4WzKJqBPr4RPjG6L9wyrKhGGKV1iaB4NJLod8Jn5y8ZCTCqIPED6l3av2iaEX3C88s1TaRLsA6/0"}
response header
HTTP/1.1 200
date : Wed, 17 Aug 2016 05:13:45 GMT
server : Apache
x-powered-by : PHP/5.5.9-1ubuntu4.11
expires : Thu, 19 Nov 1981 08:52:00 GMT
cache-control : no-store, no-cache, must-revalidate, post-check=0, pre-check=0
pragma : no-cache
set-cookie : PHPSESSID=t7gpbek7ks7vcnekre659iqo11; path=/PHPSESSID=6sla73q0tc68hgm962dkmskvr0; path=/
p3p : CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"
access-control-allow-origin : *
access-control-allow-headers : Accept, Content-Type, X-KTV-Application-Name, X-KTV-Vendor-Name, X-KTV-Application-Platform, X-KTV-User-Token
content-length : 170
keep-alive : timeout=5, max=300
connection : Keep-Alive
content-type : application/json; charset=utf-8
response body
{"result":0,"msg":"\u7528\u6237okwyOwsZZhu7_3zIQNtfB9r3CKhE\u767b\u5f55\u6210\u529f","token":"6sla73q0tc68hgm962dkmskvr0","display_name":"\u7275\u732a\u7684\u4ed3\u9f20"}
今天的介绍就到这里了,如果诸位使用过程中有疑问,也可以找我,我们共同来学习.
谢谢诸位!
