Is there some possibilities to integrate with grpc-web-devtools or chrome devtools?

I was trying something like this:

const transport = new GrpcWebFetchTransport({
  baseUrl: "localhost:3000"
});

const client = new HaberdasheryClient(transport);

const enableDevTools = window.__GRPCWEB_DEVTOOLS__ || (() => {});
enableDevTools([client]);

But I’ve got an error: TypeError: Cannot read properties of undefined (reading 'rpcCall')

[someden]

Simple example of partial integration with grpc-web-devtools:

interceptors: [
  {
    interceptUnary(next, method, input, options) {
      const call = next(method, input, options);
      const methodFullPath = `${options.baseUrl}/${method.service.typeName}/${method.name}`;
      const methodType = 'unary';

      call.then(
        (finishedUnaryCall) => {
          window.postMessage(
            {
              type: '__GRPCWEB_DEVTOOLS__',
              method: methodFullPath,
              methodType,
              request: finishedUnaryCall.request,
              response: finishedUnaryCall.response,
            },
            '*'
          );

          return finishedUnaryCall;
        },
        (error) => {
          window.postMessage(
            {
              type: '__GRPCWEB_DEVTOOLS__',
              method: methodFullPath,
              methodType,
              request: call.request,
              error: {
                ...error,
                message: error.message,
              },
            },
            '*'
          );
        }
      );

      return call;
    },
    interceptServerStreaming(next, method, input, options) {
      const call = next(method, input, options);
      const methodFullPath = `${options.baseUrl}/${method.service.typeName}/${method.name}`;
      const methodType = 'server_streaming';

      window.postMessage({
        type: '__GRPCWEB_DEVTOOLS__',
        method: methodFullPath,
        methodType,
        request: call.request,
      });

      call.responses.onMessage((message) => {
        window.postMessage(
          {
            type: '__GRPCWEB_DEVTOOLS__',
            method: methodFullPath,
            methodType,
            response: message,
          },
          '*'
        );
      });

      call.responses.onError((error) => {
        window.postMessage(
          {
            type: '__GRPCWEB_DEVTOOLS__',
            method: methodFullPath,
            methodType,
            error: {
              ...error,
              message: error.message,
            },
          },
          '*'
        );
      });

      call.responses.onComplete(() => {
        window.postMessage(
          {
            type: '__GRPCWEB_DEVTOOLS__',
            method: methodFullPath,
            methodType,
            response: 'EOF',
          },
          '*'
        );
      });

      return call;
    },
  },
],

[timostamm]

grpc-web interceptors are specific to grpc-web. Our interceptors apply to all transports.