{"id":22270107,"url":"https://github.com/libp2p/js-libp2p-devtools","last_synced_at":"2026-03-02T13:42:32.221Z","repository":{"id":240270777,"uuid":"802144837","full_name":"libp2p/js-libp2p-devtools","owner":"libp2p","description":"A browser plugin that lets you inspect a running libp2p node","archived":false,"fork":false,"pushed_at":"2024-09-30T15:21:47.000Z","size":1490,"stargazers_count":6,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-11-29T11:07:42.200Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/libp2p.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-17T15:50:22.000Z","updated_at":"2024-11-26T10:46:05.000Z","dependencies_parsed_at":"2024-05-21T12:54:09.835Z","dependency_job_id":"1ba1de10-2e73-4952-a96a-52265ede7689","html_url":"https://github.com/libp2p/js-libp2p-devtools","commit_stats":null,"previous_names":["ipfs-shipyard/js-libp2p-devtools","libp2p/js-libp2p-devtools"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/libp2p%2Fjs-libp2p-devtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/libp2p%2Fjs-libp2p-devtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/libp2p%2Fjs-libp2p-devtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/libp2p%2Fjs-libp2p-devtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/libp2p","download_url":"https://codeload.github.com/libp2p/js-libp2p-devtools/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227914258,"owners_count":17839245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-03T12:07:19.880Z","updated_at":"2025-10-25T11:19:22.515Z","avatar_url":"https://github.com/libp2p.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e [!WARNING]  \n\u003e 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\n\n# js-libp2p DevTools\n\n\u003e A browser plugin that lets you inspect a running libp2p node\n\nA [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.\n\nWorks with [@libp2p/devtools-metrics](https://www.npmjs.com/package/@libp2p/devtools-metrics) which supplies metrics and allows us to interact with the running node.\n\n\u003cimg width=\"840\" alt=\"image\" src=\"https://github.com/ipfs-shipyard/js-libp2p-devtools/assets/665810/f8f6a7c8-377f-41d6-948f-95d8469f58b8\"\u003e\n\n## Installation instructions\n\n### 1. Browser installation\n\nUntil this plugin is published on the relevant browser plugin stores, please run this locally.\n\n1. Clone this repo\n2. Run `npm i \u0026\u0026 npm run build`\n3. Install as an unpacked/temporary add on for your browser:\n    - Chrome: [How to load an unpacked extension](https://knowledge.workspace.google.com/kb/load-unpacked-extensions-000005962)\n    - Firefox: [How to install temporary add-ons](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#installing)\n\n### 2. App installation\n\nConfigure `@libp2p/devtools-metrics` as your metrics implementation:\n\n```ts\nimport { createLibp2p } from 'libp2p'\nimport { devToolsMetrics } from '@libp2p/devtools-metrics'\n\nconst node = await createLibp2p({\n  metrics: devToolsMetrics(),\n  //... other options here\n})\n```\n\n### 3. Permissions\n\nWith 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.\n\n#### Chrome\n\nPlease click the extensions button, then grant the extension permission to run:\n\n\u003cimg src=\"public/img/grant-permissions-light-chrome.png\" width=\"700\"/\u003e\n\n#### Firefox\n\nPlease click the extensions button, then grant the extension permission to run:\n\n\u003cimg src=\"public/img/grant-permissions-light-firefox.png\" width=\"700\"/\u003e\n\n### 4. Go!\n\nBrowse 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.\n\n## What's next?\n\n1. Tests\n  - There aren't a lot of tests here yet\n2. Better UI\n  - It's quite rough\n3. Graphs\n  - 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\n  - Bonus points for letting the user define their own graphs a la Grafana/Prometheus\n  - More bonus points for being able to export/import graph configs\n4. Dynamic panels\n  - 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\n5. Light theme support\n  - There are partial overrides for light theme font/background/border colours but we need better detection of when it's enabled\n6. ??? more features here\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flibp2p%2Fjs-libp2p-devtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flibp2p%2Fjs-libp2p-devtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flibp2p%2Fjs-libp2p-devtools/lists"}