click-to-react-component

Click to component

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 code finder

Chrome extension for React Developer Activate the extension in your development environment and [right-click] to find and modify the component's source code right away! ## Intro React Code Finder is a powerful development tool extension designed for Chrome. This extension aims to help React developers inspect, interpret, and edit code more efficiently and swiftly right from the web browser. ## Features - Code Tracking: Just by pointing your mouse, you can track any React component on your web page. This tool will highlight the exact location of the source code file, down to the specific line and column of the component. - Live Code Editing: An editor built into the dev tools panel allows for instant code alterations. You can apply the code changes directly within your browser, eliminating the need for a separate text editor or IDE. ## Who Will Benefit React Code Finder is incredibly useful for: - Developers who are working with web development using React - Developers who want to quickly locate parts of their code - Developers who wish to edit code in real-time and see the changes within the web browser ## Install 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. ## How to Use In order to get the most out of React Code Finder, you'll need a command-line interface (CLI). Here are the steps: 1. Install the CLI: Run the command `npx react-code-finder-server` to execute the necessary CLI for React Code Finder. (If you want to use specific port, add -p flag. ex. `-p 8080`) 2. Launch React Code Finder: Once you have the CLI running, you can launch React Code Finder via your Chrome browser. 3. Start Navigating and Editing: Navigate to the web page you wish to inspect. Now you can start tracking and directly editing the React components using the dev tools panel editor. With React Code Finder, I aim to facilitate a smoother and more efficient development process. Experience a more productive development environment with React Code Finder today! Does not work with React server components (RSC). This extension works based on cross-references between state node(HTMLElement) and ReactElement. 2.2.0 (2024.10.16) - New: Added auto on/off feature: react-code-finder is now automatically enabled/disabled when you open or close it in devtools. - Added the ability to open the IDE even if the react-code-finder-server is not running. Preferred IDE can be modified on the options page (default: vscode) 2.1.0 - Fixed bug with 2 or more react rootFIber conflicts - Added a viewer to see the props of the current source

React-DomPicker

Click any UI element to instantly jump to its React source code in VS Code. Perfect for React + Tailwind + ShadCN projects. React-DomPicker connects your browser to VS Code. Click any element in your React app and VS Code opens the exact source file at the matching JSX node. 1. Install the companion VS Code extension (React-CodeBridge): https://marketplace.visualstudio.com/items?itemName=RajithaDisanayaka.react-codebridge 2. Install this Chrome extension 3. Run your React app on localhost 4. Click the toolbar icon to activate the picker 5. Click any element on the page - One-click navigation from browser to source code - Hover to outline elements - Shift+Click to select the parent element - Esc to turn the picker off - Ctrl+Shift+P (Cmd+Shift+P on Mac) to toggle from the keyboard - Floating status indicator on the page Works with - React 16.8, 17, 18, 19 - Next.js (App Router and Pages Router, including React Server Components) - Vite, Create React App, Remix - TypeScript and JavaScript - Tailwind, ShadCN, Material UI, styled-components, CSS Modules - React-CodeBridge VS Code extension installed - A React dev build running on localhost or 127.0.0.1 - Runs entirely on your machine - No data collection, no analytics, no external servers - Activates only on localhost and 127.0.0.1 For pixel-perfect click-to-code on every element, install code-inspector-plugin in your project config. React-DomPicker reads its output automatically. Useful for Next.js projects with React Server Components, i18n, or computed text.

Reactime

A Chrome extension for time travel debugging and performance monitoring in React applications. Reactime was nominated for the Productivity Booster award at React Open Source Awards 2020. Reactime is an open source Chrome developer tool for time travel debugging and performance monitoring in React applications. Reactime enables developers to record snapshots of application state, jump between and inspect state snapshots, and monitor performance metrics such as component render time and render frequency. - Record Snapshots of Application State and Accessibility Tree - Provider/Consumer Panel for useContext Hook - Import and Export Snapshots of State - Time-Travel Debugging - Snapshot Series Comparison - Component Tree Visualization - React Router Compatibility - Component Render Time & Frequency - Support for Gatsby, Next.js and Remix - TypeScript Support - Ability to Reconnect - Web Performance Metrics - Tutorial Walkthrough - Prop Visualization - Intuitive Layout and Modern Design - Dark Mode Reactime 26.0 introduces transformative updates that redefine React debugging. The groundbreaking Providers/Consumers Panel now captures and visualizes state changes from useContext hooks, offering a real-time view of provider-consumer relationships and live context state values. A revamped time travel slider delivers enhanced control over debugging with intuitive navigation and playthrough options. The extension also boasts a modernized UI with dark mode for better usability, improved reliability through critical bug fixes, and the restoration of the accessibility tree tab for addressing potential accessibility issues. With these innovations, Reactime v26 empowers developers to streamline workflows and optimize complex state flows like never before. ❓ Why is Reactime not recording new state changes? Reactime lost its connection to the tab you're monitoring, simply click the "reconnect" button to resume your work. ❓ Why isn’t Reactime finding my hooks? Reactime detects and monitors hooks by traversing your application’s unminified React code in development mode. If your build process is minifying or uglifying your code—even for development builds—Reactime may not be able to properly locate and track your hooks. To fix this: Ensure a true development build: Double-check your bundler or build tool configuration (e.g., Webpack, Babel, Vite, etc.) to make sure that your application is not minimized or uglified in development mode. For example, with Webpack, make sure you’re running in mode: 'development', which should disable default minification. In a Create React App project, simply running npm start or yarn start will automatically configure a non-minified development build. Check for overrides: Ensure there are no custom Babel or Webpack plugins that minify your code, especially if you’re using frameworks like Next.js or Gatsby. Sometimes additional plugins or scripts might be running under the hood. Restart & rebuild: After changing any build configuration, rebuild or restart your development server to ensure the new configuration is applied. Then refresh your browser tab so Reactime can detect your unminified hooks. After changing any build configuration, rebuild or restart your development server to ensure the new configuration is applied. Then refresh your browser tab so Reactime can detect your unminified hooks. ❓ Why is Reactime telling me that no React application is found? Reactime initially runs using the dev tools global hook from the Chrome API. It takes time for Chrome to load this. Try refreshing your application a couple of times until you see Reactime running. ❓ Why do I need to have React Dev Tools enabled? Reactime works in tandem with the React Developer Tools to access a React application's Fiber tree; under the hood, Reactime traverses the Fiber tree through the React Developer Tool's global hook, pulling all relevant information needed to display to the developer ❓ I found a bug in Reactime Reactime is an open-source project, and we'd love to hear from you about improving the user experience. Please read the 👩‍💻 Developer README, and create a pull request (or issue) to propose and collaborate on changes to Reactime.