Via the Chrome Web Store ( recommended)
or
- build it with
make build
- open the Extension Management page by navigating to
chrome:https://extensions
. - enable Developer Mode by clicking the toggle switch next to "Developer mode".
- Click the LOAD UNPACKED button and select the extension
./build
directory.
Via Firefox Browser Add-Ons (recommended)
or
- build and package with
make package
- enter
about:debugging
in the URL bar of Firefox - click This Firefox > Load Temporary Add-on...
- select the
grpc-web-devtools.zip
extention file
const enableDevTools = window.__GRPCWEB_DEVTOOLS__ || (() => {
});
const client = new EchoServiceClient('https://myapi.com');
enableDevTools([
client,
]);
NOTE: Requires that your generated client(s) use
protoc-gen-grpc-web
>= 1.0.4
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 https://localhost:8080
To stop the example:
make example-down
grpc-web-devtools now also supports connect-web!
// __CONNECT_WEB_DEVTOOLS__ is loaded in as a script, so it is not guaranteed to be loaded before your code.
const interceptors: Interceptor[] = window.__CONNECT_WEB_DEVTOOLS__ !== "undefined" ?
[window.__CONNECT_WEB_DEVTOOLS__]
: [];
// To get around the fact that __CONNECT_WEB_DEVTOOLS__ might not be loaded, we can listen for a custom event,
// and then push the interceptor to our array once loaded.
window.addEventListener("connect-web-dev-tools-ready", () => {
if (typeof window.__CONNECT_WEB_DEVTOOLS__ !== "undefined") {
interceptors.push(window.__CONNECT_WEB_DEVTOOLS__);
}
});
// Now we can use the interceptors in our transport
const transport: Transport = createGrpcWebTransport({
baseUrl: getApiHostname(),
interceptors,
});
This will also work for the connect protocol
const transport: Transport = ConnectTransportOptions({
baseUrl: getApiHostname(),
interceptors,
});