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