glass-easel DevTools

DevTools for debugging glass-easel applications.

An 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).

However, it can also be integrated into other JS environments.

Installation

Easy Installation

For Chrome, install from the Chrome web store.

For Firefox, install from the add-ons center.

Manual Installation

If you want a pre-release build, see releases for the latest builds.

For Chrome:

download the corresponding zip file;
unzip it;
go to chrome://extensions/, enable developer mode, and click load unpacked to load the unzipped directory.

For Firefox:

download the corresponding zip file;
unzip it;
go to about:debugging#/runtime/this-firefox, and load temporary add-on to load the unzipped directory.

Usage

Use Dev Builds of glass-easel

Firstly, the dev builds of glass-easel (version >= 0.9.0) should be used. By default, the glass-easel is built in production mode, which does not contain debug interfaces.

If you are using webpack, the best way to use the dev builds is adding following configuration into your webpack.config.js :

{
  resolve: {
    alias: {
      "glass-easel": "glass-easel/dist/glass_easel.dev.all.es.js"
    }
  }
}

This 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.

If 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" .

Open the Browser DevTools

In the browser DevTools (F12), there should be a glass-easel panel.

If there is any mount point created by dev builds of glass-easel, it will be shown in the tree view.

Development Guide

After git clone, run pnpm install to do basic setup.

The Core Modules

The core modules are glass-easel-devtools-agent and glass-easel-devtools-panel , i.e. an agent and a panel.

The 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.

The 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".

To build these two modules:

run npm run build in agent directory;
run npm run build in panel directory.

While development, run npm run dev instead (more debug logs and webpack will watch changes).

These two modules are also available as npm public packages.

The Extension

The extension glass-easel-devtools-extension is a wrapper for both the agent and the panel. It acts as an Chrome/Firefox extension.

Run npm run build in extension directory to build the extension.
Then the directory can be loaded as an browser extension.

In Chrome, open chrome://extensions/ and load this extracted extension.
In Firefox, open about:debugging#/runtime/this-firefox and temporarily load this extension.

This extension appears in DevTools (F12) in every web pages.

While development, run npm run dev instead.

Shortcut 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).

The Standalone Usage

The agent and the panel can also be loaded as common JS modules. The examples/standalone is an example that shows how to use them.

Run npm run build in examples/miniprogram directory to build a glass-easel application for debugging.
Run npm run build in examples/standalone directory.
Open the examples/standalone/index.html (may need a web server to host the directory).

Note: this does not work if your browser has the extension enabled (disable the extension in your browser first).