You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A browser extension that visually highlights JavaScript errors directly on DOM elements, providing immediate feedback.
19
+
Streamline frontend debugging and boost productivity with real-time error visualization.
12
20
13
-
**JSErrorFlow** is a cutting-edge browser extension that visually highlights JavaScript errors directly on DOM elements in real-time. This developer tool streamlines frontend debugging, boosts productivity, and provides immediate, intuitive visual feedback to accelerate development cycles. Pinpoint and fix errors faster.
21
+
## Table of Contents
14
22
15
-
## 🚀 Features
23
+
-[Features](#features)
24
+
-[Installation](#installation)
25
+
-[Usage](#usage)
26
+
-[Contributing](#contributing)
27
+
-[License](#license)
28
+
-[AI Agent Directives](#ai-agent-directives)
16
29
17
-
***Real-Time Error Highlighting:** Errors are visualized directly on the affected DOM elements as they occur.
18
-
***Intuitive Visual Feedback:** Understand error context at a glance without deep console diving.
19
-
***Cross-Browser Compatibility:** Designed for Chrome and Firefox.
20
-
***Developer Productivity Boost:** Accelerate debugging and development cycles significantly.
30
+
## Features
21
31
22
-
---
32
+
-**Real-time Error Highlighting:** Visually identify JavaScript errors on DOM elements as they occur.
33
+
-**Streamlined Debugging:** Pinpoint and fix errors faster with immediate visual feedback.
34
+
-**Enhanced Productivity:** Reduce debugging time and improve overall development efficiency.
35
+
-**Cross-Browser Compatibility:** Supports Chrome and Firefox.
36
+
-**Vite & TypeScript:** Built with modern tools for optimal performance and maintainability.
B --> C[Content Script: DOM Monitoring & Error Detection]
30
-
C --> D[Content Script: Error Visualization Logic]
31
-
D --> E[Content Script: Direct DOM Manipulation]
32
-
B --> F[Background Script: Event Handling & Messaging]
33
-
F <--> G[Browser APIs]
34
-
B --> H[Popup/Devtools Panel (Optional): Configuration & Summaries]
35
-
H <--> G
40
+
### Chrome
36
41
42
+
1. Clone this repository: `git clone https://github.com/chirag127/JSErrorFlow-Real-Time-Visualizer-Browser-Extension.git`
43
+
2. Navigate to `chrome://extensions/` in your Chrome browser.
44
+
3. Enable "Developer mode" in the top right corner.
45
+
4. Click "Load unpacked" and select the `dist` directory from the cloned repository.
37
46
38
-
##📄 Table of Contents
47
+
### Firefox
39
48
40
-
*[🚀 Features](#-features)
41
-
*[🏛️ Architecture](#️-architecture)
42
-
*[📄 Table of Contents](#-table-of-contents)
43
-
*[🤖 AI Agent Directives](#-ai-agent-directives)
44
-
*[🔧 Development Setup](#-development-setup)
45
-
*[📦 Build & Development Scripts](#-build--development-scripts)
46
-
*[🛡️ Principles](#️-principles)
47
-
*[📜 License](#license)
48
-
*[⭐ Support](#⭐-support)
49
+
1. Clone this repository: `git clone https://github.com/chirag127/JSErrorFlow-Real-Time-Visualizer-Browser-Extension.git`
50
+
2. Navigate to `about:debugging#/runtime/this-firefox` in your Firefox browser.
51
+
3. Click "Load Temporary Add-on..." and select the `manifest.json` file from the cloned repository.
49
52
50
-
---
53
+
## Usage
51
54
52
-
## 🤖 AI Agent Directives
55
+
1. Open a web page with JavaScript enabled.
56
+
2. The extension will automatically highlight any DOM elements with JavaScript errors.
57
+
3. Inspect the highlighted elements to identify and fix the errors.
58
+
59
+
## Contributing
60
+
61
+
See [CONTRIBUTING.md](https://github.com/chirag127/JSErrorFlow-Real-Time-Visualizer-Browser-Extension/blob/main/.github/CONTRIBUTING.md) for details on how to contribute.
62
+
63
+
## License
64
+
65
+
This project is licensed under the [CC BY-NC 4.0 License](https://github.com/chirag127/JSErrorFlow-Real-Time-Visualizer-Browser-Extension/blob/main/LICENSE) - see the [LICENSE](https://github.com/chirag127/JSErrorFlow-Real-Time-Visualizer-Browser-Extension/blob/main/LICENSE) file for details.
53
66
54
67
<details>
55
-
<summary><code>Expand for Agent Directives</code></summary>
**Role:** You are a Senior Principal Software Architect and Master Technical Copywriter with **40+ years of elite industry experience**. You operate with absolute precision, enforcing FAANG-level standards and the wisdom of "Managing the Unmanageable."
61
75
**Context:** Current Date is **December 2025**. You are building for the 2026 standard.
62
76
**Output Standard:** Deliver **EXECUTION-ONLY** results. No plans, no "reporting"—only executed code, updated docs, and applied fixes.
**Directives:** Detect the project type and apply the corresponding **Apex Toolchain**. This repository, `JSErrorFlow-Real-Time-Visualizer-Browser-Extension`, is a browser extension project.
82
-
83
-
***PRIMARY SCENARIO A: WEB / APP / EXTENSION (TypeScript/JavaScript)**
84
-
***Stack:** This project leverages **TypeScript 6.x** and **JavaScript**. Key tools include **Vite 7 (Rolldown)** for fast builds, **WXT (Web Extension Tooling)** for streamlined extension development, and **Biome** for lightning-fast linting and formatting.
85
-
***Architecture:** Employs a **Modular Architecture** suitable for browser extensions, with clear separation between content scripts, background scripts, and potential UI panels (like popups or devtools). Adheres to **Feature-Sliced Design (FSD)** principles where applicable for maintainable code organization.
86
-
***Linting & Formatting:****Biome** is mandated for code quality and consistency across the project. Its speed ensures minimal disruption to development velocity.
87
-
***Testing:****Vitest** is the standard for unit and component testing, integrated seamlessly with Vite. **Playwright** is mandated for end-to-end (E2E) testing to simulate real user interactions across different browser environments.
88
-
***Styling:****Tailwind CSS v4** is the preferred utility-first CSS framework for rapid UI development.
89
-
90
-
***SECONDARY SCENARIO B: SYSTEMS / PERFORMANCE (Rust/Go) - *Not applicable.***
91
-
***TERTIARY SCENARIO C: DATA / AI / SCRIPTS (Python) - *Not applicable.***
92
-
93
-
---
94
-
95
-
## 4. OPERATIONAL PROTOCOLS
96
-
***CODE QUALITY & VERIFICATION:**
97
-
***Strict Linting:** All code must pass Biome checks without errors or warnings.
98
-
***Testing Coverage:** Maintain a minimum of **85% code coverage** via Vitest.
99
-
***E2E Validation:** All critical user flows must pass Playwright E2E tests.
100
-
***Type Safety:****MANDATORY** TypeScript strict mode (`"strict": true`). Utilize `any` sparingly and only when absolutely necessary and justified.
101
-
***Immutable State:** Prefer immutable data structures and state management patterns.
cd JSErrorFlow-Real-Time-Visualizer-Browser-Extension
152
-
153
-
154
-
2.**Install Dependencies:**
155
-
bash
156
-
npm install
157
-
# or
158
-
yarn install
159
-
160
-
161
-
3.**Run in Development Mode:**
162
-
This command starts the Vite development server and builds the extension in watch mode. You can then load the extension in your browser (e.g., Chrome, Firefox) from the `dist` folder.
163
-
bash
164
-
npm run dev
165
-
# or
166
-
yarn dev
167
-
168
-
169
-
4.**Run Linters & Formatters:**
170
-
Ensure your code adheres to the project's coding standards.
***YAGNI (You Ain't Gonna Need It):** Focusing on current requirements.
208
-
***KISS (Keep It Simple, Stupid):** Favoring straightforward solutions.
209
-
210
-
---
211
-
212
-
## 📜 License
213
-
214
-
This project is licensed under the **Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0)**. See the [LICENSE](https://github.com/chirag127/JSErrorFlow-Real-Time-Visualizer-Browser-Extension/blob/main/LICENSE) file for more details.
**Directives:** Detect the project type (`pyproject.toml` for Python) and apply the corresponding **Apex Toolchain**. This repository, `PRFusion-AI-Powered-GitHub-Automation-CLI-Toolkit`, is a Python-based AI automation tool.
92
+
93
+
***PRIMARY SCENARIO: DATA / SCRIPTS / AI (Python)**
94
+
***Stack:** This project leverages **Python 3.10+**. Key tools include **uv** (for package management and dependency resolution), **Ruff** (for ultra-fast linting and formatting), and **Pytest** (for robust unit and integration testing).
95
+
***Architecture:** Adheres to a **Modular Monolith** pattern, ensuring clear separation of concerns for features like GitHub API interaction, AI processing, and CLI interface, while maintaining a unified deployment.
96
+
***AI Integration:** Deeply integrated with **Google Gemini API** (`gemini-3-pro` by default) for intelligent batch-processing and decision-making on GitHub resources. Prioritize modular design, clear API contracts, and robust error handling for all AI model interactions.
97
+
***CLI Framework:** Uses `Click` or similar for a powerful and intuitive command-line interface.
98
+
99
+
***SECONDARY SCENARIO A: WEB / APP / EXTENSION (TypeScript) - *Not applicable for this project's primary function. Reference only for potential future web-based extensions.***
If you find this project valuable, please consider starring the repository on GitHub! Your support fuels future development.
221
-
222
-
[<imgsrc="https://img.shields.io/github/stars/chirag127/JSErrorFlow-Real-Time-Visualizer-Browser-Extension?color=blue&label=Star%20on%20GitHub&logo=github"alt="Star on GitHub" />](https://github.com/chirag127/JSErrorFlow-Real-Time-Visualizer-Browser-Extension/stargazers)
0 commit comments