awesome-repositories.com
博客
MCP
awesome-repositories.com

通过 AI 驱动的搜索，发现最优秀的开源仓库。

探索精选搜索开源替代品自托管软件博客网站地图
项目关于排名机制媒体报道MCP 服务器
法律隐私政策服务条款
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
aidenybai avatar

aidenybai/react-grab

0
View on GitHub↗
5,110 星标·232 分支·TypeScript·mit·8 次浏览react-grab.com↗

React Grab

React Grab is a browser-based code navigator and component inspector that links rendered user interface elements to the specific files and lines of source code where they are defined. It serves as a bridge between the browser interface and a local codebase to facilitate element identification and analysis.

The tool functions as a developer extension for React applications, mapping visual components to their originating source code. This capability provides specific code context to support manual review and AI-assisted development.

The project includes a framework for extending the browser interface through custom menu actions, toolbar items, and lifecycle hooks. It further supports frontend developer tooling via UI element source capture and component debugging.

Features

  • Visual-to-Code Navigators - Links visual interface elements in the browser to the specific file and line of code where they are defined.
  • React Component Debuggers - Identifies which source files control specific parts of a React application by selecting elements directly in the browser.
  • React Component Inspectors - Maps user interface elements to their corresponding source code files within a React application.
  • DOM-to-Source Mappings - Links runtime user interface elements to their originating source code files using build-time metadata.
  • UI-to-Code Mappers - Links natural language descriptions or visual elements of the user interface to specific source files within the codebase.
  • UI-to-Code Mapping Tools - Bridges the gap between the rendered browser interface and the local codebase for faster element location and analysis.
  • UI Element Source Captures - Captures a selected user interface element and its corresponding source code location to provide context for analysis.
  • Frontend Development Tools - Adds custom menu actions and lifecycle hooks to the browser interface to streamline the web development workflow.
  • AI Development Assistants - Provides specific source code context for AI tools to help automate the analysis and modification of UI components.
  • Event Capture - Intercepts user click and hover events to extract the specific DOM node and its associated metadata.
  • Browser Extension Developer Tools - Acts as a browser extension for identifying and capturing component source code for AI or manual review.
  • Browser Interface Extensions - Provides a system for adding custom menu actions, toolbar items, and lifecycle hooks to customize the user experience.
  • UI Element Injection - Renders custom interface menus and toolbars by injecting a root element into the host application's document.

Star 历史

aidenybai/react-grab 的 Star 历史图表aidenybai/react-grab 的 Star 历史图表

AI 搜索

探索更多 awesome 仓库

用简单的语言描述您的需求 —— AI 将根据相关性为您从数千个精选开源项目中进行排序。

Start searching with AI

常见问题解答

aidenybai/react-grab 是做什么的？

React Grab is a browser-based code navigator and component inspector that links rendered user interface elements to the specific files and lines of source code where they are defined. It serves as a bridge between the browser interface and a local codebase to facilitate element identification and analysis.

aidenybai/react-grab 的主要功能有哪些？

aidenybai/react-grab 的主要功能包括：Visual-to-Code Navigators, React Component Debuggers, React Component Inspectors, DOM-to-Source Mappings, UI-to-Code Mappers, UI-to-Code Mapping Tools, UI Element Source Captures, Frontend Development Tools。

aidenybai/react-grab 有哪些开源替代品？

aidenybai/react-grab 的开源替代品包括： imcuttle/mometa — Mometa is an AST-based visual code editor and low-code metaprogramming tool. It provides a visual interface for… plasmohq/plasmo — Plasmo is a browser extension framework and build tool designed for developing cross-browser extensions from a single… nagi-ovo/gemini-voyager — Gemini Voyager is a browser-based toolkit designed to enhance the interface and workflow of large language model web… hediet/vscode-drawio — This project is a visual diagramming tool and integration for VS Code that allows users to create and edit Draw.io… lahmatiy/react-render-tracker — React Render Tracker is a diagnostic utility designed to monitor and analyze the rendering behavior of React… didi/doraemonkit — DoraemonKit is a mobile frontend development toolset designed to optimize the lifecycle of web and hybrid mobile…

React Grab 的开源替代方案

相似的开源项目，按与 React Grab 的功能重合度排序。
  • imcuttle/mometaimcuttle 的头像

    imcuttle/mometa

    4,091在 GitHub 上查看↗

    Mometa is an AST-based visual code editor and low-code metaprogramming tool. It provides a visual interface for modifying source code through abstract syntax tree manipulation, allowing for the insertion and deletion of code blocks via drag-and-drop actions. The project distinguishes itself through a visual source mapping system that links rendered DOM elements back to their original source code positions. It utilizes a real-time synchronization system and hot module replacement workflow to update application components in the browser without requiring a full page reload. The platform covers

    TypeScriptfrontendlowcodereact
    在 GitHub 上查看↗4,091
  • plasmohq/plasmoPlasmoHQ 的头像

    PlasmoHQ/plasmo

    13,069在 GitHub 上查看↗

    Plasmo is a browser extension framework and build tool designed for developing cross-browser extensions from a single codebase. It functions as a development environment that automates manifest generation and bundles source code into compatible packages for multiple web browser engines. The project includes a developer toolset featuring hot module replacement for real-time code updates and an automated publisher to deliver completed builds to various browser web stores. Its capability surface covers extension UI development through the injection of components into web pages and a communicati

    TypeScriptbrowser-extensionbundlerchrome-extension
    在 GitHub 上查看↗13,069
  • hediet/vscode-drawiohediet 的头像

    hediet/vscode-drawio

    9,451在 GitHub 上查看↗

    This project is a visual diagramming tool and integration for VS Code that allows users to create and edit Draw.io files directly within their workspace. It provides a graphical interface for building architecture diagrams and flowcharts using XML, SVG, and PNG formats. The extension includes a code-to-diagram navigator that links visual nodes to specific files and symbols in the codebase. It also features a collaborative editing environment with synchronized cursors for brainstorming and an offline interface that maintains full functionality without an internet connection. The toolset cover

    TypeScript
    在 GitHub 上查看↗9,451
  • didi/doraemonkitdidi 的头像

    didi/DoraemonKit

    20,420在 GitHub 上查看↗

    DoraemonKit is a mobile frontend development toolset designed to optimize the lifecycle of web and hybrid mobile applications. It functions as a comprehensive suite of productivity tools, providing specialized utilities for mobile UI inspection, web view debugging, and on-device performance monitoring. The toolset distinguishes itself through several targeted simulation and interception capabilities. It includes a network traffic interceptor for mocking API responses without modifying source code, a device state simulator for overriding GPS coordinates, and a mobile web debugging bridge that

    Java
    在 GitHub 上查看↗20,420
    • 查看 React Grab 的所有 30 个替代方案→