gRPC-Web Dev Tools

Now supports dark mode.

Installation

Chrome

Via the Chrome Web Store ( recommended)

or

1. build it with make build
2. open the Extension Management page by navigating to chrome://extensions.
3. enable Developer Mode by clicking the toggle switch next to "Developer mode".
4. Click the LOAD UNPACKED button and select the extension ./build directory.

Firefox

Via Firefox Browser Add-Ons (recommended)

or

1. build and package with make package
2. enter about:debugging in the URL bar of Firefox
3. click This Firefox > Load Temporary Add-on...
4. select the grpc-web-devtools.zip extention file

Usage

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

NOTE: Requires that your generated client(s) use protoc-gen-grpc-web >= 1.0.4

Example

The example uses docker-compose to start a simple gRPC server, JavaScript client and the Envoy proxy for gRPC-Web:

make example-up

Example will be running on http://localhost:8080

To stop the example:

make example-down

Connect-Web

grpc-web-devtools now also supports connect-web!

// __CONNECT_WEB_DEVTOOLS__ is loaded in as a script, so it is not guaranteed to be loaded before your code.
const interceptors: Interceptor[] = window.__CONNECT_WEB_DEVTOOLS__ !== "undefined" ?
  [window.__CONNECT_WEB_DEVTOOLS__]
  : [];
// To get around the fact that __CONNECT_WEB_DEVTOOLS__ might not be loaded, we can listen for a custom event,
// and then push the interceptor to our array once loaded.
window.addEventListener("connect-web-dev-tools-ready", () => {
  if (typeof window.__CONNECT_WEB_DEVTOOLS__ !== "undefined") {
    interceptors.push(window.__CONNECT_WEB_DEVTOOLS__);
  }
});
// Now we can use the interceptors in our transport
const transport: Transport = createGrpcWebTransport({
  baseUrl: getApiHostname(),
  interceptors,
});

This will also work for the connect protocol

const transport: Transport = ConnectTransportOptions({
  baseUrl: getApiHostname(),
  interceptors,
});