https://github.com/smapiot/piral-inspector
A DevTools extension for Piral instances and their pilets. :hammer:
https://github.com/smapiot/piral-inspector
chrome-devtools chrome-extension debugging-tool hacktoberfest microfrontends piral react typescript
Last synced: 10 months ago
JSON representation
A DevTools extension for Piral instances and their pilets. :hammer:
- Host: GitHub
- URL: https://github.com/smapiot/piral-inspector
- Owner: smapiot
- License: mit
- Created: 2020-01-15T13:37:39.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-12-04T11:48:05.000Z (over 1 year ago)
- Last Synced: 2025-07-14T14:06:44.057Z (11 months ago)
- Topics: chrome-devtools, chrome-extension, debugging-tool, hacktoberfest, microfrontends, piral, react, typescript
- Language: TypeScript
- Homepage: https://piral.io
- Size: 2.45 MB
- Stars: 16
- Watchers: 3
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://piral.io)
# [Piral Inspector](https://piral.io) · [](https://github.com/smapiot/piral-inspector/blob/main/LICENSE) [](https://github.com/smapiot/piral-inspector/releases) [](https://github.com/smapiot/piral-inspector/issues) [](https://gitter.im/piral-io/community) [](https://cla-assistant.io/smapiot/piral)
A DevTools extension for Piral instances and their pilets.
## Download Links
- [Firefox Add-Ons](https://addons.mozilla.org/en-US/firefox/addon/piral-inspector/)
- [Chrome Marketplace](https://chrome.google.com/webstore/detail/piral-inspector/ikbpelpjfgmplidagknaaegjhfigcbfl)
- [Opera Addons](https://addons.opera.com/en/extensions/details/piral-inspector/)
- [Edge Extensions](https://microsoftedge.microsoft.com/addons/detail/piral-inspector/hbdhpkhidilkmkbkklcbjgddbeodibml)
## 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.
[](http://www.youtube.com/watch?v=8CE7_X01NmM "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:
The singleton [background script](./src/serviceWorker.ts) 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](./src/contentScript.ts), which knows how to talk to the Piral Debug API.
The Piral Debug API comes from the [piral-debug-utils](https://www.npmjs.com/package/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](./src/scripts/legacy/worker.ts) 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](./src/public/devtools.html). Mainly, it is driven by [message exchange with the background script](./src/devtools.ts). 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](./LICENSE).