https://github.com/libp2p/js-libp2p-devtools
A browser plugin that lets you inspect a running libp2p node
https://github.com/libp2p/js-libp2p-devtools
Last synced: 4 months ago
JSON representation
A browser plugin that lets you inspect a running libp2p node
- Host: GitHub
- URL: https://github.com/libp2p/js-libp2p-devtools
- Owner: libp2p
- Created: 2024-05-17T15:50:22.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-30T15:21:47.000Z (over 1 year ago)
- Last Synced: 2024-11-29T11:07:42.200Z (over 1 year ago)
- Language: TypeScript
- Size: 1.42 MB
- Stars: 6
- Watchers: 4
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> [!WARNING]
> This project is no longer maintained - please switch to [@ipshipyard/libp2p-devtools](https://github.com/ipshipyard/js-libp2p-inspector/tree/main/packages/libp2p-devtools) which is a drop-in replacement
# js-libp2p DevTools
> A browser plugin that lets you inspect a running libp2p node
A [DevTools](https://developer.chrome.com/docs/devtools) plugin that adds a "libp2p" tab to your developer tools that contacts a libp2p node running on the current page.
Works with [@libp2p/devtools-metrics](https://www.npmjs.com/package/@libp2p/devtools-metrics) which supplies metrics and allows us to interact with the running node.
## Installation instructions
### 1. Browser installation
Until this plugin is published on the relevant browser plugin stores, please run this locally.
1. Clone this repo
2. Run `npm i && npm run build`
3. Install as an unpacked/temporary add on for your browser:
- Chrome: [How to load an unpacked extension](https://knowledge.workspace.google.com/kb/load-unpacked-extensions-000005962)
- Firefox: [How to install temporary add-ons](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#installing)
### 2. App installation
Configure `@libp2p/devtools-metrics` as your metrics implementation:
```ts
import { createLibp2p } from 'libp2p'
import { devToolsMetrics } from '@libp2p/devtools-metrics'
const node = await createLibp2p({
metrics: devToolsMetrics(),
//... other options here
})
```
### 3. Permissions
With the move to Manifest v3, users must now [opt in](https://blog.mozilla.org/addons/2022/11/17/unified-extensions-button-and-how-to-handle-permissions-in-manifest-v3/) to running content scripts on a page.
#### Chrome
Please click the extensions button, then grant the extension permission to run:
#### Firefox
Please click the extensions button, then grant the extension permission to run:
### 4. Go!
Browse to your webapp and open the DevTools, you should see a "libp2p" tab towards the right hand side of the toolbar. Click it to see stats about the running node.
## What's next?
1. Tests
- There aren't a lot of tests here yet
2. Better UI
- It's quite rough
3. Graphs
- We don't do much with the collected metrics yet. It would be nice to use Chart.js or similar to show some useful graphs
- Bonus points for letting the user define their own graphs a la Grafana/Prometheus
- More bonus points for being able to export/import graph configs
4. Dynamic panels
- We should be able to inspect the libp2p node's configured services (or protocols?) and, for example, only show a DHT tab if the DHT is configured
5. Light theme support
- There are partial overrides for light theme font/background/border colours but we need better detection of when it's enabled
6. ??? more features here