| 1 | # @ipshipyard/libp2p-devtools |
| 2 | |
| 3 | [](https://codecov.io/gh/ipshipyard/js-libp2p-inspector) |
| 4 | [](https://github.com/ipshipyard/js-libp2p-inspector/actions/workflows/js-test-and-release.yml?query=branch%3Amain) |
| 5 | |
| 6 | > Browser DevTools plugin to inspect a libp2p node running on the current page |
| 7 | |
| 8 | # About |
| 9 | |
| 10 | <!-- |
| 11 | |
| 12 | !IMPORTANT! |
| 13 | |
| 14 | Everything in this README between "# About" and "# Install" is automatically |
| 15 | generated and will be overwritten the next time the doc generator is run. |
| 16 | |
| 17 | To make changes to this section, please update the @packageDocumentation section |
| 18 | of src/index.js or src/index.ts |
| 19 | |
| 20 | To experiment with formatting, please run "npm run docs" from the root of this |
| 21 | repo and examine the changes made. |
| 22 | |
| 23 | --> |
| 24 | |
| 25 | 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. |
| 26 | |
| 27 | Works with [@ipshipyard/libp2p-inspector-metrics](https://www.npmjs.com/package/@ipshipyard/libp2p-inspector-metrics) which supplies metrics and allows us to interact with the running node. |
| 28 | |
| 29 |  |
| 30 | |
| 31 | ## Installation instructions |
| 32 | |
| 33 | ### 1. Browser installation |
| 34 | |
| 35 | Until this plugin is published on the relevant browser plugin stores, please run this locally. |
| 36 | |
| 37 | 1. Clone this repo |
| 38 | 2. Run `npm i && npm run build` |
| 39 | 3. Install as an unpacked/temporary add on for your browser: |
| 40 | |
| 41 | - Chrome: [How to load an unpacked extension](https://knowledge.workspace.google.com/kb/load-unpacked-extensions-000005962) |
| 42 | - Firefox: [How to install temporary add-ons](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#installing) |
| 43 | |
| 44 | ### 2. App installation |
| 45 | |
| 46 | Configure `@ipshipyard/libp2p-inspector-metrics` as your metrics implementation: |
| 47 | |
| 48 | ```ts |
| 49 | import { createLibp2p } from 'libp2p' |
| 50 | import { inspectorMetrics } from '@ipshipyard/libp2p-inspector-metrics' |
| 51 | |
| 52 | const node = await createLibp2p({ |
| 53 | metrics: inspectorMetrics(), |
| 54 | //... other options her |
| 55 | }) |
| 56 | ``` |
| 57 | |
| 58 | ### 3. Permissions |
| 59 | |
| 60 | 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. |
| 61 | |
| 62 | #### Chrome |
| 63 | |
| 64 | Please click the extensions button, then grant the extension permission to run: |
| 65 | |
| 66 |  |
| 67 | |
| 68 | #### Firefox |
| 69 | |
| 70 | Please click the extensions button, then grant the extension permission to run: |
| 71 | |
| 72 |  |
| 73 | |
| 74 | ### 4. Go! |
| 75 | |
| 76 | 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. |
| 77 | |
| 78 | ## What's next? |
| 79 | |
| 80 | 1. Tests |
| 81 | |
| 82 | - There aren't a lot of tests here yet |
| 83 | |
| 84 | 2. Better UI |
| 85 | |
| 86 | - It's quite rough |
| 87 | |
| 88 | 3. Graphs |
| 89 | |
| 90 | - 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 |
| 91 | - Bonus points for letting the user define their own graphs a la Grafana/Prometheus |
| 92 | - More bonus points for being able to export/import graph configs |
| 93 | |
| 94 | 4. Dynamic panels |
| 95 | |
| 96 | - 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 |
| 97 | |
| 98 | 5. Light theme support |
| 99 | |
| 100 | - There are partial overrides for light theme font/background/border colors but we need better detection of when it's enabled |
| 101 | |
| 102 | 6. ??? more features here |
| 103 | |
| 104 | # License |
| 105 | |
| 106 | Licensed under either of |
| 107 | |
| 108 | - Apache 2.0, ([LICENSE-APACHE](https://github.com/ipshipyard/js-libp2p-inspector/blob/main/packages/libp2p-devtools/LICENSE-APACHE) / <http://www.apache.org/licenses/LICENSE-2.0>) |
| 109 | - MIT ([LICENSE-MIT](https://github.com/ipshipyard/js-libp2p-inspector/blob/main/packages/libp2p-devtools/LICENSE-MIT) / <http://opensource.org/licenses/MIT>) |
| 110 | |
| 111 | # Contribution |
| 112 | |
| 113 | Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions. |