OpenSumi DevTools

A Chrome DevTools Extension for any OpenSumi based IDE. (see Demo)

Web	Electron

Features

Currently OpenSumi DevTools focuses on messages capturing and presenting:

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

Users are allowed to:

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

Install

IMPORTANT: The devtools supports must be enabled in OpenSumi first, otherwise this extension won't work!

Users can install OpenSumi DevTools either from Chrome webstore or from a local folder.

Option 1: Install from Chrome webstore

This way is easier and more recommended.

Web client

1. Visit the extension in Chrome webstore and install it to your browser
2. Open DevTools in your page and you will see it!

Electron client

1. Install electron-devtools-installer to your project
2. In your Electron app's entry point do similar things like below:

import { app, session } from 'electron';
import installExtension from 'electron-devtools-installer';

import { ElectronMainApp } from '@opensumi/ide-core-electron-main';

const electronApp = new ElectronMainApp({
  ...
});

const OPENSUMI_DEVTOOLS_CHROME_WEBSTORE_ID = 'ombdblngipgeakodomcednfdiabohmgl';

electronApp.init().then(() => {
  ...
  app.whenReady().then(() => {
    installExtension(OPENSUMI_DEVTOOLS_CHROME_WEBSTORE_ID);
  });
});

3. Open DevTools in your app and you will see it!

Option 2: Install from a folder

In the following way, users can install other versions of OpenSumi DevTools except for the one that published in Chrome webstore.

Web client

1. Download opensumi-devtools-vx.x.x.zip from releases
2. Unzip it and get a folder
3. Vist chrome extensions page and check "Developer mode"
4. Click "Load unpacked extension" and select the folder
5. Open DevTools in your page and you will see it!

Electron client

1. Download opensumi-devtools-vx.x.x.zip from releases
2. Unzip it and get a folder
3. In your Electron app's entry point do similar things like below:

import { app, session } from 'electron';
import { ElectronMainApp } from '@opensumi/ide-core-electron-main';

const electronApp = new ElectronMainApp({
  ...
});

electronApp.init().then(() => {
  ...
  const opensumiDevtoolsPath = 'your unpacked folder path';
  session.defaultSession.loadExtension(opensumiDevtoolsPath);
});

4. Open DevTools in your app and you will see it!

Contributing

Please read CONTRIBUTING if you are new here or not familiar with the basic rules of Git/GitHub world.

Quickstart

1. git clone this repository

2. cd into this repository

3. yarn install

4. yarn run start

5. Load the freshly built unpacked extension on Chrome following:

   1. Access chrome://extensions/

   2. Check "Developer mode"

   3. Click on "Load unpacked extension"

   4. Select the "build" folder under the project root directory

   5. Keep "service worker" DevTools page open (why?)

6. Happy hacking!

Others

If you are interested in the early developing phase of this devtools, you can visit this issue and this branch.