React Inspector

YOU CAN TRY 👉 https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh

Easily detect React components source code from Chrome!

CleanShot 2022-09-02 at 18 08 23

The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily.

  1. Run the Dev server and Open your react app.
  2. Press Ctrl+Shift+X (Command+Shift+X on Mac) on Chrome.
  3. Inspect your react components and click it.

CleanShot 2022-09-12 at 13 10 27

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

GitHub

View Github