Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rhenriquez28/trpc-client-devtools

An unofficial browser extension for inspecting queries, mutations and subscriptions in your tRPC app
https://github.com/rhenriquez28/trpc-client-devtools

chrome-extension devtools firefox-addon trpc

Last synced: 11 days ago
JSON representation

An unofficial browser extension for inspecting queries, mutations and subscriptions in your tRPC app

Host: GitHub
URL: https://github.com/rhenriquez28/trpc-client-devtools
Owner: rhenriquez28
Created: 2022-09-14T15:37:51.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2022-11-20T19:07:06.000Z (almost 2 years ago)
Last Synced: 2024-10-24T21:57:29.751Z (18 days ago)
Topics: chrome-extension, devtools, firefox-addon, trpc
Language: TypeScript
Homepage:
Size: 1.14 MB
Stars: 105
Watchers: 1
Forks: 1
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# tRPC Client Devtools

# Installation

1. Install the [trpc-client-devtools-link](https://www.npmjs.com/package/trpc-client-devtools-link) npm package and add it to your tRPC client config (if you're using tRPC v10, install the @next version)
2. Download and install the tRPC Client Devtools Browser Extension for [Chrome](https://chrome.google.com/webstore/detail/trpc-client-devtools/ocolkjnalnkdaclepjmkigefcgngkadb?hl=en&authuser=1) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/trpc-client-devtools/)
3. Open the Devtools, navigate to the tRPC panel and inspect away!

# Features

The tRPC Client Devtools appear as a "tRPC" tab in your web browser inspector when tRPC is detected, alongside other tabs like "Elements" and "Console". The devtools currently have 3 main features:

- **Query inspector:** View the input, result and elapsed time of the fired queries.
- **Mutation inspector:** View the input, result and elapsed time of the fired mutations.
- **Subscription inspector:** View the input, multiple results and their elapsed time of the subscriptions.

![tRPC Client Devtools Browser Extension](./assets/trpc-client-devtools.png)