Now supports dark mode.
This extension is no longer under active development, but any Pull Request will be reviewed and new versions will be published to the Chrome Web Store if they are approved.
Via the Chrome Web Store ( recommended)
or
- build it with
make build - open the Extension Management page by navigating to
chrome://extensions. - enable Developer Mode by clicking the toggle switch next to "Developer mode".
- Click the LOAD UNPACKED button and select the extension
./builddirectory.
Via Firefox Browser Add-Ons (recommended)
or
- build and package with
make package - enter
about:debuggingin the URL bar of Firefox - click This Firefox > Load Temporary Add-on...
- select the
grpc-web-devtools.zipextention file
const enableDevTools = window.__GRPCWEB_DEVTOOLS__ || (() => {
});
const client = new EchoServiceClient('http://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-upExample will be running on http://localhost:8080
To stop the example:
make example-downgrpc-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,
});You can provide a custom toJson function to control how messages are serialized:
// Define your custom serialization function
const customToJson = (message) => {
// Your custom serialization logic here
// For example, you might want to format dates differently or exclude certain fields
return {
...message.toJson(),
customField: 'customValue',
};
};
// Create an interceptor with your custom toJson function
const interceptors: Interceptor[] = typeof window.__CREATE_CONNECT_WEB_DEVTOOLS__ !== "undefined" ?
[window.__CREATE_CONNECT_WEB_DEVTOOLS__(customToJson)]
: [];
// To get around the fact that __CREATE_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.__CREATE_CONNECT_WEB_DEVTOOLS__ !== "undefined") {
interceptors.push(window.__CREATE_CONNECT_WEB_DEVTOOLS__(customToJson));
}
});
// Use the interceptors in your transport
const transport: Transport = createGrpcWebTransport({
baseUrl: getApiHostname(),
interceptors,
});