gRPC-Web Dev Tools: Interceptor Edition

Now supports dark mode.

gRPC-Web Interceptor Support

This fork of grpc-web-devtools adds support for native gRPC-Web interceptors.

SafetyCulture's previous version was incompatible with other gRPC-Web interceptors and broke them — which made debugging things like JWT authorization over gRPC-Web impossible.

This version fixes that by reimplementing the extension as a pair of native gRPC-Web interceptors. Now you can include the debug interceptors alongside the other gRPC-Web interceptors in your chain, and it "just works".

I also added a new icon to indicate when a stream has ended (vs. the call returning).

Currently, a unary gRPC-Web callback uses the same internal gRPC-Web code path as a streaming call (as opposed to a unary promise). As a result, the unary callback appears as a streaming call in the debug panel.

NOTE: This is a breaking change.

NEW Usage

const devInterceptors = window.__GRPCWEB_DEVTOOLS__ || (() => {});
const {
  devToolsUnaryInterceptor,
  devToolsStreamInterceptor,
} = devInterceptors();

const opts = {
  unaryInterceptors: [devToolsUnaryInterceptor],
  streamInterceptors: [devToolsStreamInterceptor],
};
const client = new EchoServiceClient('http://myapi.com', null, opts);

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 devInterceptors = window.__GRPCWEB_DEVTOOLS__ || (() => {});
const {
  devToolsUnaryInterceptor,
  devToolsStreamInterceptor,
} = devInterceptors();

const opts = {
  unaryInterceptors: [devToolsUnaryInterceptor],
  streamInterceptors: [devToolsStreamInterceptor],
};
const client = new EchoServiceClient('http://myapi.com', null, opts);

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

protoc-gen-grpc-web v1.3.0 is bundled
(disabled temporarily pending arm64 macOS support)

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