pgfkdfnigjfldfdbnigddjalgjnhgdoa
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.
AI-MultiPrompt
A Web Extension that allows to simultaneously submit a prompt to multiple AI chats This extension submit a single prompt simultaneously to different AI chat previously opened in the browser's tabs. * Currently the extension support eight AI chat like: - ChatGPT, Gemini, Claude, and others ..... * It remember last submitted prompt * Copy last submitted prompt to the clipboard * Allows to choose which AI are involved in prompt analysis. * Opens a pinned tab for each AI chat chosen (if doesn't already opened yet) 1. Open the extension popup 2. Write prompt 3. Choose the AI chat you want to submit the prompt to and click on the "Submit" button
click-to-react-component
Option+Click React components in your browser to instantly open the source in VS Code Devtool for React Option+Click React components in your browser to instantly open the source in VS Code click-to-react-component is the browser version for https://github.com/ericclemmons/click-to-component thanks ericclemmons for implementing this library
LocatorJS
LocatorJS Chrome Extension - option-click to code (ReactJS) Stop wasting time searching for React component source code. With LocatorJS, simply Option+Click (Alt+Click on Windows) any element on your webpage to instantly jump to its source code in your editor. Perfect for: • Large codebases where finding components is time-consuming • Onboarding new developers to unfamiliar projects • Debugging complex component trees • Speeding up your daily development workflow How it works: 1. Install the extension 2. Open your React app in development mode 3. Hold Option (or Alt) and click any component 4. Your editor opens directly to that component's source file Works with VSCode, IntelliJ IDEA, WebStorm, and other popular editors. Compatible with React, Preact, Solid, and Svelte projects. This is a developer tool designed for local development environments (localhost). It helps you navigate your own code faster, saving hours of searching through project files.
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
