Awesome GitHub RepositoriesFrontend Debugging Workflows

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

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

This project is a CommonJS module bundler and resolver designed to combine interdependent JavaScript files into a single script for execution in web browsers. It functions as a Node.js JavaScript bundler that emulates server-side core modules and resolves dependencies to ensure compatibility between server-side logic and browser environments. The system features an extensible bundling pipeline and a browser-side module resolver. It provides a plugin architecture for transforming source code and a source map generator to correlate bundled output back to original files for debugging. The proje

OpenReplay is a session replay platform and frontend debugging suite designed to record and play back user browser sessions. It functions as a user behavior monitoring system that captures interaction patterns and technical metadata to identify conversion issues and revenue loss. The platform is distinguished by its self-hosted infrastructure model, allowing the recording and analytics pipeline to be deployed on private servers for full control over data residency. It also includes a browser co-browsing tool for real-time screen sharing and direct communication to provide immediate technical

Capybara is a browser automation testing library and framework for web application acceptance testing. It provides a high-level API for automating browser navigation and element interaction to validate user-facing features. The project features a cross-browser driver interface that allows switching between headless and full browser environments without modifying the underlying test code. This abstraction enables the simulation of complex web workflows across different browser drivers and environments. The suite covers user interaction simulation, including form filling, click events, and bro

This project is a collection of patterns and configurations for deploying AI agents with specialized technical skills and personas. It provides a framework for agentic software engineering, defining standards for AI-driven development workflows and the management of modular technical capabilities. The system features a skill framework that activates technical guidelines based on prompt intent and a context management system that preserves project state using persistent plans and checklists across session resets. It employs a modular organization of guidelines to prevent context window overflo

This project is a browser automation toolset and Model Context Protocol server that connects large language models to live browser sessions. It provides a web debugging interface and a quality auditor to facilitate the analysis of document object model structures and browser logs. The system implements a bridge that streams diagnostics into AI-powered editors, allowing for the automated identification of web bugs. It features a data sanitization pipeline that removes cookies and sensitive headers to prevent private information leakage during the analysis process. The toolset covers a range o

doctest is a lightweight C++ unit testing framework and assertion library. It provides a single-header implementation that eliminates complex build dependencies, allowing developers to write and execute test cases directly within their source code. The framework is distinguished by its focus on compile-time performance and binary overhead. It uses conditional compilation guards to strip all testing logic and metadata from production binaries. Additionally, it features hierarchical subcases that re-execute parent setup code to isolate different execution paths within a single test case. Its c

PubSubJS es una librería ligera de JavaScript que implementa el patrón de publicación-suscripción para gestionar la comunicación desacoplada entre diferentes partes de una aplicación. Funciona como un message broker y bus de eventos sin dependencias, permitiendo que los componentes intercambien datos sin requerir dependencias directas. El sistema permite la orquestación de eventos mediante temas con nombre, permitiendo a los desarrolladores registrar callbacks de suscriptores y transmitir mensajes a todos los oyentes interesados. Soporta específicamente el desacoplamiento de la comunicación entre componentes y la notificación de cambios de estado a través de múltiples servicios o elementos de interfaz. La librería incluye capacidades de monitoreo para asistir en la depuración del frontend, permitiendo que las excepciones se propaguen al ámbito global y preservando los stack traces durante la entrega de mensajes.

WeChatOpenDevTools-Python es un conjunto de utilidades de software diseñadas para eludir restricciones de entorno para permitir la depuración y la inspección de elementos para aplicaciones web y mini programas. Funciona como un desbloqueador de herramientas de desarrollador y activador de inspector web para forzar la activación de herramientas de inspección integradas. El proyecto proporciona capacidades especializadas para la depuración e ingeniería inversa de mini programas de WeChat. Esto incluye la capacidad de acceder a consolas de desarrollador ocultas para analizar la estructura, las solicitudes de red y el comportamiento de los mini programas activos y el contenido web. Estas utilidades utilizan técnicas de manipulación de runtime de bajo nivel, incluyendo instrumentación binaria dinámica, inyección de procesos y parches de memoria. El software escanea direcciones de memoria específicas para alternar flags internos y alterar el estado de ejecución del proceso objetivo.

This project is an interactive visualization tool and educational guide for the React component lifecycle. It provides a graphical representation of the execution order of component methods to show how components mount, update, and unmount. The tool functions as a documentation navigator, linking specific lifecycle stages and methods directly to official technical references. This allows for the visual mapping of execution sequences alongside detailed implementation guidance. The application uses vector-based graphics to render the lifecycle sequence and employs interactive elements to help

source-map-explorer is a source map bundle analyzer that visualizes the space usage of bundled JavaScript files. It functions as a bundle size auditor and visualizer, using source maps to identify which original modules and files occupy the most space within a production bundle. The tool generates an interactive treemap to represent bundle composition and calculates compressed gzip sizes to estimate actual network transfer costs. It further serves as a code coverage mapper by overlaying execution data onto source maps to identify unused code segments that can be deferred or split. The utilit