For component inspection utilities, the strongest matches are vuejs/vue-devtools (Vue-devtools provides component tree inspection, state viewing, and a), facebook/react-devtools (React DevTools is a browser extension and component inspector) and zalmoxisus/redux-devtools-extension (This project is a dedicated browser extension and debugging). reduxjs/redux-devtools and storybookjs/storybook round out the shortlist. Each is ranked by relevance to your query, popularity and recent activity.
Hand-picked component inspection utilities. Compare top open-source tools ranked by stars and activity to find the best fit.
Vue-devtools is a browser debugger and state inspector for Vue.js applications. It functions as a frontend framework utility integrated into the browser to analyze the structure and internal state of web applications during development. The tool provides capabilities for component analysis and state inspection, allowing for the examination of component hierarchies and real-time data flow. It enables the monitoring of reactivity and the organization of running applications within the browser developer tools pane. The project covers a broader debugging workflow focused on observability and the
Vue-devtools provides component tree inspection, state viewing, and a browser extension for debugging Vue applications, directly aligning with your search for UI component inspection tools.
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 and component inspector specifically built for viewing React component trees, inspecting props and state, and debugging UI runtime behavior.
This project is a state management inspector and debugging tool for Redux. It provides a browser-based interface for inspecting and modifying application state and actions in real time, serving as an action logger and time travel debugger to troubleshoot application logic. The tool allows users to navigate a chronological history of state changes to replay previous versions of the application or skip specific actions. It also functions as a remote monitoring bridge, streaming Redux state and actions from non-browser environments to a centralized debugging interface. The capability surface in
This project is a dedicated browser extension and debugging tool for inspecting application state, logging actions, and providing time-travel debugging capabilities, though its scope is focused strictly on Redux state management rather than general UI component trees.
Redux DevTools is a development utility designed for inspecting, monitoring, and replaying state changes within applications built using the Redux predictable state container. It functions as a JavaScript state inspector that tracks data flow and visualizes action sequences to assist in identifying logic errors during the development process. The tool provides time-travel debugging capabilities, allowing developers to navigate through recorded action sequences to isolate specific application states. By capturing state transitions as a sequential log, it enables the reproduction of past applic
Redux DevTools is a specialized state inspector and time-travel debugger for Redux-based applications, but it focuses on state management rather than broader UI component tree inspection.
Storybook is a development environment for building, testing, and documenting user interface components in isolation. By rendering components within a sandboxed environment, it decouples them from the host application's global state and dependencies, allowing developers to verify complex states and edge cases without running the full application. The platform utilizes a framework-agnostic bridge layer to support various frontend technologies and features a modular, addon-based architecture that allows for custom UI panels and toolbar controls. It captures component states as declarative metad
Storybook is a component development environment and isolated sandbox that lets you view and test UI components, making it a natural fit for UI inspection despite focusing more on authoring and documentation than live-app debugging.
⚙️ Browser devtools extension for debugging Vue.js applications.
This browser extension is specifically designed for debugging Vue.js applications, providing component tree inspection and state viewing, though it is limited to a single framework rather than being a universal tool.
Ember Inspector is a browser extension and developer tool that adds a dedicated debugging tab to standard web browser developer tools for examining running web applications built with Ember. It extracts and serialises live application objects, component trees, and data stores into an inspection interface, providing visibility into internal application state, services, and component hierarchies. In addition to traditional extension packaging for major web browsers, the tool supports dynamic script injection through a saved bookmarklet snippet. This bookmarklet loader enables the debugging inte
This browser extension integrates directly into developer tools to inspect Ember UI components, providing object inspection and debugging capabilities tailored to that framework.
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
This standalone desktop debugger focuses on React Native mobile applications rather than web application UI components, making it an adjacent tool for runtime and state inspection.
This project is a reactive state management library designed for Angular applications. It provides a centralized store that maintains a single immutable source of truth, ensuring that all application data transitions follow a predictable, unidirectional flow. The library implements the Redux pattern, utilizing discrete actions and pure functions to trigger state updates. It leverages observable streams to propagate these changes, allowing user interface components to bind reactively to specific slices of data. By isolating asynchronous operations and external interactions into independent act
This repository is a reactive state management library for Angular rather than a UI component inspector or debugger, making it a neighbouring building block for handling application data rather than the inspection tool itself.
Immersive Translate is a browser-based translation tool that integrates third-party translation engines and large language models to provide automated, real-time text conversion directly within the web interface. It functions as a browser extension that intercepts and modifies web content, injecting translated text nodes into the document object model to maintain original page layouts and styling. The project distinguishes itself through its granular control over the translation process, allowing users to define site-specific rules, manage custom terminology glossaries, and customize translat
Immersive Translate is a browser extension for translating web page content rather than a tool for inspecting, debugging, or visualizing UI component trees and state.
Refined GitHub is a browser extension enhancement suite designed to improve developer productivity by augmenting the native web interface of code hosting platforms. It functions as a modular framework that injects custom JavaScript and stylesheets directly into the browser context, allowing for real-time manipulation of the page structure and visual design. The project distinguishes itself through a declarative architecture that monitors the document for structural changes, enabling it to dynamically patch interface elements as users navigate. By intercepting native event flows and applying c
Refined GitHub is a browser extension that enhances code hosting platform interfaces rather than a tool for inspecting and debugging web application UI components.
Tweakpane is a web GUI control panel and JavaScript parameter debugger used for inspecting frontend state and monitoring real-time variable changes. It provides a graphical interface for adjusting application parameters and tracking values as they change during program execution. The project allows for the creation of interactive inputs and read-only value monitors that bind directly to data variables. It organizes these controls through a hierarchical layout of folders and tabs and supports the serialization of control panel configurations and parameter states into JSON files for persistence
Tweakpane is a useful parameter debugger and GUI control panel for monitoring runtime variables, but it lacks the component tree inspection and browser extension capabilities required to inspect full UI component hierarchies.
| Repository | Stars | Language | License | Last push |
|---|---|---|---|---|
| vuejs/vue-devtools | 24.7K | TypeScript | MIT | |
| facebook/react-devtools | 11K | — | NOASSERTION | |
| zalmoxisus/redux-devtools-extension | 13.5K | JavaScript | MIT | |
| reduxjs/redux-devtools | 14.3K | TypeScript | mit | |
| storybookjs/storybook | 90.4K | TypeScript | MIT | |
| vuejs/devtools | 2.9K | TypeScript | MIT | |
| emberjs/ember-inspector | 970 | JavaScript | MIT | |
| jhen0409/react-native-debugger | 10.5K | JavaScript | MIT | |
| ngrx/store | 3.9K | TypeScript | MIT | |
| immersive-translate/immersive-translate | 17.9K | — | — |