下面我們介紹兩個抓包工具。
一、F12
F12（開發者工具）是Chrome瀏覽器自帶的一個抓包工具，比較方便也比較靈活，我們在工作中會經常用到。
比如訪問某些網站有異常的時候，我們可以通過F12抓取報文分析具體問題。
F12主要針對的是HTTP協議和HTTPS協議，它可以去確認我們的網絡數據包的一個狀態。
通過分析請求報文和響應報文里面的內容，從而分析出請求數據和響應數據是否正確，也可以分析出來問題是前端問題還是后端問題。
二、Fiddler
Fiddler需要自行下載安裝。
它可以查看到本機發出的所有請求。有時由於瀏覽器屏蔽的原因，我們無法使用F12看到返回值，這時我們可以用Fiddler進行抓包，或者換成火狐瀏覽器查看。
Fiddler使用示例如下，左邊是顯示請求，右邊是抓包后的數據分析。其中Inspectors較常用：
抓包后的分析方法：
抓包工具在沒有設置過濾器的情況下，沒有抓到請求信息，可能是前端頁面元素沒有綁定事件，也可能是前端js發生了錯誤。這就是前端的bug。
若抓取到的請求返回的結果錯誤，我們要確認一下，是否前端傳輸的數據是錯誤的，是的話那就是前端的bug。如果確定傳值是正確的話，那就是后端的bug。
若抓取到的請求返回值的http狀態碼是500的話，說明是后端服務器的一般內部錯誤，那就是后端的bug。
若果抓取到的請求返回值http的狀態碼是404的話，說明可能后端服務器根本沒有對應的服務（后端忘記部署了），當然也可能是前端在提交請求的時候，提交了錯誤的地址（請求地址寫錯了）。