抓包就是將網絡傳輸發送與接收的數據包進行截獲、重發、編輯、轉存等操作，經常用來檢查網絡安全,數據截取等場景中.

我們在做手機應用開發和測試的時候，經常需要來監測、調試以及修改這個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所示:

圖1

成功登錄之后將顯示所示

圖2

頂部菜單欄是刷新、后退、選中地址欄等動作的統一入口，以及微信客戶端版本的模擬設置頁。左側是微信的界面模擬器，可以直接操作網頁，模擬用戶真實行為。右側上方是地址欄，用于輸入待調試的頁面鏈接，以及清除緩存按鈕。右側下方是相關的請求和返回結果，以及調試界面和登錄按鈕。

此處我主要來介紹如何使用工具提供的移動調試功能來對公眾號應用進行抓包,下述操作均以夜點娛樂公眾號應用為例,諸位可以先在微信中關注此公眾號.讓我們切換到右側地址欄下的移動調試頁簽,在此處諸位可以根據自己的手機設備來選擇你使用的設備類型,并在調試方式處選擇普通調試,如圖3,圖4所示

圖3

圖4

按照調試步驟操作完成之后,點擊開始測試按鈕,我們將開啟一個新的窗體,如圖5所示

圖5

接著我們在微信中進入夜點娛樂公眾號,點擊左下角的立即預定菜單,接著我們回到剛才打開的圖5窗體界面,并切換到Network 頁簽,此時我們將能看到一個列表頁面,如圖6所示

圖6

此列表中顯示的是該頁面所加載的所有的請求數據,包括 js,css,圖片,接口調用,第三方服務接口調用,最先請求的居于列表的最底層,,點擊其中的任意一行,就能看到調用的請求地址,請求參數和響應結果,如圖7,圖8所示

圖7

8.jpg

我們需要知道被測應用的服務域名當我們已知夜點娛樂的服務域名,此處為 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"}

今天的介紹就到這里了,如果諸位使用過程中有疑問,也可以找我,我們共同來學習.

謝謝諸位!