Web開發除錯利器——Wireshark的使用

weixin_34107955發表於2017-09-01
Web除錯

在Web開發中，尤其是前後端分離架構的專案中，後端開發拿Postman測自己寫的介面，覺得資料是正常的就OK了，可Postman畢竟不是瀏覽器，有些在瀏覽器裡存在的問題會讓我們感到很詫異。究竟是哪裡出了問題，後端說不是我介面的問題，肯定是你傳送的請求有問題，而我們在瀏覽器的開發者工具中看到傳送的資料是對的，這時該如何去測試找出問題呢？

我們傳送的POST,GET等請求方式都屬於HTTP請求，雖然是HTTP請求，但還是基於TCP連線。而HTTP協議屬於OSI網路參考模型的應用層，TCP協議屬於傳輸層，也就是說資料最終還是要通過TCP協議來傳輸。所以客戶端和瀏覽器之間傳輸任何資料都要通過TCP埠。我們只要監聽本地的TCP埠就可以截獲客戶端和伺服器通訊的資料包，術語叫抓包。

2815894-66584058df2eeb07.jpg
750327-20160822230932011-1299422087.jpg

來看一個例子：我用Postman來請求一個介面的資料

2815894-be63ddbecd1bd64b.png
image.png

然後就可以在Wireshark中截獲這個請求

2815894-644ab29d9c67cfe9.png
image.png

然後跟蹤一下TCP Stream

2815894-60f03b28f0812ed1.png
image.png

我們可以看到客戶端和服務端互動的真實資料，並且能看出Postman和瀏覽器傳送的資料有什麼差異，快速分析出問題所在。
甚至還可以看到在一次請求中完整的連線過程，包括三次握手和四次揮手。

2815894-45546a680cb0b4e9.png
image.png

過濾表示式規則

這個是最常用的功能，就是精確匹配你想抓取的資料，用好這個，就可以滿足大部分需求了。

  1. 協議過濾

比如TCP，只顯示TCP協議。

  1. IP 過濾

比如 ip.src ==192.168.1.102 顯示源地址為192.168.1.102，

ip.dst==192.168.1.102, 目標地址為192.168.1.102

  1. 埠過濾

tcp.port ==80, 埠為80的

tcp.srcport == 80, 只顯示TCP協議的願埠為80的。

  1. Http模式過濾

http.request.method=="GET", 只顯示HTTP GET方法的。

  1. 邏輯運算子為 AND/ OR

常用的過濾表示式

相關文章