pseuxide's fork - react inspector for docker users
A version which applied shitty workaround of docker path problem for my personal use. It's by no means a perfect way but I'd b ok as long as it works.
As this issue from original repo states, when u involve docker in ur development, react-inspector might misunderstand the file path depend on ur Dockerfile setting.
I integrated an ugly UI to dynamically correct erroneous docker paths. This ensures path accuracy by substituting incorrect paths with the correct one u specified which effectively solves the docker path problem. up to 3 currently btw.
Specifying the domain, the replacing only takes place when current tab contains that domain in the URL. If u dont specify domain, it'll be interpreted as 'every url'.
This image is an example of my configuration which will alter the part /app with /Users/pseuxide/works/instabase of the file path only when im working on *instabase.host*.
React Inspector
YOU CAN TRY 👉 https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh
Easily detect React components source code from Chrome!
The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac).
You can detect and open the React component source code easily.
- Run the Dev server and Open your react app.
- Press Ctrl+Shift+X (Command+Shift+X on Mac) on Chrome.
- Inspect your react components and click it.
You 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.
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 VSCode.
Reference