Introducing useDapp developer tools
Download the extension today:
Can you imagine developing a web app without access to the developer tools network tab? This little window contains minuscule details about every little request your app makes. Status code, HTTP headers, request methods — it is all there. If your app calls any APIs and something goes wrong you are just a click away from knowing what happened.
And yet, when developing Ethereum dapps you don’t get this privilege. Because blockchain communication is done through the provider usually injected by Metamask the network tab is silent about those requests.
We found that useDapp is uniquely positioned to inspect dapp to blockchain communication because it is a framework for building dapps and a layer of abstraction on top of calls to Metamask. If your project is built on useDapp all of the data goes through the framework before being passed to the injected provider.
This is why we developed a developer tools browser extension that shines light on this area. It shows you what blockchain calls your app is making and what data it receives. Because the developer tools are custom made they understand how to parse and display the underlying data, so that you don’t need to worry about manually decoding it.
The rest of the blog post is a walk-through over the various features that the developer tools extension offers. Those are divided into two major areas of interest:
- Inspecting application state
- Decoding blockchain calls
Inspecting application state
This area of the extension is relatively straightforward. Your app connects to the blockchain through a provider, e.g. Metamask. This provider controls the network you are connected to and the account that is currently in use.
The main way in which the developer tools allow you to inspect what is going on is via the event log. The extension constantly monitors what is going on inside your application and reports it timestamped in a readable format.
So what is the information that gets displayed? Here is the list of all event types and explanations as to when they occur:
- Init — This is always the first event being displayed. It is fired when the useDapp library loads and contains a timestamp of that. All other events are timed relative to Init.
- Network connected/disconnected — When the network changes on the provider this event is fired. Each network has its own name and color and other events are color coded according to the network they happened on. Those colors are also the exact same that Metamask uses, so you will feel right at home.
- Account connected/disconnected — When the user connects an account or changes it this event gets fired. You will also see the first four digits of the address for easier visual grepping.
- Block found —useDapp is constantly listening for new blocks. It does this so that it can maintain up to date blockchain state.
- Calls updated/State updated/Fetch error — Explained later in the blog post.
- Error — Best explained here: https://github.com/NoahZinsmeister/web3-react/tree/v6/docs#understanding-error-bubbling
Using those events you will be able to quickly tell what is going on in your application. But what about blockchain communication? That is what the next section is about.
Decoding blockchain calls
To understand the information that the extension presents it is necessary to understand how useDapp manages blockchain data. Whenever the app makes a call to a high level hook like useTokenBalance a low level useContractCalls is invoked. useDapp maintains a list of blockchain calls that will be made whenever a new block is found. useContractCalls adds or removes calls from that list. Because making lots of blockchain calls at once is problematic the calls are actually aggregated together in one giant call to the Multicall contract. The resulting data is later decoded and returned back to higher level hooks.
Up to now all this indirection meant that it was hard to tell what data was being fetched when. The developer tools extension decodes and displays all the calls so that it is trivial to tell what is going on. Whenever the call list is modified the Calls updated event is emitted and a detailed breakdown of changes is made available to the user.
Every change to the call list and every new block being mined trigger a blockchain call. Once the call is resolved one of two outcomes can occur. Either the state is updated with the new data or the call resulted in an error. In both cases a new event is emitted and the new state or the error details are displayed in the extension.
Further reading
If you want to get even more technical you should check out the detailed documentation. Or dive right in:
yarn add @usedapp/coreWe are eager to hear what you think and can’t wait to see what you build!
