{"id":18938224,"url":"https://github.com/wechat-miniprogram/glass-easel-devtools","last_synced_at":"2025-07-08T11:05:28.890Z","repository":{"id":252789550,"uuid":"819941980","full_name":"wechat-miniprogram/glass-easel-devtools","owner":"wechat-miniprogram","description":"DevTools extension for glass-easel","archived":false,"fork":false,"pushed_at":"2025-06-18T07:46:25.000Z","size":343,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-18T08:29:20.641Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/wechat-miniprogram.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-06-25T13:36:23.000Z","updated_at":"2025-06-18T07:46:29.000Z","dependencies_parsed_at":"2024-09-10T13:58:31.472Z","dependency_job_id":"4cd6ece8-1193-4898-8ac7-b2f087fcd4f1","html_url":"https://github.com/wechat-miniprogram/glass-easel-devtools","commit_stats":null,"previous_names":["wechat-miniprogram/glass-easel-devtools"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/wechat-miniprogram/glass-easel-devtools","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fglass-easel-devtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fglass-easel-devtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fglass-easel-devtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fglass-easel-devtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wechat-miniprogram","download_url":"https://codeload.github.com/wechat-miniprogram/glass-easel-devtools/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fglass-easel-devtools/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264257654,"owners_count":23580469,"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-08T12:13:45.379Z","updated_at":"2025-07-08T11:05:28.883Z","avatar_url":"https://github.com/wechat-miniprogram.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/wechat-miniprogram/glass-easel/blob/master/logo_256.png\" style=\"width: 128px\" /\u003e\n\u003c/p\u003e\n\n# glass-easel DevTools\n\nDevTools for debugging [glass-easel](https://github.com/wechat-miniprogram/glass-easel) applications.\n\nAn important usage is to run as a browser DevTools extension. Install the extension in the browser, and it will add a `glass-easel` panel in the browser DevTools (F12).\n\nHowever, it can also be integrated into other JS environments.\n\n\n## Installation\n\n### Easy Installation\n\nFor Chrome, [install from the Chrome web store](https://chromewebstore.google.com/detail/glass-easel-devtools/oojokbffoladmkgochnnchnngjefidfd).\n\nFor Firefox, [install from the add-ons center](https://addons.mozilla.org/zh-CN/firefox/addon/glass-easel-devtools/).\n\n### Manual Installation\n\nIf you want a pre-release build, see [releases](https://github.com/wechat-miniprogram/glass-easel-devtools/releases) for the latest builds.\n\nFor Chrome:\n\n1. download the corresponding zip file;\n1. unzip it;\n1. go to [chrome://extensions/](chrome://extensions/), enable developer mode, and click *load unpacked* to load the unzipped directory.\n\nFor Firefox:\n\n1. download the corresponding zip file;\n1. unzip it;\n1. go to [about:debugging#/runtime/this-firefox](about:debugging#/runtime/this-firefox), and *load temporary add-on* to load the unzipped directory.\n\n\n## Usage\n\n### Use Dev Builds of glass-easel\n\nFirstly, the dev builds of glass-easel (version \u003e= 0.9.0) should be used. By default, the glass-easel is built in production mode, which does not contain debug interfaces.\n\nIf you are using webpack, the best way to use the dev builds is adding following configuration into your `webpack.config.js` :\n\n```js\n{\n  resolve: {\n    alias: {\n      \"glass-easel\": \"glass-easel/dist/glass_easel.dev.all.es.js\"\n    }\n  }\n}\n```\n\nThis tells webpack to use the dev builds of glass-easel. Webpack will automatically replace all `import \"glass-easel\"` to `import \"glass-easel/dist/glass_easel.dev.all.es.js\"` under the hood.\n\nIf you are not using webpack, you can manually modify the code - `import \"glass-easel/dist/glass_easel.dev.all.es.js\"` instead of `import \"glass-easel\"` .\n\n### Open the Browser DevTools\n\nIn the browser DevTools (F12), there should be a *glass-easel* panel.\n\nIf there is any mount point created by dev builds of glass-easel, it will be shown in the tree view.\n\n\n## Development Guide\n\nAfter git clone, run `pnpm install` to do basic setup.\n\n### The Core Modules\n\nThe core modules are `glass-easel-devtools-agent` and `glass-easel-devtools-panel` , i.e. an agent and a panel.\n\nThe agent is an information extractor that should work along with glass-easel. The glass-easel dist should be built in development mode (i.e. `glass_easel.dev.all.es.js` ) and the agent can extract neccessary information from the glass-easel node tree.\n\nThe panel is the front end to display the information extracted by the agent. It can work in an independent environment, as long as it can communicate with the panel through a \"message channel\".\n\nTo build these two modules:\n\n1. run `npm run build` in `agent` directory;\n1. run `npm run build` in `panel` directory.\n\nWhile development, run `npm run dev` instead (more debug logs and webpack will watch changes).\n\nThese two modules are also available as npm public packages.\n\n### The Extension\n\nThe extension `glass-easel-devtools-extension` is a wrapper for both the agent and the panel. It acts as an Chrome/Firefox extension.\n\n1. Run `npm run build` in `extension` directory to build the extension.\n1. Then the directory can be loaded as an browser extension.\n  * In Chrome, open `chrome://extensions/` and load this extracted extension.\n  * In Firefox, open `about:debugging#/runtime/this-firefox` and temporarily load this extension.\n\nThis extension appears in DevTools (F12) in every web pages.\n\nWhile development, run `npm run dev` instead.\n\nShortcut scripts: `npm run build` in the project root do all subdirectory builds; `npm run pack-extension` do all complete builds and pack the extension packages (output to `extension/pkg`).\n\n### The Standalone Usage\n\nThe agent and the panel can also be loaded as common JS modules. The `examples/standalone` is an example that shows how to use them.\n\n1. Run `npm run build` in `examples/miniprogram` directory to build a glass-easel application for debugging.\n1. Run `npm run build` in `examples/standalone` directory.\n1. Open the `examples/standalone/index.html` (may need a web server to host the directory).\n\nNote: this does not work if your browser has the extension enabled (disable the extension in your browser first).\n\nWhile development, run `npm run dev` instead.\n\nWhen developing the agent and the panel, the standalone environment is more convinient.\n\nShortcut scripts: `npm run dev` in the project root do all development builds above and keep watching.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwechat-miniprogram%2Fglass-easel-devtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwechat-miniprogram%2Fglass-easel-devtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwechat-miniprogram%2Fglass-easel-devtools/lists"}