Skip to content

Latest commit

 

History

History
111 lines (78 loc) · 3.49 KB

README.md

File metadata and controls

111 lines (78 loc) · 3.49 KB
Raw

gRPC-Web Dev Tools: Interceptor Edition

PRs Welcome GitHub

Buy Me A Coffee

gRPC-Web Dev Tools 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