{"id":16525773,"url":"https://github.com/thetarnav/solid-devtools","last_synced_at":"2025-05-14T08:09:37.196Z","repository":{"id":37026428,"uuid":"487872705","full_name":"thetarnav/solid-devtools","owner":"thetarnav","description":"Library of developer tools, reactivity debugger \u0026 Devtools Chrome extension for visualizing SolidJS reactivity graph","archived":false,"fork":false,"pushed_at":"2025-04-02T08:59:46.000Z","size":5787,"stargazers_count":598,"open_issues_count":22,"forks_count":28,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-12T01:59:17.873Z","etag":null,"topics":["chrome-extension","debugger","devtools","solid-js"],"latest_commit_sha":null,"homepage":"https://chrome.google.com/webstore/detail/solid-devtools/kmcfjchnmmaeeagadbhoofajiopoceel","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thetarnav.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2022-05-02T14:20:17.000Z","updated_at":"2025-05-03T17:08:04.000Z","dependencies_parsed_at":"2024-04-08T20:25:41.535Z","dependency_job_id":"e744899f-97e9-48a5-ad0e-061b900bbb49","html_url":"https://github.com/thetarnav/solid-devtools","commit_stats":{"total_commits":1373,"total_committers":12,"mean_commits":"114.41666666666667","dds":"0.10560815731973783","last_synced_commit":"a9c23a428d5639bf138ac2f5793fc57b8eef9136"},"previous_names":[],"tags_count":433,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetarnav%2Fsolid-devtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetarnav%2Fsolid-devtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetarnav%2Fsolid-devtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetarnav%2Fsolid-devtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thetarnav","download_url":"https://codeload.github.com/thetarnav/solid-devtools/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101558,"owners_count":22014908,"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":["chrome-extension","debugger","devtools","solid-js"],"created_at":"2024-10-11T17:06:45.842Z","updated_at":"2025-05-14T08:09:32.186Z","avatar_url":"https://github.com/thetarnav.png","language":"TypeScript","readme":"\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?type=Developer%20Tools\u0026background=tiles\u0026project=%20\" alt=\"Solid Developer Tools\"\u003e\n\u003c/p\u003e\n\n# Solid Developer Tools\n\n[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge\u0026logo=pnpm)](https://pnpm.io/)\n[![npm](https://img.shields.io/npm/dw/@solid-devtools/shared?color=blue\u0026style=for-the-badge)](https://www.npmjs.com/package/solid-devtools)\n\nLibrary of developer tools, reactivity debugger \u0026 Devtools Chrome extension for visualizing SolidJS reactivity graph.\n\n## Why?\n\nTo change the way you write, debug and understand your SolidJS applications and reactivity within.\n\nAnd also to experiment with ways of visualizing\nand interacting with Solid's reactivity graph.\n\n\u003ca href=\"https://chrome.google.com/webstore/detail/solid-devtools/kmcfjchnmmaeeagadbhoofajiopoceel\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://user-images.githubusercontent.com/24491503/203095796-4ca411d9-e377-4c2e-896e-f152172270cc.png\"\u003e\n    \u003cimg alt=\"Screenshot of the chrome extension\" src=\"https://user-images.githubusercontent.com/24491503/203095712-1c4f904a-5a63-47ef-84e1-fc50e9e1c4d4.png\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\n## [The Chrome Extension](./extension#readme)\n\n🚧 In early development. 🚧\n\nChrome Developer Tools extension for debugging SolidJS applications. It allows for visualizing and interacting with Solid's reactivity graph, as well as inspecting component state and hierarchy.\n\nShould work in any application using SolidJS, including SolidStart and Astro.\n\n[**\u003e\u003e See the guide on setting started \u003c\u003c**](./extension#getting-started)\n\n## All devtools packages\n\nMost of the present packages are not much more then just ideas and experiments. Some in progress, and some very much in progress.\nBut few of them can help you in your work already, and a man can dream, so this is what's out there waiting:\n\n### [Extension Client](./packages/main#readme)\n\n###### `solid-devtools`\n\nThe main client library. It reexports the most important tools and connects the client application to the chrome extension.\n\n[**See README for more information.**](./packages/main#readme)\n\n### [Devtools Overlay](./packages/overlay#readme)\n\n###### `@solid-devtools/overlay`\n\nAn on-page devtools overlay for debugging SolidJS Applications without a chrome extension.\n\n[**See guide on setting up**](./packages/overlay#getting-started)\n\n### [Logger](./packages/logger#readme)\n\n###### `@solid-devtools/logger`\n\nFor debugging only the pinpoint places parts of the Solid's reactivity graph you are concerned with, right in the console you use all the time.\n\nProvides a variaty of debugging utilities for logging the state and lifecycle of the nodes of reactivity graph to the browser console.\n\n### [Debugger](./packages/debugger#readme)\n\n###### `@solid-devtools/debugger`\n\nA runtime library, used to get information and track changes of the Solid's reactivity graph.\nIt's a cornerstone of the rest of the packages.\n\n## Resources and prior art\n\nA couple of resources on the topic on chrome devtools extensions:\n\n- [about devtools](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools)\n- [Content-script \u003c-\u003e background-script communication](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port)\n- [Article about vue devtools](https://dev.to/voluntadpear/how-a-devtools-extension-is-made-1em7#bridge)\n- [Manifest.json anatomy](https://developer.chrome.com/docs/extensions/mv3/manifest/)\n- [setting up vite plugin](https://dev.to/jacksteamdev/create-a-vite-react-chrome-extension-in-90-seconds-3df7)\n- [example react project](https://github.com/jacksteamdev/crx-react-devtools):\n  - [injecting real-world scripts](https://github.com/jacksteamdev/crx-react-devtools/blob/main/src/content-script.ts) _(for accessing the real window object)_\n- [Plugin architecture of Vue Devtools](https://devtools.vuejs.org/plugin/plugins-guide.html#architecture)\n\nOther devtools projects for solid and other frameworks:\n\n- [CM-Tech/solid-debugger](https://github.com/CM-Tech/solid-debugger)\n- [Svelte Devtools](https://github.com/sveltejs/svelte-devtools)\n- [Vue Devtools](https://github.com/vuejs/devtools)\n- [MobX Devtools](https://github.com/mobxjs/mobx-devtools)\n- [React Devtools](https://react-devtools-experimental.vercel.app)\n- [Preact Devtools](https://github.com/preactjs/preact-devtools)\n- [LocatorJS](https://www.locatorjs.com)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthetarnav%2Fsolid-devtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthetarnav%2Fsolid-devtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthetarnav%2Fsolid-devtools/lists"}