博客在前面幾篇隨筆中,介紹了在網絡環境中瀏覽器和服務器之間交互的相關內容,下面主要主要從7個方面介紹一款網絡抓包代理工具Fiddler,它能夠幫助前端開發者和數據分析人員解決不少問題。html
1、Fiddler設置(PC端)前端
Fiddler默認是隻能抓取http網絡格式的,因此咱們要先設置下使Fiddler能夠獲取到https網絡格式。首先按路徑Tools→Options→HTTPS 進入設置 java
而後,須要容許遠程鏈接打開:Tools-> Options->Connectionweb
默認監聽端口爲8888,下面幾項所有勾選。配置後,重啓便可完成。windows
2、手機的設置瀏覽器
須要保證使手機和電腦PC都處於同一個網絡下,而後查看電腦的IP地址,能夠CMD內經過命令ipconfig獲取IP地址(更多詳情可參看另外一篇隨筆:《網絡查看命令》 ),或者點擊小箭頭,鼠標移動到Online上查看IP地址。安全
得到本機IP和端口8888後,手機進入設置→wlan網絡設置→選擇無線,而後修改配置服務器
下載Fidder的安全證書:使用Android手機的瀏覽器打開以下格式的網址:網絡
http://PC的IP: Fidder使用的端口號(e.g. 8888);工具
並點擊以下圖中所示的「FidderRoot certificate」連接,以實現證書的安裝。
3、數據攔截
咱們能夠經過點擊這個位置或者按F11
右側選擇INSPECTORS→WebForms 對裏面的數據進行修改,而後點擊 Run to Completion 發送。
4、Fiddler使用方法:Fiddler顯示IP
顯示IP的做用:因爲web前端在多個環境中開發,須要常常更換host,而設置host以後會出現延遲的狀況,這時候就須要知道如今訪問的域名時指向的服務器的IP地址。具體操做以下:
快捷鍵Ctrl+R 或者 菜單->Rules->Customize Rules…
在CustomRules.js文件裏Ctrl+F查找字符串
static function Main()
添加一行代碼便可顯示IP
FiddlerObject.UI.lvSessions.AddBoundColumn("ServerIP", 120, "X-HostIP");
如圖:
修改完成後保存,重啓Fiddler完成操做。
5、Fiddler抓包中文亂碼問題
6、Fiddler模擬發送get/post請求(也可作簡單接口測試)
一、模擬get/post發送請求
(1)Fiddler設置post接口信息及參數,點擊Execute發送請求
(2)Fiddler設置get接口信息及參數,點擊Execute發送請求
二、發送請求後右側會對產生相應的一條請求記錄,選中查看右側請求返回結果
7、運用Fiddler的查找功能,獲取數據API(Json)
操做視頻:https://v.kuaishou.com/7ldwnQ
參考:
Fiddler官介:https://www.telerik.com/fiddler
其餘相似的抓包代理軟件 - Charles官介 : https://www.charlesproxy.com/
《各種 HTTP 返回狀態代碼詳解》:https://www.cnblogs.com/yxmings/p/14213407.html