【開發工具】Easy Interceptor花時間更新了互動，體驗更好了_hans0000

摘要

一款集成了模擬和攔截請求並擁有一定程式設計能力的谷歌瀏覽器外掛，其中儲存容量、大小用顏色做了指示，介面簡潔，互動友好。由於對專案沒有依賴性、侵入性，所以開發、測試、生產環境都適用。

使用場景

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

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

如何解決上述問題呢？如果可以在客戶端接收資料前攔截並加以修改再返回就可以達到目的。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前）

http://juejin.cn/post/7014658587263762446