抓包、代理、請求攔截、手機端頁面除錯？通通拿下！
theme: channing-cyan highlight: nnfx-dark
我正在參加「掘金·啟航計劃」
前言
是否在開發過程中遇到以下痛點？
1、本地環境與線上環境差異造成一些缺陷只能在線上環境復現？
2、聯調時每次切換環境總是要重啟專案？
3、介面環境突然崩了，無法繼續進行除錯？
4、改完一個bug，需要打包部署才能進行驗證？
5、手機上的樣式與本地環境有差異，明明是相同的程式碼，除錯卻無從下手？
...
如果你正面臨這些問題，那麼藉助一些工具就顯得很有必要了
本文介紹抓包工具`LightProxy`的使用，利用這個工具足以解決以上所有痛點。
工具介紹&下載
介紹
LightProxy 是 IFE 團隊開發的一款基於 Electron 和 whistle 的開源桌面代理軟體，致力於讓前端開發人員能夠精確的掌握自己的開發環境，通過 HTTP 代理使用規則轉發、修改每一個請求和響應的內容。
大部分人想必都對whistle有所耳聞。而LightProxy對它的封裝，用一句話概括便是開箱即用。
下載地址
使用
準備工作
安裝之後，為了能夠捕獲到Https請求，右手邊的Whistie面板，點選上方的HTTPS進行證書安裝，點選之後會彈出證書下載的頁面
window預設是雙擊下載之後的證書進行安裝（根據提示安裝即可）。 不知道怎麼安裝的小夥伴可以參考這裡http://wproxy.org/whistle/webui/https.html ；關於手機端的代理除錯我們後面再說。
上面提到過，LightProxy開箱即用，安裝完之後我們開啟右下角的系統代理
這時候再去訪問任意頁面（例如：http://juejin.cn/ ），就可以看到對應抓包捕獲到的一些相關請求
規則使用
這部分將介紹如何使用LightProxy做一些 “有趣” 的事情
host代理
```Bash
lightProxy支援以下幾種host的配置方式
127.0.0.1 www.test1.com www.test1.com 127.0.0.1 127.0.0.1 www.test1.com www.test2.com ```
請求轉發（場景：解決跨域問題，無感修改介面域名）
```Bash
請求轉發
http://www.test1.com:8080/api http://www.test1.com:8081
http://www.test1.com:8080/api http://www.test1.com:8082
``
上面的例子將127.0.0.1的請求如：http://www.test1.com:8080/api/abc轉發到http://www.test1.com:8081/abc這樣子便解決了本地除錯時直接請求www.text1.com:8081` 的跨域問題。
與此同時，如果我們對接的後端地址經常發生改變，那麼只需要修改一下轉發的地址，再儲存即可，無需重啟前端專案，做到無感切換。
這裡提到了地址經常變化，因為我們可以通過變數的形式來控制，在lightProxy中提供了values的功能來新增我們的變數，你可以理解為鍵值對{key:value}的形式。
這樣子的話，我們就可以在規則中用利用大括號{}插入變數值
```bash
baseUrl 指向values中的變數值：www.test1.com
等價於http://www.test1.com:8080/api www.test1.com:8081
http://www.test1.com:8080/api {baseUrl}:8081
``
如果不確定配置的規則是否生效，可以找到對應的請求檢視Overview`介面看是否命中規則：
請求攔截
攔截修改請求響應內容
resBody
首先設定values值為json資料
```bash
重寫響應體中的body為引數body1對應的value值 {"id":666}
http://www.test1.com:8080/api resBody://{body1}
也可以直接使用小括號(),裡面直接放響應的內容:{"id":666}
http://www.test1.com:8080/api resBody://({"id":666})
內容較少可以直接使用括號(),較多的話推薦通過變數進行管理
```
可以看到響應內容已被修改
攔截修改cookie
reqCookies
```bash
修改請求cookie,key:value的格式，多個通過換行進行新增
http://www.test1.com:8080/api reqCookies://{cookie1} ``` 對應的cookie1
可以看到對應的cookie已經被設定上去
以上介紹了攔截請求的響應與cookie; ligntProxy能攔截的可不僅僅是這些，
攔截請求頭、新增請求引數、甚至是新增Cors解決跨域問題等等都不在話下，你大可在whistle的文件中找到這一切。接下來我們看看
lightProxy在手機端的一些騷操作。
手機端
證書安裝
點選lightProxy的手機代理選單
確保手機與電腦處於同一區域網(可通過電腦放出移動熱點，手機進行連線)
第一步：wifi設定代理
這裡以安卓手機為例，不同手機可能不完全一樣，但大同小異。
長按連線的wifi，點選修改網路進入到如下頁面。
設定完成點選儲存即可
第二步：安裝證書，下載之後點選證書對證書進行安裝，不同機型可能有所區別，這一步需要驗證手機螢幕密碼/指紋。如果需要選擇用途：選擇VPN即可。
ios使用者看這裡
完成以上操作之後，就可以開啟愉快的抓包之旅了~ 可用手機開啟瀏覽器訪問www.baidu.com ，檢視nextwork中是否能補抓到請求。
指令碼注入
```bash
利用jsPrepend 可以在html頁面中新增script標籤進行js指令碼注入
以下注入了values 中的變數 myJs.js
http://www.test1.com:8080/lightProxy jsPrepend://{myJs.js}
myJs.jsjs
const myScript = document && document.getElementById('myScript')
if(!myScript) {
const script = document.createElement('script'); // 建立一個script標籤
script.type = 'text/javascript';
script.src = 'http://unpkg.com/vconsole/dist/vconsole.min.js';
script.id="myScript"
document.getElementsByTagName('head')[0].appendChild(script);
window.onload = function(){
var vConsole = new window.VConsole();
}
}VC
```
以上程式碼的效果如下圖所示，頁面中注入了
VConsole，這對於一些生產環境不具備VConsole的移動端頁面提供瞭解決方案，再也不用擔心生產環境有錯無處排了。
遠端除錯
lightProxy提供了debugger功能，可用來除錯頁面元素或者檢視頁面元素等。只需要在訪問的連結上加上lightproxy=true，如：http://www.test1.com:8080/lightProxy?lightproxy=true ，開啟Debugger面板，如下所示
這種除錯方式在使用手機訪問連結時也是有效的，你可以通過debugger開啟的開發者工具聚焦到你手機上的dom元素，去做你想要做的事情，這更多的意義在於手機端的dom元素你也可以直接檢視，僅僅只需要你的電腦和手機在同一局域。也因此幫助你快速定位與修復線上環境出現的一些問題。
除了以上debugger面板的方式，whistle本身還集成了weinre，不過需要在瀏覽器端開啟。本質上lightproxy只是套了一個whistle，我們可以通過瀏覽器直接訪問到whistle。只需要在瀏覽器中輸入ip地址+埠號(可以在手機代理也即是證書下載的介面檢視)，即可訪問到網頁版的whistle，賬號密碼在右下角
啟動weinre配置如下
```bash
可通過直接訪問lightproxy ip地址+埠號開啟網頁版；test1為id，用於區分多個頁面
http://www.test1.com:8080/lightProxy weinre://test1 ``` 可以看到weinre中多了一個test1，此時點選進行訪問即可看到處於瀏覽中的頁面，可以檢視對應的dom元素等，最終效果與Debugger差不多。
擴充套件
對於線上環境的除錯，我們可以將線上環境的前端相關資源通過轉發指向本地的前端資源，如此一來可以做到本地的前端程式碼直接在生產/測試的環境上執行檢視效果。這對於本地的開發也是非常有利的。具體的配置方式小夥伴們可以嘗試自己研究。有疑問歡迎隨時溝通交流~
總結
以上，只是介紹了在開發過程中通過lightProxy來突破常規除錯的一些操作，實際lightProxy上遠不止這些內容，更為重要的是動手去嘗試。筆者希望小夥伴們能夠通過本篇文章來入門/熟悉一些代理工具除錯的手段。更多功能詳見 whistle。