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 एक लाइटवेट JavaScript लाइब्रेरी है जो एप्लिकेशन के विभिन्न हिस्सों के बीच डीकूपल्ड कम्युनिकेशन को प्रबंधित करने के लिए पब्लिश-सब्सक्राइब पैटर्न को लागू करती है। यह एक डिपेंडेंसी-फ्री मैसेज ब्रोकर और इवेंट बस के रूप में कार्य करती है, जिससे कंपोनेंट्स को सीधे डिपेंडेंसी की आवश्यकता के बिना डेटा का आदान-प्रदान करने की अनुमति मिलती है। यह सिस्टम नामित टॉपिक्स के माध्यम से इवेंट्स के ऑर्केस्ट्रेशन को सक्षम बनाता है, जिससे डेवलपर्स सब्सक्राइबर कॉलबैक रजिस्टर कर सकते हैं और सभी इच्छुक लिसनर्स को मैसेज ब्रॉडकास्ट कर सकते हैं। यह विशेष रूप से कंपोनेंट कम्युनिकेशन को डीकूपल करने और कई सेवाओं या इंटरफ़ेस एलिमेंट्स में स्टेट परिवर्तनों की सूचना देने का समर्थन करता है। इस लाइब्रेरी में फ्रंटएंड डिबगिंग में सहायता के लिए मॉनिटरिंग क्षमताएं शामिल हैं, जो अपवादों (exceptions) को ग्लोबल स्कोप तक बबल करने की अनुमति देती हैं, जिससे मैसेज डिलीवरी के दौरान स्टैक ट्रेसेस सुरक्षित रहते हैं।

WeChatOpenDevTools-Python is a set of software utilities designed to bypass environment restrictions to enable debugging and element inspection for web and mini program applications. It functions as a developer tool unlocker and web inspector activator to force the activation of integrated inspection tools. The project provides specialized capabilities for debugging and reverse engineering WeChat mini programs. This includes the ability to access hidden developer consoles to analyze the structure, network requests, and behavior of active mini programs and web content. These utilities utilize

यह प्रोजेक्ट React कंपोनेंट लाइफसाइकिल के लिए एक इंटरैक्टिव विज़ुअलाइज़ेशन टूल और शैक्षिक गाइड है। यह कंपोनेंट्स के माउंट, अपडेट और अनमाउंट होने के तरीके को दिखाने के लिए कंपोनेंट मेथड्स के निष्पादन क्रम का एक ग्राफिकल रिप्रेजेंटेशन प्रदान करता है। यह टूल एक डॉक्यूमेंटेशन नेविगेटर के रूप में कार्य करता है, जो विशिष्ट लाइफसाइकिल चरणों और मेथड्स को सीधे आधिकारिक तकनीकी संदर्भों से जोड़ता है। यह विस्तृत कार्यान्वयन मार्गदर्शन के साथ निष्पादन अनुक्रमों की विज़ुअल मैपिंग की अनुमति देता है। यह एप्लिकेशन लाइफसाइकिल अनुक्रम को रेंडर करने के लिए वेक्टर-आधारित ग्राफिक्स का उपयोग करता है और यूजर्स को यह पहचानने में मदद करने के लिए इंटरैक्टिव तत्वों का उपयोग करता है कि लॉजिक कहां होना चाहिए और डेटा फ्लो कैसे री-रेंडर को ट्रिगर करता है।

source-map-explorer एक सोर्स मैप बंडल एनालाइज़र है जो बंडल की गई JavaScript फाइल्स के स्पेस उपयोग को विज़ुअलाइज़ करता है। यह एक बंडल साइज ऑडिटर और विज़ुअलाइज़र के रूप में कार्य करता है, जो यह पहचानने के लिए सोर्स मैप्स का उपयोग करता है कि कौन से मूल मॉड्यूल्स और फाइल्स प्रोडक्शन बंडल के भीतर सबसे अधिक जगह घेरते हैं। यह टूल बंडल संरचना को रिप्रेजेंट करने के लिए एक इंटरैक्टिव ट्री-मैप बनाता है और वास्तविक नेटवर्क ट्रांसफर लागत का अनुमान लगाने के लिए कंप्रेस्ड gzip साइज की गणना करता है। यह अप्रयुक्त कोड सेगमेंट की पहचान करने के लिए सोर्स मैप्स पर निष्पादन डेटा को ओवरले करके एक कोड कवरेज मैपर के रूप में भी कार्य करता है जिन्हें टाला या विभाजित किया जा सकता है। यूटिलिटी फाइल लेबल्स को सरल बनाने के लिए रेगुलर एक्सप्रेशन्स के माध्यम से पाथ सैनिटाइज़ेशन के लिए क्षमताएं प्रदान करती है और विश्लेषण परिणामों को HTML, JSON, या TSV फॉर्मेट्स में निर्यात करने का समर्थन करती है।