{"id":13531574,"url":"https://github.com/alpine-collective/alpinejs-devtools","last_synced_at":"2026-01-16T06:43:10.689Z","repository":{"id":37984203,"uuid":"253359636","full_name":"alpine-collective/alpinejs-devtools","owner":"alpine-collective","description":"Chrome/Firefox DevTools extension for debugging Alpine.js applications.","archived":false,"fork":false,"pushed_at":"2026-01-01T04:03:44.000Z","size":3329,"stargazers_count":590,"open_issues_count":3,"forks_count":24,"subscribers_count":4,"default_branch":"master","last_synced_at":"2026-01-14T19:37:33.419Z","etag":null,"topics":["alpine","alpine-js","alpinejs","alpinejs-devtools","javascript"],"latest_commit_sha":null,"homepage":"https://alpinedevtools.com","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/alpine-collective.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null},"funding":{"github":["HugoDF"]}},"created_at":"2020-04-06T00:25:45.000Z","updated_at":"2026-01-13T02:23:40.000Z","dependencies_parsed_at":"2024-06-06T04:50:29.671Z","dependency_job_id":"41dd7d3a-81ce-4221-945b-76b61e41bd39","html_url":"https://github.com/alpine-collective/alpinejs-devtools","commit_stats":null,"previous_names":["te7a-houdini/alpinejs-devtools"],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/alpine-collective/alpinejs-devtools","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alpine-collective%2Falpinejs-devtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alpine-collective%2Falpinejs-devtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alpine-collective%2Falpinejs-devtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alpine-collective%2Falpinejs-devtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alpine-collective","download_url":"https://codeload.github.com/alpine-collective/alpinejs-devtools/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alpine-collective%2Falpinejs-devtools/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28477916,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T06:30:42.265Z","status":"ssl_error","status_checked_at":"2026-01-16T06:30:16.248Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["alpine","alpine-js","alpinejs","alpinejs-devtools","javascript"],"created_at":"2024-08-01T07:01:04.071Z","updated_at":"2026-01-16T06:43:10.682Z","avatar_url":"https://github.com/alpine-collective.png","language":"TypeScript","funding_links":["https://github.com/sponsors/HugoDF"],"categories":["Extensions \u0026 Plugins","JavaScript","TypeScript"],"sub_categories":[],"readme":"![Chrome Web Store](https://img.shields.io/chrome-web-store/v/fopaemeedckajflibkpifppcankfmbhk)\n![Chrome Web Store](https://img.shields.io/chrome-web-store/users/fopaemeedckajflibkpifppcankfmbhk?label=chrome%20users%20%28weekly%29)\n![Mozilla Add-on](https://img.shields.io/amo/v/alpinejs-devtools?label=firefox%20add-on)\n![Mozilla Add-on](https://img.shields.io/amo/users/alpinejs-devtools?label=firefox%20users%20%28daily%29)\n\n## Chrome Web Store Notice\n\nDue to Chrome's Manifest v3 rollout, the extension had to be rewritten. As part of this we've launched a [**Paid Early Access Program**](https://alpinedevtools.com/pricing).\n\n**Free Extension** includes:\n\n- ✅ Component state inspection/editing\n- ✅ More reliable state updates/sync (🆕)\n- ✅ Highlight component in page on hover\n- ✅ Component data in console globals\n- ✅ High performance on nested data objects (🆕️, tested on ~10k data properties)\n- ✅ Component filtering (🆕)\n\n**Early Access** includes:\n\n- ✅ Store state viewing/editing (🆕)\n- ✅ Store data in console globals (🆕)\n- ✅ Warnings tab (inc. Alpine v3 support)\n- ✅ Jump to root element/scroll element into view (🆕)\n- ✅ Time travel debugging of $data (🆕)\n\n# Alpine.js devtools\n\n![Screenshot of Alpine.js devtools](docs/devtools-only.png)\n\nAlpine.js devtools is a simple extension to help you debug [Alpine.js](https://github.com/alpinejs/alpine) components easily.\n\n\u003e This extension is heavily inspired by [Vue devtools](https://github.com/vuejs/vue-devtools), but customized for a unique Alpine.js developer experience.\n\n## Installation\n\n- [Get the Chrome Extension](https://chrome.google.com/webstore/detail/alpinejs-devtools/fopaemeedckajflibkpifppcankfmbhk)\n- [Get the Firefox Extension](https://addons.mozilla.org/firefox/addon/alpinejs-devtools/)\n\n**Note:** if you are using Google Chrome, Alpine.js devtools will not work with local files unless you configure the extension to be allowed `Access to File URLs`.\n\nYou can allow it by following these steps:\n\n1. Open chrome settings\n2. Go to `extensions` tab\n3. Choose `Alpine.js devtools` and press details\n4. Enable `Allow access to file URLs`\n\n![Allow access to file URLs permission](docs/alpine-devtools-chrome-permission.png)\n\n## Identifying Components\n\nUnlike other frameworks, Alpine does not include named components. Therefore by default, Alpine.js devtools will attempt to identify component names from the following attributes, in order: `id`, `name`, `aria-label`, `x-data` (the function name), `role`, and finally the `tagName`.\n\n\u003e You may also override these with either `x-title` or `x-id`.\n\n## Development\n\n### Prerequisites\n\n- Node ^24.x\n- pnpm ^10.x\n\n### Chrome\n\n1. Clone this repo\n2. Run `pnpm install`\n3. Run `pnpm build:dev` (or `pnpm build` to test a production build)\n4. Load unpacked extension inside [dist/chrome](./dist/chrome) directory\n5. Open any HTML file that imports Alpine.js then inspect with Chrome DevTools. You should now have an Alpine.js panel available.\n\n### Firefox\n\n1. Follow the [Development](#development) instructions to get a development build.\n2. Go to [about:debugging#/runtime/this-firefox](about:debugging#/runtime/this-firefox) in Firefox\n3. Ensure you are on the \"This Firefox\" tab (see the left side nav)\n4. Click \"Load Temporary Add-on...\"\n5. Open any of the files in the built extension folder ([./dist/chrome](./dist/chrome))\n6. Open any HTML file that imports Alpine.js then inspect with Firefox DevTools. You should now have an Alpine.js panel available.\n\n### Running the Alpine.js devtools simulator\n\nA devtools simulator is provided in order to run tests and have an easier development workflow.\n\nNote that when using the simulator all Chrome/Firefox devtools/Extension APIs are faked so it's useful if working on the Extension Backend (which runs in the end user's window, see `packages/shell-chrome/src/backend.js`) or the Alpine.js app which runs in the devtools panel (entrypoint: `packages/shell-chrome/src/devtools/app.js`).\n\n1. Clone this repo\n2. Run `pnpm install`\n3. Run `pnpm start`\n4. Open [http://locahost:8080](http://locahost:8080) (default port is 8080, you can override the port using the `PORT` environment variable. eg. `PORT=5000 pnpm start` will start the simulator on [http://localhost:5000](http://localhost:5000))\n5. You'll see a page with our sample Alpine.js app, [example.html](./packages/simulator/example.html), running in the top half of the screen and the [devtools simulator](./packages/simulator/dev.js) running in the bottom half of the screen.\n\n### Testing\n\nWe have 2 levels of tests in the project:\n\n- unit tests in [./tests](./tests), written and run with `node:test`\n  - The command to run them is `pnpm test`.\n- E2E tests that run against the devtools simulator, in [./cypress](./cypress), using [Cypress](https://cypress.io).\n  - The command to run Cypress tests is `pnpm cy:run`\n  - The command to open the Cypress UI is `pnpm cy:open`\n  - **Note** in order to run any Cypress tests, you'll need the simulator running (see [Running the Alpine.js devtools simulator](#running-the-alpinejs-devtools-simulator)).\n\n### Formatting/Linting\n\nCode is auto-formatted using Prettier, see the config at [.prettierrc.js](./.prettierrc.js).\n\nOn push, a GitHub Action will auto-format your changes.\n\nOn commit, there's a husky + lint-staged hook that runs and auto-formats your changes (unless you disable pre-commit hooks).\n\n## License\n\n[MIT](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falpine-collective%2Falpinejs-devtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falpine-collective%2Falpinejs-devtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falpine-collective%2Falpinejs-devtools/lists"}