/piral-inspector

A DevTools extension for Piral instances and their pilets. :hammer:

Primary LanguageTypeScriptMIT LicenseMIT

Piral Logo

A DevTools extension for Piral instances and their pilets.

Download Links

Description

This simple devtools extension lets you inspect and manipulate your Piral instance for debugging purposes. It only works when either debugging a Piral instance or running a pilet in an emulator version of a Piral instance.

Introductory Video

We placed a quick introduction video on YouTube.

Piral Inspector

Functionality

Right now the Piral Inspector comes with the following set of functionality:

  • Detection of the running Piral instance (name, version)
  • See and call the registered routes
  • See and unload the loaded pilets
  • Look at the used dependencies
  • Inspect the available extensions
  • Toggle global settings such as state container logging
  • Load new pilets from their root module URL
  • Load new pilets from a given feed URL
  • Load new pilets from a tarball

How to Build

You'll need the following tools:

  1. Node.js (at least version 18)
  2. npm (usually comes with Node.js)
  3. git
  4. A command line interpreter

For building the solution the following steps should be followed.

  1. Clone the repository
  2. Run npm install in the cloned repository
  3. If you want to build / publish run either
    • npm build:firefox to build for Firefox
    • npm build:opera to build for Opera
    • npm build:chrome to build for Chrome
    • npm build:edge to build for Edge
  4. If you want to develop run either
    • npm watch:firefox to watch for Firefox
    • npm watch:opera to watch for Opera
    • npm watch:chrome to watch for Chrome
    • npm watch:edge to watch for Edge
  5. Deploying requires having all the secrets in environment variables

All source files are available in the src folder.

Architecture

The extension follows the general guidelines for building browser extensions that send and retrieve information from a website in a dev tools panel. The architecture looks as follows:

Architecture

The singleton background script is the exchange driver between a website and the dev tools panel. The website (restricted to localhost, i.e., Piral instances in development, as well as pilets) can be accessed through the content script, which knows how to talk to the Piral Debug API.

The Piral Debug API comes from the piral-debug-utils npm package. Right now its quite flexible and fully message based. However, in the past this has been achieved from the Piral Inspector itself. In order to still support such older Piral instances the legacy API is still part of the Piral Inspector (the support for this was removed in Piral Inspector 0.11).

The dev tools panel is a small web app. Mainly, it is driven by message exchange with the background script. As such when a panel opens it sends a message to the website (via the background script) to get the initial state.

License

The code is licensed under the MIT license.