jsbridge、用戶端接口抓包解法

前情回憶

最近接了個需求：從用戶端拿使用者的浏覽曆史，在頁面上顯示。跟用戶端約定完後一頓操作，這需求就算弄完了。基本就是調用用戶端jsbridge，傳一個回調函數名，在回調中處理用戶端傳回值。

以為是這麼簡單麼？

測試：“你看看這個icon為什麼不顯示？”

測試：“這資料不對，是不是你顯示問題？”

…

黑人❓我這拿的用戶端資料，這種問題…

隻能chrome://inspect，在控制台調用用戶端函數一一給測試看。

so，有沒有什麼能直接讓開發測試檢視資料的用戶端抓包工具？

找了一圈沒瞧見，以前用過vconsole，能直接在h5頁面顯示控制台，網絡請求等。學習一下搞一搞！沖！

上手

終于沖出個模樣了了！

引入

首先必須是在項目中引入這個元件庫interface-log。

npm i interface-log
or
yarn add interface-log
           

或者也可以用cdn的方式引入工程，@latest能被替換為任意版本比如@1.1.3…

之後就是在項目裡引用了，必須得在jsbridge被調用之前進行初始化。

// npm
import InterfaceLog from 'interface-log';
new InterfaceLog({bridge:['bridgeName1']});

// cdn
new InterfaceLog({bridge:['bridgeName','bridgeName1']});
           

向構造函數中傳入jsbridge的名稱，就是用戶端挂載函數的位置。比如用戶端函數都挂載在window.bridgeObject中，那麼配置就是{ bridge: [‘bridgeObject’] }。若是有多個挂載對象，就以數組的形式傳入多個對象的名稱。

長啥樣

初始化後點check就能切入展示面闆。

調出面闆，展示詳情

tips：

• jsbridge調用詳情，ready、processing、sync-finsh和async-finish對應用戶端函數的執行的四個狀态，初始化完畢（ready）、調用執行中（processing）、同步執行結束（sync-finish）和異步執行結束（async-finish）。異步同步就是用戶端傳回資料的方式

// 用戶端函數 bridge.test
// 同步方式
const result = bridge.test(); // result為傳回值
// 異步方式
const cb = result => console.log(result);
bridge.test('cb'); // 用戶端執行cb，在callback中的result即為所求資料
           

• props：調用jsbridge傳入的參數值。

value-傳入的參數值。type-參數類型。index-參數的序号。

• result：調用jsbridge的傳回值。

return-同步函數傳回值。callback序号-異步方式的回調函數擷取值。

origin-值的原始内容。prettier-為友善展示傳回資料，對其進行美化以後的值。

想重新發起一次請求

點選name邊上的icon，就能将函數再次發起調用

長按有驚喜

當你發現清單裡因為折疊看不起或者看不爽的時候，長按清單項！

全屏展示，舒服了。

滑動小操作

向右滑動删除當條記錄

位址

interface-log

zhucyi/interface-log