前端必會的抓包工具

說到抓包這個問題，不少初級的前端都不太能意識到這個問題，雖然本人也就是個小菜，可是對於抓包工具能夠說是熟練掌握了，由於有過太多接口的問題被測試指派了我，那麼若是熟練掌握了抓包不只能快速定位出問題，還能分析網絡請求，以及一些前端邏輯的問題致使接口屢次觸發等現象。

因此一個合格的前端必定要會抓包，並且還要熟練掌握抓包工具，好比能夠經過抓包工具些慢速網絡，處理慢速網絡時的一些交互，更重要的一點是，還能夠用抓包工具配置頁面的訪問跳轉，作混合開發時的一些測試頁面。

抓包工具備哪些

比較熟悉的是Mac上用Charles,Windows上用Fiddler。關於這二者的安裝使用教程實在太多了，本文不作贅述，今天我給你們介紹一款集合了抓包和H5頁面調試的工具spy-debugger。

爲什麼開始使用spy-debugger

在開發過程當中，咱們的項目都是根據功能需求建一個開發的分支，等到了提測的時候，把分支合併到測試環境，測試經過再上線。基本這是一個統一的流程，可是作移動端混合開發的時，H5頁面咱們在本地開發的時候，在chrome中開啓了移動端模式，基本上到手機上也不會有太大的問題。

可是上測試環境後，產品有的時候會須要改一些文案樣式啊，每次遇到這種狀況，臨時改些東西都會先在本地的分支上改好，再合併到test分支而後編譯上測試。每每不少時候，在瀏覽器的移動模式下改的東西，上到真機上並非徹底同樣，會出現不少適配等問題，因此若是有一款調試工具，既能調試真機的頁面，又能調試JS，還能抓包分析那多好。只須要給設備配置好本地的代理，而後我就能夠在瀏覽器上修改真機的代碼，還能看在真機上的效果，這樣就大大提高了修改的效率，而後我就遇到了spy-debugger這個神器。

關於spy-debugger

一站式頁面調試、抓包工具。遠程調試任何手機瀏覽器頁面，任何手機移動端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，無需USB鏈接設備。

特性

1. 頁面調試＋抓包
2. 操做簡單，無需USB鏈接設備
3. 支持HTTPS。
4. spy-debugger內部集成了weinre、node-mitmproxy、AnyProxy。
5. 自動忽略原生App發起的https請求，只攔截webview發起的https請求。對使用了SSL pinning技術的原生App不形成任何影響。
6. 能夠配合其它代理工具一塊兒使用(默認使用AnyProxy) (設置外部代理)

使用教程及官方文檔都很詳細

官方文檔連接