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
How it works
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.
The __REACT_DEVTOOLS_GLOBAL_HOOK__ has a Map object called renderers.
The method findFiberByHostInstance of 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.
Requirements
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
How to start the Inspector
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
Mac:
Command+Shift+XWin:Ctrl+Shift+X
Impressions on how I made it
- 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!
Top comments (0)