ZanProxy —— 原生程式碼除錯線上頁面，環境再也不是問題

有贊前端發表於2018-06-25

除錯

一、ZanProxy 是什麼

一言以蔽之，ZanProxy 是一個基於 Node.js 的代理伺服器。它專注於幫助前端開發提高開發效率。

二、我們為什麼需要一個代理工具

在前端開發中，我們常常會碰到以下幾個場景：

對於前端開發者來說，我們需要一個工具能讓我們直接用本地的前端程式碼除錯QA環境、預發環境、甚至線上的頁面。
我們需要在開發的時候需要快速切換環境，修改系統的 host 會有瀏覽器的 DNS 快取，常常需要手動清除。所以我們需要一個工具讓我們秒切host，不用等待。
前後端並行開發的時候，開發中介面的資料通常需要 mock。通過nginx反向代理到mock平臺步驟繁瑣，配置麻煩，對新手及其不友好。所以我們需要一個工具能輕鬆 mock 介面的資料。

在 ZanProxy 之前，我們做過的努力

為解決上面這些問題，我們進行了一些摸索並且做出了一些工具，但是這些工具都這樣或那樣不盡人意的地方。

我們曾將做了一個專案級別的mock工具叫Doraemon。這個工具通過修改傳送ajax請求的包，會把我們的請求轉發到我們的一個 mock 資料平臺，從而實現介面 mock 的功能。

後來我們又做了一個工具叫zRed。zRed是一個 Chrome 瀏覽器的外掛，會自動監控 chrome 瀏覽器內的所有請求，根據預先設定的匹配規則，將線上前端 css,js 程式碼請求轉發成相對應的本地請求。

但這些方案都存在明顯的問題

首先，Doraemon會入侵我們的專案程式碼，強依賴於傳送ajax請求的包，不利於工具的擴充套件和升級。而且這個工具只有 mock 功能，上面很多問題都不能得以解決。

zRed由於是一個chrome瀏覽器外掛，不能在其他平臺上使用，比如說在移動端上使用，讓真機除錯成為了一個問題。

最後確定的方案

最終決定的方案是使用一個代理伺服器，也就是 ZanProxy，來幫助我們解決環境問題。和以前的方案相比，ZanProxy 擁有更豐富的功能，可以同時在pc端和移動端使用，為開發者解決環境問題提供更了更多的助力。

三、ZanProxy 能做什麼

請求代理與轉發

ZanProxy 支援代理 http 和 https 的請求，並會根據使用者配置的規則進行請求的轉發。使用者可以在介面上配置自己的請求轉發規則，將符合某種特徵的請求轉發到需要的地址，可以是本地的一個檔案路徑或者是一個 URL 。我們常見的用法是將瀏覽器請求的靜態資源如 js，css 等檔案轉發到本地，實現用原生程式碼對線上頁面的除錯。

團隊規則同步

ZanProxy 支援遠端規則，目的是讓團隊成員間共用同一份轉發規則，降低溝通成本。ZanProxy 會在啟動的時候同步最新的遠端規則，所有的變更都能在使用者之間共享。

無痛 Host 切換

ZanProxy 支援使用者自定義 Host 解析，方便使用者進行環境的切換，這是通過在轉發時，把域名直接替換成指定 ip 實現的，Hosts 的修改沒有快取。ZanProxy 不會修改系統的 Hosts 檔案，所以使用者在關閉 ZanProxy 後會恢復正常的 DNS 解析，不需要擔心會有什麼副作用。

自定義響應資料

ZanProxy 支援使用者自定義請求的響應資料，意味著使用者可以利用 ZanProxy mock 介面資料，不用再等待介面開發完成。

請求監控

ZanProxy 可以讓使用者監控所有被代理的請求，能看到每一個請求的請求資料和響應資料。使用者可以將手機的代理設定成 ZanProxy ，通過 ZanProxy 監控手機的請求，為移動端真機除錯帶來便利。

自定義外掛

隨著業務複雜度的增加，單純的請求轉發已經不能滿足業務方的需求，面對不斷增長的需求我們發現ZanProxy需要有一個機制，讓使用者擴充套件 ZanProxy 的代理行為，於是我們為 ZanProxy 增加了支援自定義外掛的功能，這樣 ZanProxy 就有了很強的擴充套件性。ZanProxy 支援使用者開發自定義外掛進行功能的擴充套件，滿足使用者在各種場景下的需求，比如給所有的響應增加 Access-Control-Allow-Origin 的頭，輕鬆解決跨域問題。自定義外掛編寫指南：點選此處。

四、寫在最後

雖然 ZanProxy 在有贊內部已經大規模使用了，但肯定存在許多的不足和可以改進的地方，希望大家能多提寶貴的意見。