前情回忆
最近接了个需求:从客户端拿用户的浏览历史,在页面上显示。跟客户端约定完后一顿操作,这需求就算弄完了。基本就是调用客户端jsbridge,传一个回调函数名,在回调中处理客户端返回值。
以为是这么简单么?
测试:“你看看这个icon为什么不显示?”
测试:“这数据不对,是不是你显示问题?” ...
黑人❓我这拿的客户端数据,这种问题...
只能chrome://inspect,在控制台调用客户端函数一一给测试看。
so,有没有什么能直接让开发测试查看数据的客户端抓包工具?
找了一圈没瞧见,以前用过vconsole,能直接在h5页面显示控制台,网络请求等。学习一下搞一搞!冲!
上手
终于冲出个模样了了!
引入
首先必须是在项目中引入这个组件库interface-log。
npm i interface-log
or
yarn add interface-log
或者也可以用cdn的方式引入工程,@latest能被替换为任意版本比如@1.1.3...
<script src="https://unpkg.com/interface-log@latest"></script>
之后就是在项目里引用了,必须得在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,就能将函数再次发起调用
长按有惊喜
当你发现列表里因为折叠看不起或者看不爽的时候,长按列表项!
全屏展示,舒服了。
滑动小操作
向右滑动删除当条记录