gRPC devtools (using gRPC-web interceptors) - Chrome extension (MV3) for debugging gRPC network requests

[soc221b]

Installation

Install from the Chrome Web Store:

https://chromewebstore.google.com/detail/grpc-devtools-for-grpc-we/fohdnlaeecihjiendkfhifhlgldpeopm

Then you can find the setup button on the top-right corner in the devtools panel and follow instruction to register gRPC-web interceptors:

Seamless migration

If you are using gRPC-Web Devtools, here is a function (window.__GRPCWEB_DEVTOOLS__) injected by gRPC devtools too, you don't need to change any line of code:

const enableDevTools = window.__GRPCWEB_DEVTOOLS__ || (() => {});
const client = new EchoServiceClient('http://example.com');
enableDevTools([ client ]);

This function is provided for backward compatibility, you should refactor your code to the gRPC-web interceptors in the future.

Features

🎨 Elegant layout inspired by Chrome devtools themes.

🔍 Supports text, regular expression, invert and case-sensitive filtering.

🌑 Dark mode - reduce eye strain.

Example

Here is a chat example using unary RPC and server-side streaming RPC:

https://github.com/iendeavor/grpc-devtools-example

Next

If you're looking for other cool features that haven't been implemented yet, please send me feedback or leave a message here.

Thanks!

[mziwisky]

Would you consider open sourcing it? Looks very useful, but I can't trust a closed source chrome extension with privileges to read all my network communication. Also why does it require the user to log in with a google account? These are big red flags.

[mziwisky]

Actually nevermind, I just found an open source alternative that works brilliantly, https://github.com/SafetyCulture/grpc-web-devtools