A DevTools extension for Piral instances and their pilets.
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.
We placed a quick introduction video on YouTube.
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
You'll need the following tools:
- Node.js (at least version 18)
- npm (usually comes with Node.js)
- git
- A command line interpreter
For building the solution the following steps should be followed.
- Clone the repository
- Run
npm install
in the cloned repository - If you want to build / publish run either
npm build:firefox
to build for Firefoxnpm build:opera
to build for Operanpm build:chrome
to build for Chromenpm build:edge
to build for Edge
- If you want to develop run either
npm watch:firefox
to watch for Firefoxnpm watch:opera
to watch for Operanpm watch:chrome
to watch for Chromenpm watch:edge
to watch for Edge
- Deploying requires having all the secrets in environment variables
All source files are available in the src
folder.
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:
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.
The code is licensed under the MIT license.