Component debugging tools
For a debugging utility for frontend components, the strongest matches are facebook/react-devtools (React DevTools is a browser extension that provides deep), jhen0409/react-native-debugger (React Native Debugger is a standalone application for inspecting) and open-source-labs/reactime (Reactime is a browser extension that debugs and profiles). lahmatiy/react-render-tracker is also worth a look. Each is ranked by relevance to your query, popularity and recent activity.
Explore the best component debugging tools for your stack. Compare top-rated open-source utilities by activity and features to find the best fit.
Component debugging tools
用 AI 发现最棒的仓库。我们将通过 AI 为您搜索最匹配的仓库。
- facebook/react-devtools
facebook/react-devtools
11,012在 GitHub 上查看React DevTools is a set of web browser developer tools integrated into Chrome and Firefox. It functions as a component inspector and UI debugger designed to visualize the component hierarchy and analyze the runtime behavior of React applications. The project includes a performance profiler used to detect unnecessary component re-renders and improve rendering efficiency. It also provides utilities for mapping virtual component trees to the physical DOM and linking rendered UI elements directly to their corresponding source code files and line numbers. The toolset covers component hierarchy vi
React DevTools is a browser extension that provides deep component tree inspection, state/props viewing, re-render detection, and performance profiling, making it the definitive debugging tool for React components.
Component Hierarchy Mirroring - jhen0409/react-native-debugger
jhen0409/react-native-debugger
10,460在 GitHub 上查看React Native Debugger is a standalone developer application for inspecting and debugging JavaScript runtimes in mobile applications built with React Native. It provides a dedicated interface to monitor the runtime state, network requests, and console logs of a remote mobile environment. The tool integrates specialized inspectors for Redux state management and GraphQL client debugging, allowing for time-traveling state transitions and the analysis of queries, mutations, and local cache. It also features a component hierarchy viewer for visualizing and modifying UI properties in real time. Bro
React Native Debugger is a standalone application for inspecting and debugging React Native components, offering a component hierarchy viewer, state/props inspection via Redux/GraphQL inspectors, and real-time property editing, but it lacks browser extension integration and explicit performance profiling.
JavaScriptComponent Hierarchy MirroringUI Inspection Tools - open-source-labs/reactime
open-source-labs/Reactime
2,238在 GitHub 上查看Reactime is a browser extension designed for debugging and profiling React applications. It provides a specialized interface for monitoring component hierarchies, tracking state transitions, and analyzing data flow within complex component trees. The tool distinguishes itself through time-travel debugging capabilities, which allow developers to capture and replay state snapshots to isolate logic errors. It also features a dependency graph mapper that visualizes the relationships between providers and consumers, clarifying how information is distributed throughout an application. Beyond core
Reactime is a browser extension that debugs and profiles React apps by inspecting component trees, tracking state transitions with time-travel replay, and visualizing dependency flows—covering the core inspector and profiler features sought, though it focuses on React rather than Vue or other frameworks.
TypeScriptState Debugging ToolsApplication Performance ProfilingComponent Lifecycle Hooks - lahmatiy/react-render-tracker
lahmatiy/react-render-tracker
2,401在 GitHub 上查看React Render Tracker is a diagnostic utility designed to monitor and analyze the rendering behavior of React applications. It functions as a developer tool that tracks component lifecycles, visualizes component hierarchies, and identifies the specific state, prop, or context changes that trigger re-renders. The tool distinguishes itself by providing deep visibility into internal framework operations, including the ability to inspect hook states and map the live component tree. It offers flexible inspection configurations, allowing developers to monitor performance through in-page overlays, br
React Render Tracker is a focused devtool that detects unintentional re-renders and performance issues in React apps, covering re-render detection and profiling but not broader component tree inspection, state viewing, or event replay.
TypeScriptReact Component DebuggersLifecycle Interception PatchesUpdate Cause Analysis
