OpenSumi DevTools

A Chrome DevTools Extension for any OpenSumi based IDE, with support for both Web clients and Electron clients.

OpenSumi DevTools Gif

GitHub:https://github.com/opensumi/devtools

Features

Currently OpenSumi DevTools focuses on inner messages capturing and presenting:

  • RPC messages between frontend and backend
  • IPC messages(partial) between Electron processes (Electron client only)

Users are allowed to:

  • Toggle capturing
  • Filter messages
  • View parsed messages
  • Check communication traffic
  • Check network latency

Install

See the Install section of README.

Integrate

The installed extension works only when the devtools supports are enabled first. Several options have been provided to allow integrators to decide if the devtools supports are enabled in OpenSumi.

Web client

The ClientApp of the core-browser package is provided for integrators to bootstrap their Web IDEs. Now we have added a devtools option to AppConfig. So integrators are allowed to toggle the devtools support for Web clients like this example.

export interface AppConfig {
  ...
  /**
   * If enable the support for OpenSumi DevTools
   * The default is false
   */
  devtools?: boolean;
}

Electron client

At the moment, OpenSumi DevTools captures IPC messages in Renderer processes side only. Since Renderer processes also depend on the core-browser package to initialize apps, integrators just need to enable devtools support in core-browser side (see this) like they do for Web clients.