這篇文章主要為大家展示了“如何使用Vconsole和Fillder進(jìn)行移動端抓包調(diào)試”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用Vconsole和Fillder進(jìn)行移動端抓包調(diào)試”這篇文章吧。

創(chuàng)新互聯(lián)專注于東安網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供東安營銷型網(wǎng)站建設(shè)，東安網(wǎng)站制作、東安網(wǎng)頁設(shè)計、東安網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造東安網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供東安網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

在開發(fā)中，有時候我們需要在手機(jī)上進(jìn)行測試，可是如果遇到bug，我們怎么進(jìn)行抓包調(diào)試呢？這里介紹兩種方式：

• Vconsole

• Fillder

利用Vconsole進(jìn)行調(diào)試

一個輕量、可拓展、針對手機(jī)網(wǎng)頁的前端開發(fā)者調(diào)試面板

Vconsole特性：

• 查看 console 日志

• 查看網(wǎng)絡(luò)請求

• 手動執(zhí)行 JS 命令行

• 自定義插件

入門

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

②

 npm install vconsole

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

利用Fillder進(jìn)行調(diào)試

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

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

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

Connection勾選允許遠(yuǎn)程連接

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

--------------可以happy的進(jìn)行調(diào)試了-----------------------------

以上是“如何使用Vconsole和Fillder進(jìn)行移動端抓包調(diào)試”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！