{"id":19438316,"url":"https://github.com/opensumi/devtools","last_synced_at":"2025-04-24T22:31:09.943Z","repository":{"id":60680529,"uuid":"528236549","full_name":"opensumi/devtools","owner":"opensumi","description":"A Chrome DevTools Extension for OpenSumi.","archived":false,"fork":false,"pushed_at":"2024-04-22T07:46:56.000Z","size":284,"stargazers_count":9,"open_issues_count":1,"forks_count":2,"subscribers_count":23,"default_branch":"main","last_synced_at":"2024-04-22T08:55:55.987Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/opensumi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-08-24T02:29:34.000Z","updated_at":"2024-04-22T08:36:03.000Z","dependencies_parsed_at":"2024-04-22T08:58:25.907Z","dependency_job_id":null,"html_url":"https://github.com/opensumi/devtools","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensumi%2Fdevtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensumi%2Fdevtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensumi%2Fdevtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensumi%2Fdevtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opensumi","download_url":"https://codeload.github.com/opensumi/devtools/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223968417,"owners_count":17233482,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T15:17:52.031Z","updated_at":"2024-11-10T15:17:52.655Z","avatar_url":"https://github.com/opensumi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OpenSumi DevTools\n\nA Chrome DevTools Extension for any [OpenSumi](https://github.com/opensumi/core) based IDE. (see [Demo](https://user-images.githubusercontent.com/32434520/192297610-208f1332-76cd-4776-b75c-53981dfd1eb1.gif))\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth width=\"50%\"\u003eWeb\u003c/th\u003e\n      \u003cth width=\"50%\"\u003eElectron\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003cimg\n          src=\"https://user-images.githubusercontent.com/32434520/192236137-fa3495a7-3999-416c-ad59-9a6aa8a2e2d0.png\"\n        /\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg\n          src=\"https://user-images.githubusercontent.com/32434520/192235671-52dfe310-21a6-40f9-8c39-1582daddfc30.png\"\n        /\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Features\n\nCurrently OpenSumi DevTools focuses on messages capturing and presenting:\n\n- [x] RPC messages between frontend and backend\n- [x] IPC messages between Electron processes (Electron client only)\n\nUsers are allowed to:\n\n- [x] Toggle capturing\n- [x] Filter messages\n- [x] View parsed messages\n- [x] Check communication traffic\n- [x] Check network latency\n\n## Install\n\n\u003e IMPORTANT: The devtools supports must be [enabled](https://opensumi.com/en/docs/integrate/browser-extension/opensumi-devtools#integrate) in OpenSumi first, otherwise this extension won't work!\n\nUsers can install OpenSumi DevTools either from **Chrome webstore** or from **a local folder**.\n\n### Option 1: Install from Chrome webstore\n\nThis way is easier and more recommended.\n\n**Web client**\n\n1. Visit the extension in [Chrome webstore](https://chrome.google.com/webstore/detail/opensumi-devtools/ombdblngipgeakodomcednfdiabohmgl) and install it to your browser\n2. Open DevTools in your page and you will see it!\n\n**Electron client**\n\n1. Install [electron-devtools-installer](https://www.npmjs.com/package/electron-devtools-installer) to your project\n2. In your Electron app's entry point do similar things like below:\n\n```javascript\nimport { app, session } from 'electron';\nimport installExtension from 'electron-devtools-installer';\n\nimport { ElectronMainApp } from '@opensumi/ide-core-electron-main';\n\nconst electronApp = new ElectronMainApp({\n  ...\n});\n\nconst OPENSUMI_DEVTOOLS_CHROME_WEBSTORE_ID = 'ombdblngipgeakodomcednfdiabohmgl';\n\nelectronApp.init().then(() =\u003e {\n  ...\n  app.whenReady().then(() =\u003e {\n    installExtension(OPENSUMI_DEVTOOLS_CHROME_WEBSTORE_ID);\n  });\n});\n```\n3. Open DevTools in your app and you will see it!\n\n### Option 2: Install from a folder\n\nIn the following way, users can install other versions of OpenSumi DevTools except for the one that published in Chrome webstore.\n\n**Web client**\n\n1. Download `opensumi-devtools-vx.x.x.zip` from [releases](https://github.com/opensumi/devtools/releases)\n2. Unzip it and get a folder\n3. Vist chrome [extensions](chrome://extensions/) page and check \"Developer mode\"\n4. Click \"Load unpacked extension\" and select the folder\n5. Open DevTools in your page and you will see it!\n\n**Electron client**\n\n1. Download `opensumi-devtools-vx.x.x.zip` from [releases](https://github.com/opensumi/devtools/releases)\n2. Unzip it and get a folder\n3. In your Electron app's entry point do similar things like below:\n\n```javascript\nimport { app, session } from 'electron';\nimport { ElectronMainApp } from '@opensumi/ide-core-electron-main';\n\nconst electronApp = new ElectronMainApp({\n  ...\n});\n\nelectronApp.init().then(() =\u003e {\n  ...\n  const opensumiDevtoolsPath = 'your unpacked folder path';\n  session.defaultSession.loadExtension(opensumiDevtoolsPath);\n});\n```\n4. Open DevTools in your app and you will see it!\n\n## Contributing\n\nPlease read [CONTRIBUTING](./CONTRIBUTING.md) if you are new here or not familiar with the basic rules of Git/GitHub world.\n\n### Quickstart\n\n1. `git clone` this repository\n\n2. `cd` into this repository\n\n3. `yarn install`\n\n4. `yarn run start`\n\n5. Load the freshly built unpacked extension on Chrome following:\n\n   1. Access chrome://extensions/\n\n   2. Check \"Developer mode\"\n\n   3. Click on \"Load unpacked extension\"\n\n   4. Select the \"build\" folder under the project root directory\n\n   5. Keep \"service worker\" DevTools page open ([why?](https://github.com/hypertrons/hypertrons-crx/pull/274#discussion_r811878203))\n\n6. Happy hacking!\n\n## Others\n\nIf you are interested in the early developing phase of this devtools, you can visit [this issue](https://github.com/opensumi/core/issues/1098) and [this branch](https://github.com/tyn1998/opensumi-devtools/tree/main-backup).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopensumi%2Fdevtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopensumi%2Fdevtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopensumi%2Fdevtools/lists"}