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

• Vconsole
• Fillder

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

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

Vconsole特性：

• 查看 console 日志
• 查看網(wǎng)絡(luò)請(qǐng)求
• 手動(dòng)執(zhí)行 JS 命令行
• 自定義插件

入門(mén)

①首先需要下載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進(jìn)行調(diào)試

打開(kāi)Fiddler，然后點(diǎn)擊菜單欄的Tools > Options，打開(kāi)“Options”對(duì)話框

在打開(kāi)的對(duì)話框中切換到“HTTPS”選項(xiàng)卡。

在打開(kāi)的“HTTPS”選項(xiàng)卡中，勾選“Capture HTTPS CONNECTs”和“Decrypt HTTPS traffic”前面的復(fù)選框，然后點(diǎn)擊“OK”。

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。