2024-11-17.10.40.06.mov
React Code Finder is a powerful development tool extension designed for Chrome. This extension aims to help React developers inspect and edit code more efficiently and swiftly right from the web browser.
Adding React Code Finder to Chrome is simple. Just head over to the Chrome Web Store and click on the 'Add to Chrome' button. The extension will then be ready for use.
React Code Finder is incredibly useful for:
- Developers who find it challenging to locate parts of their code as their projects grow in size
- Developers who are dissatisfied with the usability of the react-devtools extension
- Developers who wish to edit code in real-time and see the changes within the web browser
- Open Developer Tools and find the panel labeled React Code Finder. (Hint: it's very convenient to set the panel's position to the far left)
- With the React Code Finder panel enabled, make sure the extension icon is changed to On. (You can toggle it manually, but by default it will automatically toggle by detecting the panel's open or closed state)
- (Recommended) Press the copy icon at the top of the React Code Finder panel and run
npx react-code-finder-server -p 3010into the terminal. You can change the port if it overlaps. - Hover over the web component you want to find to see the component's name.
- If you want to select the component, right-click on it. (For viewing/editing the component's source code,
react-code-finder-servermust be running) - Use the Select UI to navigate through the hierarchy of the source code.
- If you want to open it in your local IDE, you can click the icon or use
CMD + K. You can modify the source code directly in the editor and quickly save/test your changes with theCMD + Sshortcut. (Note: This will also change the actual local source code.)
- If react-code-finder-server is not running, you can only use the props lookup and the ability to locate the code and open it in an editor. You can set your preferred IDE on the extension's options page. (Default: vscode)
- You can find other options from extension's option page. (Right-click extension icon and click option!)
This extension does not yet work with the react server component (RSC), as it relies internally on the binding between the html element and React Fiber, and the _debugSource field.