I created a Chrome extension called React Inspector.
It launches the inspector on Chrome and opens the source code of the clicked React component in an editor. (Currently only VSCode is supported)
PS: ↑2022/09/12 "Open in Editor URL" can be set from the options page to open with Any Editor 's URL schema...!
- Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh
- GitHub: https://github.com/hand-dot/react-inspector
You can jump directly to the React source code, which makes it very easy to identify the code from the UI.
- Newly joined projects
- Multilingual website
- Maintenance of old apps
I think it would be convenient and save time to identify the source code if you can use it for projects such as
You are probably already familiar with React Developer Tools, a Chrome extension officially provided by the React team.
React Developer Tools sets a global named
__REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that hook during initialization.
__REACT_DEVTOOLS_GLOBAL_HOOK__ has a Map object called
renderers can be used to find React Fiber from HTML elements on a web page.
Fiber is a reconciliation engine for React.
But in addition to the information needed for reconciliation, Fiber has some other information that the developer can use for debugging that is added during development builds.
React Inspector opens files in VSCode using the
_debugSource information set in Fiber.
As explained above, it works using the React Developer Tools setting of
REACT_DEVTOOLS_GLOBAL_HOOK and React Fiber at development build time, so it will not work unless the following two points are satisfied.
- React Developer Tools must be installed.
- React must be in development build. If you visit a site with React in development mode, the icon will have a red background
With the React Developer Tools installed and the React development server up and running, you can launch the inspector in the following three ways.
- Click on the extension icon
- From context menu
- By Shortcut
- I could develop Chrome extension quickly with TS using https://crxjs.dev/
- I learned a little bit about the internal structure of React, and I discovered many things when I read the source code of React.
- I've opened a GitHub repository, so if you have any ideas or problems, please feel free to open an Issue!