說到抓包這個問題，很多初級的前端都不太能意識到這個問題，雖然本人也就是個小菜，但是對於抓包工具可以說是熟練掌握了，因為有過太多介面的問題被測試指派了我，那麼如果熟練掌握了抓包不僅能快速定位出問題，還能分析網路請求，以及一些前端邏輯的問題導致介面多次觸發等現象。
所以一個合格的前端一定要會抓包，而且還要熟練掌握抓包工具，比如可以通過抓包工具些慢速網路，處理慢速網路時的一些互動，更重要的一點是，還可以用抓包工具配置頁面的訪問跳轉，做混合開發時的一些測試頁面。
抓包工具有哪些
比較熟悉的是Mac上用Charles,Windows上用Fiddler。關於這兩者的安裝使用教程實在太多了，本文不做贅述，今天我給大家介紹一款集合了抓包和H5頁面除錯的工具spy-debugger。
為何開始使用spy-debugger
在開發過程中，我們的專案都是根據功能需求建一個開發的分支，等到了提測的時候，把分支合併到測試環境，測試通過再上線。基本這是一個統一的流程，但是做移動端混合開發的時，H5頁面我們在本地開發的時候，在chrome中開啟了移動端模式，基本上到手機上也不會有太大的問題。
但是上測試環境後，產品有的時候會需要改一些文案樣式啊，每次遇到這種情況，臨時改些東西都會先在本地的分支上改好，再合併到test分支然後編譯上測試。往往很多時候，在瀏覽器的移動模式下改的東西，上到真機上並不是完全一樣，會出現很多適配等問題，所以如果有一款除錯工具，既能除錯真機的頁面，又能除錯JS，還能抓包分析那多好。只需要給裝置配置好本地的代理，然後我就可以在瀏覽器上修改真機的程式碼，還能看在真機上的效果，這樣就大大提升了修改的效率，然後我就遇到了spy-debugger這個神器。
關於spy-debugger
一站式頁面除錯、抓包工具。遠端除錯任何手機瀏覽器頁面，任何手機移動端webview（如：微信，HybridApp等）。支援HTTP/HTTPS，無需USB連線裝置。
特性
- 頁面除錯＋抓包
- 操作簡單，無需USB連線裝置
- 支援HTTPS。
- spy-debugger內部整合了weinre、node-mitmproxy、AnyProxy。
- 自動忽略原生App發起的https請求，只攔截webview發起的https請求。對使用了SSL pinning技術的原生App不造成任何影響。
- 可以配合其它代理工具一起使用(預設使用AnyProxy) (設定外部代理)