13 Repos
Frameworks for adding custom panels to development environments.
Distinguishing note: Focuses on extending existing devtools rather than building new ones.
Explore 13 awesome GitHub repositories matching development tools & productivity · Devtool Extensions. Refine with filters or upvote what's useful.
This project provides a comprehensive suite of tools for managing asynchronous state and building full-stack web applications. At its core, it functions as a centralized synchronization layer that automates data fetching, caching, and background revalidation, ensuring that remote server data remains consistent with the local user interface. By utilizing a declarative, hook-based programming model, it simplifies the management of complex data lifecycles and loading states. The project distinguishes itself through a headless design philosophy that decouples business logic from visual presentati
Integrates custom debugging tools into a unified development panel.
This is a comprehensive library of code examples and reference implementations for building cross-platform user interfaces with Flutter. The project provides a collection of demo applications and guides designed to illustrate the implementation of design patterns, animation techniques, and testing workflows. The repository features specific demonstrations for native integration, including examples of embedding modules into existing native applications, using platform channels, and bridging native code with the framework. It also serves as an animation reference, providing implementations for
Provides examples of configuring and enabling development tool extensions for debugging.
Stetho is a debug bridge that connects Android applications to Chrome Developer Tools. It allows for the real-time inspection of network traffic, internal application state, and the user interface layout directly within a desktop browser. The project provides specialized inspectors for analyzing Android-specific components. This includes a network inspector for capturing HTTP requests and responses, an SQLite database browser for querying local storage, and a view hierarchy inspector for mapping UI elements and styles. Additional capabilities cover runtime execution via an embedded JavaScrip
Integrates Android debugging capabilities directly into the Chrome browser via a custom developer tools extension.
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
Embeds specialized browser extensions for Redux and React to visualize application state and component hierarchies.
《Chrome插件开发全攻略》配套完整Demo,欢迎clone体验
Adds custom panels and sidebars to browser DevTools for inspecting and debugging web pages.
Attaches the debugging shell in a single location so panels are available without per-library setup.
TanStack Form is a cross-framework form state management library that provides typed fields, validation, and submission across React, Vue, Angular, Solid, Lit, Svelte, and Preact. It uses a shared form model that adapts to different UI frameworks while preserving the same validation and submission logic, and offers headless form controls that impose no UI markup, letting developers bring their own inputs and design system. The library distinguishes itself through granular state subscription, where components subscribe to narrow slices of form or field state using reactive primitives, so only
Attaches a single lightweight devtools interface near the app root that works across multiple frameworks.
ios-webkit-debug-proxy is a command-line proxy that bridges Chrome DevTools to Safari Web Inspector on iOS devices, enabling remote debugging of web content over USB. It translates WebKit remote debugging protocol messages into Chrome DevTools Protocol over persistent WebSocket connections, allowing developers to use Chrome DevTools, Safari Web Inspector, or Firefox DevTools to inspect and debug web content in MobileSafari and UIWebViews on real and simulated iOS devices. The proxy discovers and communicates with iOS devices over USB using the libimobiledevice library without requiring iTunes
Accept a custom URL or local path for the DevTools UI to use Chrome DevTools, Safari Web Inspector, or Firefox DevTools.
This project is a boilerplate for Chrome extension development, utilizing React and Vite to build custom functionality and user interfaces for web browsers. The development workflow emphasizes fast iteration through hot-reload capabilities and module rebuilding, which reflect code changes in the browser without manual reloading. It includes a type-safe internationalization system for managing multi-language support and automated end-to-end testing to verify feature stability across different browser packages. The architecture provides a component-based framework for creating popups, options
Provides primitives for adding custom panels and pages to browser developer tools for specialized debugging and state inspection.
Dieses Projekt ist eine Referenzbibliothek und Sammlung praktischer Codebeispiele für den Bau von Browser-Erweiterungen unter Verwendung der WebExtensions-APIs. Es bietet Implementierungsleitfäden und funktionale Beispiele für Kernkomponenten von Erweiterungen, einschließlich Content-Skripten, Hintergrundprozessen und Browser-Action-Popups. Das Repository konzentriert sich auf die Demonstration spezifischer Implementierungsmuster für die Anpassung der Browser-UI und die Manipulation von Webseiten. Es enthält Beispiele für das Erstellen von Sidebars, Kontextmenüs und Optionsseiten sowie Techniken zum Injizieren von Skripten und Styles, um DOM-Elemente und das Seitenaussehen zu verändern. Das Projekt deckt eine breite Palette von Funktionen ab, einschließlich Inter-Prozess-Kommunikation durch Messaging-Bridges, Abfangen und Modifizieren von Netzwerkanfragen sowie die Verwaltung von Browser-Tabs, Verlauf und Lesezeichen. Es bietet zudem Beispiele für Persistenz via Local Storage, Identitätsprüfung mittels OAuth2 und die Integration benutzerdefinierter Panels in Browser-Entwicklertools.
Provides examples for registering custom panels and sidebars within the browser's developer tools.
Aves is an Android media gallery application used for browsing and organizing images and videos. It functions as a multi-purpose tool that combines gallery browsing with a bulk media renamer, an EXIF metadata editor, a GPS media map viewer, and a privacy-focused media vault. The application distinguishes itself through advanced metadata handling, allowing users to modify binary headers to update timestamps and location tags. It features a dynamic pattern-based renaming engine that uses file metadata and cryptographic hashes to update filenames in bulk. Additionally, it provides a secure stora
Enables or disables specific Dart DevTools extensions through a configuration file.
Rails Panel is a developer tool for Ruby on Rails applications that combines performance monitoring, metadata inspection, and source code linking. It functions as a browser extension and server-side middleware that transmits diagnostic data through HTTP response headers to display application metrics directly within browser developer tools. The tool provides a bridge between the browser and local development environments, enabling deep linking from rendered web pages to specific files and line numbers in a configured text editor. It covers request analysis and observability, including the i
Provides a custom panel within browser developer tools to display server-side diagnostic data.
Hint is a web development linter and static analysis tool that audits HTML, CSS, and JavaScript. It provides a suite of specialized validators designed to ensure compliance with accessibility standards, web security header requirements, and general development best practices. The project distinguishes itself by analyzing a wide range of web quality metrics, including browser compatibility for CSS and JavaScript features and PWA configuration validation. It also includes an analyzer for measuring page load speeds, caching, and compression strategies to optimize web performance. The system is
Provides a visual interface within browser developer tools to run site scans against multiple hint sets.