利用Vconsole和Fillder進行移動端抓包調試

利用Vconsole和Fillder進行移動端抓包調試

在開發中，有時候咱們須要在手機上進行測試，但是若是遇到bug，咱們怎麼進行抓包調試呢？這裏介紹兩種方式：

1. Vconsole
2. Fillder

利用Vconsole進行調試

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

Vconsole特性：

1. 查看 console 日誌
2. 查看網絡請求
3. 手動執行 JS 命令行
4. 自定義插件

入門

①首先須要下載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的進行調試了-----------------------------