The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily.
React Inspector Extension
■Requirements
・Installed React Developer Tools
・Works only with development builds.
・Source code must be stored on local disk
■How it works
The React Inspector accesses the __REACT_DEVTOOLS_GLOBAL_HOOK__ set globally by the React Devtools and finds the React Fiber in the HTML element that the inspector hovered over. The React Fiber contains information about the source code that will be added during development, so we use that information to open the editor.
Detail: https://dev.to/handdot/published-chrome-extension-for-streamlined-react-development-23b
■Options
It is possible to change the 'Open in Editor URL' from the extension's options page so that you can open it in an editor other than VSCode.
■Source Code
This extension is Open source. so you can access from https://github.com/hand-dot/react-inspector.
If you find a bug, please report it via Github!
Source Manifest.json
Similar Extensions
click-to-react-component 6,000+ 5 ★ 79.5KiB
Extract to React 6,000+ 7 ★ 489KiB
React Context DevTool 6,000+ 21 ★ 2.35MiB
React Hook Form Developer Tools 6,000+ 7 ★ 117KiB
React Monitor 6,000+ 0 ★ 1.3MiB
Redux DevTools 6,000+ 726 ★ 1.2MiB
HTML to React 6,000+ 4 ★ 342KiB
React VT 6,000+ 2 ★ 1.51MiB
C-React 6,000+ 4 ★ 701KiB
Realize for React 6,000+ 7 ★ 160KiB
React code finder 6,000+ 5 ★ 2.95MiB
LocatorJS 6,000+ 64 ★ 190KiB
React Performance Devtool 6,000+ 11 ★ 170KiB
Reactime 6,000+ 33 ★ 803KiB
Jinno: code any React component with AI 6,000+ 38 ★ 18.37MiB
React Stores Devtools Extension 6,000+ 0 ★ 716KiB
Next.js Explorer - NextJS App & Pages Router 6,000+ 4 ★ 160KiB
Apollo Client Devtools 6,000+ 266 ★ 490KiB
Next DevTools 6,000+ 7 ★ 67.98KiB
GraphQL Network Inspector 6,000+ 123 ★ 8.34MiB
Gimli Tailwind 6,000+ 33 ★ 151KiB
Tailwind CSS Devtools 6,000+ 7 ★ 857KiB
React Developer Tools 6,000+ 1576 ★ 1.56MiB
Recoilize 6,000+ 10 ★ 11.42MiB