tRPC Client Devtools: Unofficial Extension for Inspecting Queries, Mutations, and Subscriptions
tRPC Client Devtools is an unofficial extension that allows developers to inspect queries, mutations, and subscriptions in their tRPC applications. This Chrome extension provides a convenient way to analyze the input, output, and elapsed time of these operations.
To start using tRPC Client Devtools, there are a few simple steps to follow. First, install the trpc-client-devtools-link npm package and add it to your tRPC client config. If you are using tRPC v10, make sure to install the @next version. Next, download and install the tRPC Client Devtools Extension. Finally, open your browser's Devtools, navigate to the tRPC panel, and begin inspecting your queries, mutations, and subscriptions.
Once installed, the tRPC Client Devtools appear as a "tRPC" tab in your web browser's inspector, alongside other tabs like "Elements" and "Console". The extension offers three main features: query inspector, mutation inspector, and subscription inspector. These features allow you to view the input, result, and elapsed time of the fired queries, mutations, and subscriptions respectively.
