{"id":13495840,"url":"https://github.com/hand-dot/react-inspector","last_synced_at":"2025-04-09T07:05:40.551Z","repository":{"id":59443440,"uuid":"530556329","full_name":"hand-dot/react-inspector","owner":"hand-dot","description":"Easily detect React components source code from Chrome!","archived":false,"fork":false,"pushed_at":"2025-03-25T09:16:22.000Z","size":105,"stargazers_count":153,"open_issues_count":6,"forks_count":16,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-02T06:35:44.698Z","etag":null,"topics":["chrome-extension","devtools","devtools-extension","react"],"latest_commit_sha":null,"homepage":"https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh","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/hand-dot.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}},"created_at":"2022-08-30T08:02:12.000Z","updated_at":"2025-03-25T09:16:26.000Z","dependencies_parsed_at":"2024-01-16T09:53:03.590Z","dependency_job_id":"0c34664e-301f-4c88-9ac0-86ce9528da18","html_url":"https://github.com/hand-dot/react-inspector","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hand-dot%2Freact-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hand-dot%2Freact-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hand-dot%2Freact-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hand-dot%2Freact-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hand-dot","download_url":"https://codeload.github.com/hand-dot/react-inspector/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994119,"owners_count":21030050,"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","devtools","devtools-extension","react"],"created_at":"2024-07-31T19:01:38.784Z","updated_at":"2025-04-09T07:05:40.526Z","avatar_url":"https://github.com/hand-dot.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Inspector\n\nYOU CAN TRY 👉 https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh\n\nEasily detect React components source code from Chrome!\n\n![CleanShot 2022-09-02 at 18 08 23](https://user-images.githubusercontent.com/24843808/188106077-ff409aeb-0145-4977-9be2-16d04809cc78.gif)\n\nThe Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac).  \nYou can detect and open the React component source code easily.\n\n1. Run the Dev server and Open your react app.\n2. Press Ctrl+Shift+X (Command+Shift+X on Mac) on Chrome.\n3. Inspect your react components and click it.\n\n---\n\nYou can edit the open in editor URL on the options page. If you are not VSCode user, you can edit it to your favorite editor URL-schemes.\n\n![CleanShot 2022-09-12 at 13 11 18](https://user-images.githubusercontent.com/24843808/189572510-a54463ff-1f11-4c92-a19f-007ad113009b.png)\n\n![CleanShot 2022-09-12 at 13 10 27](https://user-images.githubusercontent.com/24843808/189572514-0c7993b4-0067-4984-8ee2-89ba978907ed.png)\n\n\n\n## Requirements\n\n- Installed [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)\n- Works only with development builds.\n- Source code must be stored on local disk\n\n## How it works\n\nThe React Inspector accesses the `__REACT_DEVTOOLS_GLOBAL_HOOK__` set globally by the React Devtools and finds the [React Fiber](https://reactjs.org/docs/faq-internals.html#what-is-react-fiber) in the HTML element that the inspector hovered over.\nThe React Fiber contains information about the source code that will be added during development, so we use that information to open the VSCode.\n\nReference\n- https://github.com/facebook/react/tree/main/packages/react-devtools#faq\n- https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-source\n- https://github.com/facebook/react/blob/f0efa1164b7ca8523b081223954d05c88e92053b/packages/react-reconciler/src/ReactInternalTypes.js#L193\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhand-dot%2Freact-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhand-dot%2Freact-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhand-dot%2Freact-inspector/lists"}