A browser plugin that lets you inspect a running libp2p node
A 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 which supplies metrics and allows us to interact with the running node.
Until this plugin is published on the relevant browser plugin stores, please run this locally.
- Clone this repo
- Run
npm i && npm run build - Install as an unpacked/temporary add on for your browser:
- Chrome: How to load an unpacked extension
- Firefox: How to install temporary add-ons
Configure @libp2p/devtools-metrics as your metrics implementation:
import { createLibp2p } from 'libp2p'
import { devToolsMetrics } from '@libp2p/devtools-metrics'
const node = await createLibp2p({
metrics: devToolsMetrics(),
//... other options here
})With the move to Manifest v3, users must now opt in to running content scripts on a page.
Please click the extensions button, then grant the extension permission to run:
Please click the extensions button, then grant the extension permission to run:
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.
- Tests
- There aren't a lot of tests here yet
- Better UI
- It's quite rough
- 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
- 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
- Light theme support
- There are partial overrides for light theme font/background/border colours but we need better detection of when it's enabled
- ??? more features here