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 and flextool/flex round out the shortlist. 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.
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.
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.
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.
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.
FLEX is a diagnostic framework designed for the inspection and modification of mobile applications during active execution. It provides a suite of tools that allow developers to explore the internal state of a running process, including its memory, class definitions, and object properties, without requiring a recompilation of the source code. The tool distinguishes itself by enabling real-time interaction with the application environment. It facilitates dynamic user interface prototyping by allowing for the traversal and modification of visual hierarchies, as well as the direct manipulation o
FLEX is a runtime inspection and modification framework for native mobile apps (iOS/macOS), which makes it a debugging tool for a different platform than the web-focused UI component inspector you're looking for.
DoKit is a frontend development debugging toolset designed for web and mobile applications. It provides a suite of utilities for intercepting network traffic, mocking API responses, inspecting UI hierarchies, and monitoring mobile app performance. The project is distinguished by its focus on hybrid app inspection, allowing developers to execute scripts within web views and browse internal application sandboxes. It includes a visual UI audit tool with alignment rulers and color pickers to verify that interfaces match design specifications, as well as a diagnostic system that tracks CPU usage a
DoKit is a debugging toolset focused on mobile and hybrid app inspection (UI hierarchy, network, performance) rather than specifically debugging web UI component trees, state, or re-renders for frameworks like React or Vue.
Kraken is a cross-platform UI framework and web standards runtime designed to build native applications using standard web markup and styling. It utilizes a Flutter-based rendering engine to process HTML and CSS, producing visually consistent user interfaces across mobile and desktop platforms. The system distinguishes itself by compiling the runtime to machine code and employing a synchronous rasterization pipeline to ensure animations and scrolling match the fluidity of native applications. It further integrates high-performance native components directly into a web-standard document object
Kraken is a cross-platform UI framework and runtime, not a dedicated debugging utility for inspecting and profiling UI components during development, so it doesn't squarely fit the category you're looking for.