【開發工具】Easy Interceptor花時間更新了交互,體驗更好了

語言: CN / TW / HK

摘要

一款集成了模擬和攔截請求並擁有一定編程能力的谷歌瀏覽器插件,其中存儲容量、大小用顏色做了指示,界面簡潔,交互友好。由於對項目沒有依賴性、侵入性,所以開發、測試、生產環境都適用。

使用場景

設想一下明明是要驗證一個很簡單的東西,但是這個問題復現的前置條件實在太難完成了,導致自己很痛苦。這裏的太難完成可能是:

  • 業務流程太長(不熟悉流程或不想的重走一遍)
  • 要驗證的是測試環境,不能通過前端硬編碼解決
  • 修改數據庫困難(沒有條件改、不會改或者不想麻煩後端改)
  • 不想使用代理軟件(沒必要、沒用過或者安裝、配置麻煩等)

如何解決上述問題呢?如果可以在客户端接收數據前攔截並加以修改再返回就可以達到目的。Easy Interceptor就是利用上述思路,它可以攔截XMLHttpRequest,fetch數據請求方式的http請求,通過覆蓋response,responseText字段,從而達到對數據的修改。作為一個chrome插件,天然的集成在用户測試環境,因此對使用者的心智負擔極小。

  • xhr: 內部實現了一個假的XMLHttpRequest,因此使用xhr類型的請求方式不會向後端發出請求,也無須後端服務支持(xhr類型依賴於ajax-fake
  • fetch: 通過代理其上的方法、屬性,覆蓋特定的字段,因此無法配置delay、status字段,還是會發出請求,需要保證接口正常才能生效,並且也不會改變devtool-network的信息(fetch類型使用Proxy)

注意:

插件僅針對content-type: json類型有效

如果你是一個熟練度拉滿,有着完善的代理環境大可不必使用,僅作為特定場合的補充

特點

  • 免費,無廣告推廣,較好的用户體驗
  • 提供監聽當前請求(省略手動填寫的麻煩)
  • 集成monaco-editor,更方便的編輯處理文本(10W行數據也不會卡頓)
  • 導入導出,工程序列化
  • 更加友好的交互,用顏色法突出當前狀態
  • 擁有一定的js編程能力,可以動態處理數據,可打印輸出信息

使用説明

動圖演示

詳細的操作參看下面的老版本

Q&A

為什麼插件窗口只有800x600

這個是由於瀏覽器限制的,popup的形式最大支持800x600,該形式的好處在於儘可能不影響項目本身(不足在於每次都會重新加載頁面,因此插件做了很多的序列化以保證較好的用户體驗)

存儲只有5M,如何突破限制

主要response數據量太大導致的,可以把response面板設置為 null , code面板通過js修改數據(注意:此時會發送真實的請求,依賴後端服務)

為什麼是262kb

這裏是為了方便寫程序,y = f(x) = log2(x),取了個公差為2的等差數列18 20 22;也就是2^18 = 262144,並且這些值也恰好合適。

為什麼fetch不支持模擬請求

主要是由於沒有找的合適的庫,xhr類型是魔改的ajax-fake;並且現在的絕大部分應用都是基於xhr,因此僅對fetch做了代理來攔截請求,功能要稍微少一點。

為什麼僅支持json類型的請求

起初是為了解決自測階段部分場景的復現問題(現在的應用前後端交互基本都是json類型),期間使用了幾個類似的插件發現用户體驗不是很好,一些代理軟件功能很強,但是個人也不太喜歡太重的配置,使用的環境要儘可能單一。

資源下載

由於成為谷歌開發者需要 $5,所以谷歌市場並沒有此應用,請移步github的release頁面下載。

老版本使用説明(v1.4前)

https://juejin.cn/post/7014658587263762446