Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jrapoport/grpc-web-devtools

Chrome & Firefox Browser extension to aid gRPC-Web development using native gRPC-Web interceptors.
https://github.com/jrapoport/grpc-web-devtools

chrome chrome-extension debugging-tool developer-tools devtools firefox firefox-extension grpc grpc-interceptor grpc-web javascript platform react streaming-call

Last synced: 2 months ago
JSON representation

Chrome & Firefox Browser extension to aid gRPC-Web development using native gRPC-Web interceptors.

Host: GitHub
URL: https://github.com/jrapoport/grpc-web-devtools
Owner: jrapoport
License: mit
Created: 2020-12-10T05:14:19.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2023-03-06T23:26:47.000Z (almost 2 years ago)
Last Synced: 2024-10-27T08:55:58.211Z (2 months ago)
Topics: chrome, chrome-extension, debugging-tool, developer-tools, devtools, firefox, firefox-extension, grpc, grpc-interceptor, grpc-web, javascript, platform, react, streaming-call
Language: JavaScript
Homepage:
Size: 5.19 MB
Stars: 29
Watchers: 2
Forks: 4
Open Issues: 17
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        # gRPC-Web Dev Tools: Interceptor Edition

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com) 

[![GitHub](https://img.shields.io/github/license/jrapoport/grpc-web-devtools?style=flat-square)](https://github.com/jrapoport/grpc-web-devtools/blob/master/LICENSE)

[![Buy Me A Coffee](https://img.shields.io/badge/buy%20me%20a%20coffee-☕-6F4E37?style=flat-square)](https://www.buymeacoffee.com/jrapoport)

![gRPC-Web Dev Tools](screenshots/store_light_dark.png)

Now supports dark mode.

# gRPC-Web Interceptor Support

This fork of [grpc-web-devtools](https://github.com/SafetyCulture/grpc-web-devtools)

adds support for native gRPC-Web interceptors.

[SafetyCulture's previous version](https://github.com/SafetyCulture/grpc-web-devtools) 

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

```javascript

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](https://chrome.google.com/webstore/detail/grpc-web-developer-tools/ddamlpimmiapbcopeoifjfmoabdbfbjj) (recommended)~~

or

1. build it with `make build`

1. open the **Extension Management** page by navigating to `chrome://extensions`.

1. enable **Developer Mode** by clicking the toggle switch next to "Developer mode".

1. Click the **LOAD UNPACKED** button and select the extension `./build` directory.

### Firefox

~~Via [Firefox Browser Add-Ons](https://addons.mozilla.org/en-US/firefox/addon/grpc-web-developer-tools/) (recommended)~~

or

1. build and package with `make package`

1. enter `about:debugging` in the URL bar of Firefox

1. click **This Firefox** > **Load Temporary Add-on...**

1. select the `grpc-web-devtools.zip` extention file

## Usage

```javascript

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:

```bash

make example-up

```

Example will be running on [http://localhost:8080](http://localhost:8080)

To stop the example:

```bash

make example-down

```