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.
- Browser installation
Until this plugin is published on the relevant browser plugin stores, please run this locally.
- Chrome: How to load an unpacked extension
- Firefox: How to install temporary add-ons
- App installation
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
})- That's it! 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.
With the move to Manifest v3, users must now opt in to running content scripts on a page.
This tiny green dot shows that granting permissions is required:
- 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 Graphana/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