在開發中，有時候我們需要在手機上進行測試，可是如果遇到bug，我們怎么進行抓包調試呢？這里介紹兩種方式：

• Vconsole
• Fillder

利用Vconsole進行調試

一個輕量、可拓展、針對手機網頁的前端開發者調試面板

Vconsole特性：

• 查看 console 日志
• 查看網絡請求
• 手動執行 JS 命令行
• 自定義插件

入門

①首先需要下載Vconsole,地址https://www.npmjs.com/package/vconsole

②

 npm install vconsole

③ Import dist/vconsole.min.js to your project:

<script src="path/to/vconsole.min.js"></script><script> // init vConsole var vConsole = new VConsole(); console.log('Hello Vconsole');</script> 

利用Fillder進行調試

打開Fiddler，然后點擊菜單欄的Tools > Options，打開“Options”對話框

在打開的對話框中切換到“HTTPS”選項卡。

在打開的“HTTPS”選項卡中，勾選“Capture HTTPS CONNECTs”和“Decrypt HTTPS traffic”前面的復選框，然后點擊“OK”。

Connection勾選允許遠程連接

配置host文件：C:/Windows/System32/drivers/etc(該操作視情況而定)
重啟fiddler
用一個wifi設置手機代理,服務器地址為自己電腦的IP，端口跟fiddler一致（默認8888）
用手機瀏覽器 打開IP：端口號，下載證書
安裝完證書后，連接設置了代理的wifi

--------------可以happy的進行調試了-----------------------------

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。