利用Vconsole和Fillder進行移動端抓包調(diào)試方法
在開發(fā)中，有時候我們需要在手機上進行測試，可是如果遇到bug，我們怎么進行抓包調(diào)試呢？這里介紹兩種方式：
- Vconsole
- Fillder
利用Vconsole進行調(diào)試
一個輕量、可拓展、針對手機網(wǎng)頁的前端開發(fā)者調(diào)試面板
Vconsole特性：
- 查看 console 日志
- 查看網(wǎ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進行調(diào)試
打開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的進行調(diào)試了-----------------------------
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JavaScript中ES6 Babel正確安裝過程的相關資料,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了JS判斷是否360安全瀏覽器極速內(nèi)核的方法,對比分析了360安全瀏覽器極速內(nèi)核與其他主流瀏覽器內(nèi)核的區(qū)別及對應的判斷技巧,需要的朋友可以參考下2015-01-01
JAVASCRIPT模式窗口中下載文件無法接收iframe的流
模式窗口中下載文件，有時在下載時發(fā)現(xiàn)服務器無法接收iframe的流，因為在模式窗口中沒有觸發(fā)iframe的src重新定向事件2013-10-10
這篇文章主要介紹了使用webpack構建應用的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
DOCTYPE是document type(文檔類型)的簡寫，在web設計中用來說明你用的XHTML或者HTML是什么版本。2010-04-04
javascript中undefined的本質(zhì)解析
這篇文章主要介紹了javascript中undefined的本質(zhì)解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了微信小程序圖片左右擺動效果詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
javascript中createElement的兩種創(chuàng)建方式
這篇文章主要介紹了javascript中createElement的兩種創(chuàng)建方式,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-05
本文介紹了javascript閉包的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
javascript利用apply和arguments復用方法
這篇文章主要介紹了javascript利用apply和arguments復用方法，有需要的朋友可以參考一下2013-11-11