eomcfdfhbblgcbccadcfphhclmchhdhd
The Inspector launch with Ctrl+Shift+X (Command+Shift+X on Mac). You can detect and open the React component source code easily. ■ 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. ■ 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 is a fork from React Inspector extension including React 19 support.
React Spy
This extension works bidirectionally: 1. Click UI to find the source code. 2. Click source code to find the UI. To use, you must also install the vs-code extension below:
React Component Names
Quickly locate React component names on any webpage to identify their source code location. Hold **Alt** (or **Option** on macOS) and hover to reveal component names for fast debugging and development. Prerequisites: Before installing this extension, please ensure you have the official React Developer Tools installed.
React Click To Component
React Click To Component, a Chrome extension to open a React component in the editor by clicking on it. React Click To Component, is a Chrome extension to open a React component in the editor by clicking on it. `Option + Click` (on MacOS) or `Alt + Click` (on Linux/Windows) takes you to the code editor The extension also supports TurboPack builds where the project root is not exposed. You'll just need to setup the project root file when prompted. The updated value can be manipulated on the localStorage as required. To see how this works, checkout the repo at and raise any issues on the extension at the GitHub repository. And if you like the extension, star the repo too! Features - Option + Click or Alt + Click on a component to open the file in an editor - Highlight the component name when hovering over it with Option/Alt key pressed - Supports Turbopack builds with manually defined project roots (that can be changed simply by updating the localStorage key clickToReact-projectPath-{HOST}) - Now the extension copies the path to clipboard instead of opening the file, for editors that doesn't support opening file:// URLs. You can set the editor with clickToReact-editor-{HOST} localStorage key.
Magic Patterns — Import Website
Import any website into Magic Patterns and edit with AI. Import any website and then edit it with AI on Magic Patterns. Capture your existing styles in one-click. Use cases: - Bring existing designs into Magic Patterns so you can edit them with AI instead of starting from scratch - Use AI to restyle, restructure, or customize the imported design however you want - Export the design to Figma or copy the React code This Chrome Extension is created and supported by Magic Patterns.
