Antecedents to recall

Recently received a demand: from the client to take the user’s browsing history, display on the page. With the client after the agreement after a meal operation, even if the demand is finished. Basically you call the client JsBridge, pass a callback function name, and process the client return value in the callback. Think it’s that easy? Test: “Why is this icon not displayed?” Test: “This data is wrong, are you showing the problem?” . Black ❓ I got this client data, this kind of problem… Only Chrome ://inspect, in the console call client functions one by one to test see.

So, is there any client capture tool that can directly allow development tests to view the data?

I have used VConsole before, it can display console, network request and so on directly in H5 page. Learn and play! Blunt!

Get started

Finally out of shape!

The introduction of

You must first introduce the component library interface-log into your project.

npm i interface-log
or
yarn add interface-log
Copy the code

Or it can be introduced into the project as a CDN, @latest can be replaced with any version such as @1.1.3…

<script src="https://unpkg.com/interface-log@latest"></script>
Copy the code

It is then referenced in the project and must be initialized before the JsBridge is called.

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

// cdn
new InterfaceLog({bridge: ['bridgeName'.'bridgeName1']});
Copy the code

Pass in the constructor the name of jsBridge, which is where the client mounts the function. For example, if the client functions are mounted in window.bridgeObject, the configuration would be {bridge: [‘bridgeObject’]}. If there are more than one mounted object, the names of the objects are passed in as arrays.

Looks like

After initialization, click Check to access the display panel.

Bring up the panel to display the details

Tips:

  • Jsbridge call details, ready, Processing, Sync-finsh, and async-Finish correspond to the four states of client function execution, Ready, Processing, sync-finish, and async-finish. Asynchronous synchronization is how the client returns data
// The client function bridge.test
// Synchronization mode
const result = bridge.test(); // result is the return value
// Asynchronous
const cb = result= > console.log(result);
bridge.test('cb'); // The client executes cb, and result in callback is the desired data
Copy the code
  • Props: Calls the parameter values passed in by jsbridge.

Value – The value of the passed parameter. Type – Parameter type. Index – Indicates the number of the parameter.

  • Result: Return value of the jsbridge call.

Return – The value returned by the synchronization function. Callback ordinal – Gets a value for an asynchronous callback function.

Origin – The original content of the value. Prettier – Prettier value of returned data to show it easily

You want to make another request

Click the icon next to name to invoke the function again

Long press for surprise

When you find yourself in a list that you don’t like or don’t like because of folding, long press the list item!

Full screen display, comfortable.

Sliding small operation

Swipe right to delete the current record

address

interface-log

zhucyi/interface-log