gRPC-Web Dev Tools使用

原本的方式

由于gRPC-Web 的请求方式不同,在浏览器中的请求往往看不到实际的返回,而是Base 64 编码的形式返回:

图1-1

图1-1

在原来的方法里,如果想要查看一个gRPC的返回或错误信息,需要在代码中输出信息,一般是:

  1. Interceptor 部分输出返回信息
  2. 请求代码 部分 输出data.toObject**() 信息**
  3. new Client 部分 setState 输出 request 信息

grpc-web-devtools 方式

grpc-web-devtools 采用插件的形式,在代码中获取到插件写入到浏览里的 window.__GRPCWEB_DEVTOOLS__ 对象 ,在将创建后的gRPC Client 传入其中:

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

但是这会导致一个问题,在实际应用中,gPRC的请求必然会携带一些请求信息,例如 token ID 之类的参数.

但是 grpc-web-devtools 会覆盖掉原有的拦截器,虽然在devtools中可以看到请求的发生,但是由于拦截器中的请求信息被覆盖,所以请求一直是失败的:

图1-2

图1-2

图1-3

图1-3

可以看到,图1-1 和 图1-3的区别,是缺少 Authentication 字段,拦截器里的请求参数确实覆盖了.所以需要另一种方式,幸好github里已经有人讨论,并解决了.

gRPC-Web Dev Tools: Interceptor Edition