利用Vconsole和Fillder進(jìn)行移動(dòng)端抓包調(diào)試方法

更新時(shí)間：2019年03月05日 14:57:58 作者：darkCode

這篇文章主要介紹了利用Vconsole和Fillder進(jìn)行移動(dòng)端抓包調(diào)試，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在開發(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è)的前端開發(fā)者調(diào)試面板

Vconsole特性：

查看 console 日志
查看網(wǎng)絡(luò)請(qǐng)求
手動(dòng)執(zhí)行 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進(jìn)行調(diào)試

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

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

在打開的“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ī)瀏覽器打開IP：端口號(hào)，下載證書
安裝完證書后，連接設(shè)置了代理的wifi

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

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

您可能感興趣的文章:

相關(guān)文章

JavaScript中ES6 Babel正確安裝過程
這篇文章主要介紹了JavaScript中ES6 Babel正確安裝過程的相關(guān)資料,需要的朋友可以參考下
2016-07-07
JS判斷是否360安全瀏覽器極速內(nèi)核的方法
這篇文章主要介紹了JS判斷是否360安全瀏覽器極速內(nèi)核的方法,對(duì)比分析了360安全瀏覽器極速內(nèi)核與其他主流瀏覽器內(nèi)核的區(qū)別及對(duì)應(yīng)的判斷技巧,需要的朋友可以參考下
2015-01-01
JAVASCRIPT模式窗口中下載文件無(wú)法接收iframe的流
模式窗口中下載文件，有時(shí)在下載時(shí)發(fā)現(xiàn)服務(wù)器無(wú)法接收iframe的流，因?yàn)樵谀Ｊ酱翱谥袥]有觸發(fā)iframe的src重新定向事件
2013-10-10
使用webpack構(gòu)建應(yīng)用的方法步驟
這篇文章主要介紹了使用webpack構(gòu)建應(yīng)用的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
!DOCTYPE聲明對(duì)JavaScript的影響分析
DOCTYPE是document type(文檔類型)的簡(jiǎn)寫，在web設(shè)計(jì)中用來說明你用的XHTML或者HTML是什么版本。
2010-04-04
javascript中undefined的本質(zhì)解析
這篇文章主要介紹了javascript中undefined的本質(zhì)解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
微信小程序圖片左右擺動(dòng)效果詳解
這篇文章主要介紹了微信小程序圖片左右擺動(dòng)效果詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
javascript中createElement的兩種創(chuàng)建方式
這篇文章主要介紹了javascript中createElement的兩種創(chuàng)建方式,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-05-05
淺談javascript的閉包
本文介紹了javascript閉包的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
javascript利用apply和arguments復(fù)用方法
這篇文章主要介紹了javascript利用apply和arguments復(fù)用方法，有需要的朋友可以參考一下
2013-11-11