{"id":13459389,"url":"https://github.com/sindresorhus/devtools-detect","last_synced_at":"2025-05-14T09:08:17.266Z","repository":{"id":43675824,"uuid":"11125160","full_name":"sindresorhus/devtools-detect","owner":"sindresorhus","description":"Detect if DevTools is open and its orientation","archived":false,"fork":false,"pushed_at":"2024-04-23T14:56:36.000Z","size":31,"stargazers_count":2096,"open_issues_count":25,"forks_count":220,"subscribers_count":41,"default_branch":"main","last_synced_at":"2025-04-09T21:29:11.580Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://sindresorhus.com/devtools-detect","language":"HTML","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/sindresorhus.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"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},"funding":{"github":"sindresorhus","open_collective":"sindresorhus","buy_me_a_coffee":"sindresorhus","custom":"https://sindresorhus.com/donate"}},"created_at":"2013-07-02T13:11:08.000Z","updated_at":"2025-04-01T06:25:56.000Z","dependencies_parsed_at":"2024-11-06T03:14:10.779Z","dependency_job_id":"3ef2b7d0-2fa8-40be-818c-9457691cc0e2","html_url":"https://github.com/sindresorhus/devtools-detect","commit_stats":{"total_commits":44,"total_committers":9,"mean_commits":4.888888888888889,"dds":0.2272727272727273,"last_synced_commit":"74ca68569c02c30a29ac35da4e50e8b65c23b6d0"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sindresorhus%2Fdevtools-detect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sindresorhus%2Fdevtools-detect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sindresorhus%2Fdevtools-detect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sindresorhus%2Fdevtools-detect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sindresorhus","download_url":"https://codeload.github.com/sindresorhus/devtools-detect/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248330572,"owners_count":21085737,"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-07-31T09:01:20.031Z","updated_at":"2025-04-11T02:38:04.905Z","avatar_url":"https://github.com/sindresorhus.png","language":"HTML","readme":"# devtools-detect\n\n\u003e Detect if DevTools is open and its orientation\n\nUseful for when you want something special to happen when DevTools is open. Like pausing canvas, adding style debug info, etc.\n\n**This package has a lot of flaws. It used to work better, but browsers changed, and the detection now has too many false-positives.**\n\n## [Demo](https://sindresorhus.com/devtools-detect)\n\n## Install\n\n```sh\nnpm install devtools-detect\n```\n\n## Usage\n\n```html\n\u003cscript type=\"module\"\u003e\nimport devtools from './node_modules/devtools-detect/index.js';\n\n// Check if it's open\nconsole.log('Is DevTools open:', devtools.isOpen);\n\n// Check it's orientation, `undefined` if not open\nconsole.log('DevTools orientation:', devtools.orientation);\n\n// Get notified when it's opened/closed or orientation changes\nwindow.addEventListener('devtoolschange', event =\u003e {\n\tconsole.log('Is DevTools open:', event.detail.isOpen);\n\tconsole.log('DevTools orientation:', event.detail.orientation);\n});\n\u003c/script\u003e\n```\n\n## React usage\n\n```jsx\nimport {useState, useEffect} from 'react';\nimport devtoolsDetect from 'devtools-detect';\n\nexport function useDevToolsStatus() {\n\tconst [isDevToolsOpen, setIsDevToolsOpen] = useState(devtoolsDetect.isOpen);\n\n\tuseEffect(() =\u003e {\n\t\tconst handleChange = event =\u003e {\n\t\t\tsetIsDevToolsOpen(event.detail.isOpen);\n\t\t};\n\n\t\twindow.addEventListener('devtoolschange', handleChange);\n\n\t\treturn () =\u003e {\n\t\t\twindow.removeEventListener('devtoolschange', handleChange);\n\t\t};\n\t}, []);\n\n\treturn isDevToolsOpen;\n}\n```\n\n```jsx\nimport {useDevToolsStatus} from './useDevToolsStatus.js';\n\nexport default function App() {\n\tconst isDevToolsOpen = useDevToolsStatus();\n\treturn isDevToolsOpen ? 'OPEN' : 'CLOSED';\n}\n```\n\n## Support\n\n- Chrome DevTools\n- Safari DevTools\n- Firefox DevTools\n- Opera DevTools\n\n## Caveats\n\nDoesn't work if DevTools is undocked and will show false positive if you toggle any kind of sidebar.\n","funding_links":["https://github.com/sponsors/sindresorhus","https://opencollective.com/sindresorhus","https://buymeacoffee.com/sindresorhus","https://sindresorhus.com/donate"],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsindresorhus%2Fdevtools-detect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsindresorhus%2Fdevtools-detect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsindresorhus%2Fdevtools-detect/lists"}