簡介：從此我廠移動web真機測試告別 wifi 熱點。
廠外的小夥伴看到這篇文章標題可能會感到莫名其妙，真機測試移動 web 與 wifi 熱點有神馬關係？的確，通常情況下真機測試移動端 web 確實用不到 wifi 熱點。不過，我廠的前端開發和測試小夥伴對此一定不會感到陌生，我們受這個問題困擾太久太久了。
手機真機測試經常有需要訪問開發電腦的場景，比如：
- 訪問開發電腦本地的開發文件
- 使用電腦 hosts
- 在電腦上抓包、調試頁面
- ……
而我廠的手機和開發用電腦處於不同網絡，無法直接互訪。所以，不少小夥伴無奈使用電腦發射 wifi 熱點給手機連接，使其處於同一局域網，以實現互訪。這種方案的問題可歸結爲兩大方面：一是政策方面，我廠信息安全規定明確禁止發射個人 wifi 熱點；二是體驗方面，發射 wifi 熱點繁瑣且不穩定，影響工作效率。
針對這個工作中的痛點，我們現提出一套不需要 wifi 熱點的跨平臺移動 web 真機測試解決方案，希望它能緩解小夥伴的些許困擾，像這個方案的名字
Carefree
一樣，快樂舒暢的工作。
Carefree
解決方案由“服務端 whistle ”和“ webpack 插件 @nutui/carefree ”兩部分組成。
服務端 whistle
現在主流的代理調試工具有 Fiddler 、 Charles 和這兩年在前端流行起來的 whistle 。
whistle (讀音[ˈwɪsəl]，拼音[wēisǒu])是一個基於 Node 實現的跨平臺 web 調試代理工具，主要用於查看、修改 HTTP 、 HTTPS 、 Websocket 的請求、響應，不同於 Fiddler 通過斷點修改請求響應的方式， whistle 採用的是類似配置系統 hosts 的方式，一切操作都可以通過配置實現，支持域名、路徑、正則表達式、通配符、通配路徑等多種匹配方式，且可以通過Node模塊擴展功能，功能十分強大。
這些代理調試工具都提供 HTTP 代理服務，是 HTTP 請求及其服務端響應的中轉站。也正是基於這一點，它們纔有機會截獲請求和響應。
這些代理調試工具安裝在我們的開發電腦上，手機需要將代理服務器設置爲我們的開發電腦，之後我們纔可以通過這些工具的 UI 界面對其進行抓包和調試等操作。
我們需要明確的是，手機需要訪問的是代理調試工具提供的 HTTP 代理服務，而開發電腦需要訪問的是代理調試工具的 UI 界面。問題是 HTTP 代理服務及其所屬的工具在開發電腦上，而手機和電腦處於不同網絡無法直接互訪。那麼，在不借助電腦 wifi 熱點的情況下，手機怎麼樣才能訪問到這個 HTTP 代理服務呢？
我們解決問題的思路是設法讓手機訪問到代理調試工具的 HTTP 代理服務，同時讓開發電腦可以訪問此工具的 UI 界面。
沿着這個思路走，如果我們把代理調試工具安裝在一臺手機和電腦都可以訪問的內網服務器上，可以解決手機訪問 HTTP 代理服務的問題。但這樣的話，在電腦上又該怎樣訪問該工具的 UI 界面呢？
反觀這幾個主流的代理調試工具，會發現 whistle 可以很好的滿足這個需求。因爲 whistle 的服務是通過 Node 提供的，不但可以部署在 Linux 服務器上，其性能理論上還要好過部署在本地電腦上。另一方面， whistle 的 UI 界面是通過 web 提供的，也就是說 whistle 在提供 HTTP 代理服務的同時，還提供了 web 伺服服務，通過瀏覽器可以在本地或遠程訪問其 web 界面進行規則管理或抓包調試等操作。
所以，把 whistle 部署在內網服務器上給手機提供代理服務，同時在開發電腦上通過瀏覽器訪問服務端 whistle 的 UI 界面進行抓包調試是完全可行的方案。“服務端 whistle ”是我們整套解決方案的重要組成部分。
通過這種方案，我們可以解決手機真機測試 H5 時的修改 hosts 、URL 映射、跨域、 Mock 接口數據、捕獲頁面錯誤、調試等問題。
事實上，除了解決 wifi 熱點訪問不便的問題，這個方案還有不少其他優點：
* 方便團隊協作，一個項目只需要維護一套 whistle 規則和數據
* 降低團隊 whistle 工具維護成本及本地資源佔用
* 方便開發者在不同設備上開發，無需頻繁導入導出配置
* ……
有人可能會擔心多人共用一套 whistle 時規則會衝突，這種可能性確實存在，解決方案是通過不同的端口啓動多個 whistle 實例。
一切看上去都很美。然鵝，有個問題是這種方案解決不了的，那就是手機無法訪問開發電腦上的文件，比如訪問開發電腦本地的項目頁面。受這個問題困擾的主要是前端團隊。
webpack 插件 @nutui/carefree
鑑於目前我廠大部分移動 web 項目使用的前端構建工具是 webpack ，所以我們開發了一個 webpack 插件來解決這個問題。插件的名叫
@nutui/carefree
，已發佈到 NPM ，有這種場景需求的小夥伴，可以通過安裝使用。
我們先來了解一下這個插件的原理。
在手機和電腦無法直接互訪的場景下，要在手機上訪問開發電腦本地文件，一個可行的思路是把文件上傳到內網服務器。而這種方案不被接受的主要原因還是效率問題：
- 調試的時候常常需要頻繁改動，而每次改動都把整個工程完整的構建一版，構建效率低。
- 每次構建完畢都需要把構建結果全部上傳一遍，上傳效率低。
- 上傳到測試服務器後，需在手機瀏覽器中手動輸入頁面地址，或者在電腦上把頁面地址生成二維碼給手機掃碼，訪問效率低。
- ……
我們這個插件的原理是對此方案的各個環節逐一進行優化，儘可能的自動化、快速化，大幅提升效率，使其成爲一種“可被接受”的方案。
@nutui/carefree
插件工作的大致流程如下：
1. 修改部分 webpack 配置，以
監聽模式（Watch Mode）
啓動編譯，將編譯後的文件
自動上傳
到內網服務器（解決手動上傳不便的問題，目前支持 ssh 和 ftp 兩種上傳方式）
2. 上傳完畢後，在終端（命令行界面）打印出入口頁面地址和
二維碼
，手機掃碼即可訪問（解決手機輸入地址不便的問題）
3. 監聽文件變化，一旦保存修改，自動觸發
增量
編譯（解決全量編譯速度慢的問題）
4. 自動將編譯後且有變化的文件
增量
上傳到內網服務器（解決全量上傳速度慢的問題）
5. 在手機上刷新頁面或重新掃碼即可看到變化
插件的安裝與使用：
- 安裝插件
推薦使用 NPM 安裝本插件
npm install @nutui/carefree --save-dev- 修改 package.json 文件
scripts 字段中新增一個自定義命令，如
carefree-dev
"scripts": {
"carefree-dev": "cross-env NODE_ENV=carefree carefree_env=dev webpack -w --colors --progress"
}- 修改 webpack 配置文件 webpack.config.js
//引入插件
const Carefree = require('@nutui/carefree');
//將插件放在 plugins 數組中，並進行配置
webpackConfig.plugins = [
new Carefree({
//……
})
];具體配置參數可參考本插件 NPM 項目主頁[1]。
通過以上3步即可完成插件安裝，使用
npm run carefree-dev
命令即可開啓
Carefree
之旅。
示例項目
如果你已迫不及待的想快速體驗一下，不妨試試我們提供的示例項目，這是一個已經集成了本插件的 webpack 項目。體驗只需3步：
-
將本插件項目代碼庫
example分支代碼克隆到本地，並進入項目目錄
git clone -b example http://git.jd.com/jdcfe/carefree.git
cd carefree- 安裝依賴
npm install-
執行
npm run carefree-dev命令開始構建
npm run carefree-dev構建並自動上傳完畢之後終端會打印出入口頁面地址的二維碼，手機（連公司內網）掃碼即可訪問到頁面。
修改
src/view/index.vue
文件，保存改動會觸發自動增量編譯和增量上傳，完成之後終端二維碼更新，手機重新掃碼或刷新頁面即可看到變化。
配合前文提到的“服務端 whistle ”，可解決手機調試本地項目頁面時的配 hosts、跨域、URL 映射、Mock 數據等問題。
“服務端 whistle ” + “ webpack 插件 @nutui/carefree ”共同組成了這個不依賴 wifi 熱點的移動 web 真機測試解決方案——
Carefree
。
如果你只需要用真機測試內網服務器或線上的 H5 頁面，比如對大多數測試團隊的小夥伴來說，只用“服務端 whistle ”方案就完全可以滿足需要。
只有那些需要用真機訪問本地 webpack 項目資源的小夥伴才需要用到
@nutui/carefree
插件，而即便在這種場景下，很多時候還是需要“服務端 whistle ”方案聯合使用的。
基於這套方案，我們在日常開發測試工作中已基本擺脫了對 wifi 熱點的依賴，現在把它分享給大家。考慮到大家可能對 whistle 還不是太熟悉，我們彙總了一些工作中常用的 whistle 使用技巧，連同
Carefree
方案做了個網站（PC端），供大家參考[3]。大家在使用過程中，如果遇到什麼問題，我們也樂於協助。
更多精彩內容請關注我們團隊的公衆賬號“全棧探索”。
擴展閱讀
[1] https://www.npmjs.com/package/@nutui/carefree
[2] whistle官網 http://wproxy.org/whistle/
[3] http://carefree.jd.com
文章來源於 全棧探索 微信公衆號，掃描下面二維碼關注：
