{"id":13514967,"url":"https://github.com/leonvogt/hotwire-dev-tools","last_synced_at":"2025-04-12T21:26:58.685Z","repository":{"id":242874297,"uuid":"727331649","full_name":"leonvogt/hotwire-dev-tools","owner":"leonvogt","description":"Browser Dev Tools for Turbo and Stimulus","archived":false,"fork":false,"pushed_at":"2025-04-11T22:54:35.000Z","size":666,"stargazers_count":267,"open_issues_count":16,"forks_count":4,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-11T23:33:34.225Z","etag":null,"topics":["hacktoberfest","hotwire","stimulus","turbo"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/leonvogt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-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":"2023-12-04T16:45:58.000Z","updated_at":"2025-04-11T22:54:39.000Z","dependencies_parsed_at":"2024-06-05T13:41:51.837Z","dependency_job_id":"8983a374-45d1-44e1-aad5-56571018d8ba","html_url":"https://github.com/leonvogt/hotwire-dev-tools","commit_stats":null,"previous_names":["leonvogt/hotwire-dev-tools"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonvogt%2Fhotwire-dev-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonvogt%2Fhotwire-dev-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonvogt%2Fhotwire-dev-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonvogt%2Fhotwire-dev-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leonvogt","download_url":"https://codeload.github.com/leonvogt/hotwire-dev-tools/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248633569,"owners_count":21136891,"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":["hacktoberfest","hotwire","stimulus","turbo"],"created_at":"2024-08-01T05:01:04.655Z","updated_at":"2025-04-12T21:26:58.659Z","avatar_url":"https://github.com/leonvogt.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Hotwire Dev Tools\n\nHotwire Dev Tools is a browser extension with the goal of helping developers inspect their Turbo and Stimulus applications.\n\n**Turbo features**:\n\n- Highlight Turbo Frames\n- Monitor incoming Turbo Streams\n- Display Turbo context information (Turbo Drive enabled, morphing enabled, ...)\n- Log all Turbo related events\n- Log warning when a Turbo Frame ID is not unique\n- Log warning when an element has `data-turbo-permanent` but no ID or a non-unique ID\n- Highlight Turbo Frame changes\n\n**Stimulus features**:\n\n- Highlight Stimulus controllers\n- List all Stimulus controllers on the page\n- Log warning when a `data-controller` doesn't match any registered controller\n- Log warning when a Stimulus target is not nested within the corresponding controller\n\n## Installation\n\nThe extension can be installed at:\n\n- [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/hotwire-dev-tools/)\n- [Chrome Web Store](https://chromewebstore.google.com/detail/hotwire-dev-tools/phdobjkbablgffmmgnjbmfbbofnbkajc)\n- [App Store for Safari](https://apps.apple.com/ch/app/hotwire-dev-tools/id6503706225)\n\n## Usage\n\nOnce installed, click on the extension icon (or press Alt+Shift+S) to open the Dev Tools options.  \nFrom there you can enable/disable the features you want to use.  \n_Note: On Firefox you may need to select \"Always allow on example.com\" to enable the extension on your site._\n\n## Development\n\n- Fork the project locally\n- `npm install`\n- `npm run dev` - to build the extension and watch for changes\n- `npm run build` - to bundle the extension into static files for production\n- `npm run format` - to format changes with Prettier\n\n\u003e [!NOTE]  \n\u003e By default, the extension will be built for Chrome. To build for Firefox or Safari just add `firefox` or `safari` as an argument to the build command: `npm run build firefox` or `npm run build safari`.\n\n### Test on Chrome\n\n1. Open Chrome and navigate to `chrome://extensions/`\n2. Enable Developer mode\n3. Click on `Load unpacked` and select the `public` folder (make sure to build the extension first)\n\n### Test on Firefox\n\nThe easiest way is to make use of the [web-ext](https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/) tool:\n\n```bash\nnpm install --global web-ext\n\ncd public\nweb-ext run\n```\n\nThat will open a new Firefox instance with the extension installed and hot reloading enabled.\n\n### Test on Safari\n\nFirst [configure Safari to run unsigned extensions](https://developer.apple.com/documentation/safariservices/safari_web_extensions/running_your_safari_web_extension#3744467):\n\n1. Choose Safari \u003e Settings\n2. Select the Advanced tab\n3. Check the \"Show features for web developers\" box\n4. Select the Developer tab.\n5. Check the Allow unsigned extensions box.\n\nThis may depend on the version of macOS and Safari you are using.  \nSo if you can't find the settings, you may need to search for the specific version you are using.\n\nThen you can load the extension by following these steps:\n\n1. Open Xcode\n2. Choose \"Open Existing Project\"\n3. Select the [xcode/HotwireDevTools.xcodeproj](./xcode/HotwireDevTools.xcodeproj) workspace (blue icon)\n4. Build the project (you may need to select a team in the project settings -\u003e Signing \u0026 Capabilities)\n5. Open Safari \u003e Settings \u003e Extensions and enable the Hotwire Dev Tools extension\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/leonvogt/hotwire-dev-tools.\n\n### Coding Standards\n\nThis project uses Prettier to format the code and ensure a consistent style.\n\nPlease run `npm run format` prior to submitting pull requests.\n\n---\n\nThis Dev Tool were inspired by [turbo-devtool](https://github.com/lcampanari/turbo-devtools) and [turbo_boost-devtools](https://github.com/hopsoft/turbo_boost-devtools) 🙌\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleonvogt%2Fhotwire-dev-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleonvogt%2Fhotwire-dev-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleonvogt%2Fhotwire-dev-tools/lists"}