Skip to main content
🚧Under Construction🔨

🚀 Buzz Through Frontend Bugs with AI-Driven Intelligence

Mosqit revolutionizes frontend debugging by combining Visual Bug Reporter, Android Logcat-inspired logging, and Chrome's built-in AI APIs (Gemini Nano). Click any element to capture bugs, analyze console errors with AI, detect patterns, get framework-specific insights, and create professional GitHub issues - all directly from DevTools!

Experience <100ms response times, comprehensive metadata capture, recurring error detection, and actionable fix suggestions - all while maintaining complete privacy through on-device AI processing.

TypeScriptChrome Extension APIWriter APIPrompt APISummarizer API
🧪 Try Demo📚 Tutorial⭐ Star on GitHub

⚠️ Chrome AI Setup Required

🦟 Mosqit uses Chrome's experimental AI APIs. These require specific setup:

Quick Setup (3 Steps):

  1. Chrome Version: You need Chrome 128+ (you probably have 140+)
  2. Enable AI Flags: Go to chrome://flags
    • #optimization-guide-on-device-model → Enabled BypassPerfRequirement
    • #writer-api-for-gemini-nano → Enabled
    • #rewriter-api-for-gemini-nano → Enabled (optional)
    • #summarization-api-for-gemini-nano → Enabled (optional)
  3. Restart Chrome Completely (not just the tab)
🔍 Check Your AI Status⚙️ Open Chrome Flags📚 Chrome AI Docs

Note: The AI model (Gemini Nano) is ~2GB. It downloads automatically when you first use it. Without AI, Mosqit still works using pattern-based analysis! 🦟

✨ Key Features

🤖 AI-Powered Analysis

Leverages Chrome's built-in Gemini Nano model with Writer API for intelligent debugging insights - completely on-device.

🐛 Visual Bug Reporter

Click any element on a webpage to capture bugs visually. Automatically collects element info, console errors, and screenshot for comprehensive bug reports.

🚀 GitHub Issue Creation

Create professional GitHub issues directly from DevTools. AI-generated titles, enhanced descriptions, and complete debugging context included automatically.

🎯 Universal Debugging

Analyzes ALL console outputs - not just errors. Handles logs, warnings, performance issues, network problems, state changes, and debug traces.

📊 Pattern Detection

Automatically identifies recurring errors and issues. Tracks patterns over time to spot systemic problems in your codebase.

🛠️ DevTools Panel

Custom Mosqit panel in Chrome DevTools with Logcat-inspired UI. Real-time log streaming with color-coded severity levels.

⚡ Smart Fallback

40+ built-in debugging patterns ensure you get helpful insights even without AI. Works offline and on non-GPU machines.

🔐 100% Private

All processing happens on-device using Chrome's local Gemini Nano. Your code and logs never leave your machine.

🎨 Context-Aware

Captures DOM state, dependencies, stack traces, and user interactions. AI considers full context for better insights.

💡 Actionable Fixes

Get specific fix suggestions with proper stack trace location tracking. Shows exact file:line:column for every error with DOM context.

🚀 Multi-API Strategy

Uses Writer API for structured insights, Prompt API for complex analysis, and Summarizer API for pattern detection across multiple errors.

🧪 Comprehensive Testing

50+ test scenarios included. Test all Chrome AI APIs, error types, and debugging scenarios with one click.

📦 Easy Setup

5-minute installation. Works with any website or web app. No code changes required in your application.

🌐 Framework Agnostic

Works with React, Vue, Angular, Svelte, or vanilla JavaScript. Automatically detects frameworks and dependencies.

🔄 How Mosqit Works

1. Console Interception: Mosqit overrides ALL console methods (log, warn, error, info, debug) to capture every debugging output in your application.

2. Context Capture: For each log, we capture file location, line numbers, stack traces, DOM state, dependencies, and user interactions.

3. AI Analysis: Chrome's local Gemini Nano model (Writer API) analyzes the output and context to provide debugging insights.

4. Pattern Detection: Recurring issues are automatically identified and tracked over time.

5. DevTools Display: All enhanced logs appear in the custom Mosqit panel in Chrome DevTools with AI insights.

// Standard Chrome DevTools Console:
Uncaught TypeError: Cannot read property 'name' of null
    at UserProfile.js:42:15
    at processComponent (react-dom.js:123:8)
    at beginWork (react-dom.js:456:12)

// 🦟 Mosqit DevTools Panel (click log to expand):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[11:03:02 PM] ❌ ERROR  UserProfile.js:42:15
Cannot read property 'name' of null
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

▼ Log Details (expanded view)

  Message:
  Cannot read property 'name' of null

  🤖 AI Analysis:
  The error "Cannot read property 'name' of null" occurs
  in the UserProfile component. The variable 'user' is null
  when trying to access its 'name' property. This likely
  means the user data hasn't loaded yet or wasn't passed
  correctly to the component.

  Location: UserProfile.js:42:15

  Stack Trace:
  TypeError: Cannot read property 'name' of null
    at UserProfile.render (UserProfile.js:42:15)
    at processComponent (react-dom.js:123:8)
    at beginWork (react-dom.js:456:12)
    at performUnitOfWork (react-dom.js:789:10)

  Metadata:
  • URL: http://localhost:3000/profile
  • Timestamp: 9/21/2025, 11:03:02 PM
  • Level: error
  • User Agent: Mozilla/5.0 (Windows NT 10.0)

🛠️ How to Use Mosqit DevTools Panel

🦟 Quick Start Guide

  1. Install the Extension: Load Mosqit from Chrome Extensions
  2. Open DevTools: Press F12 or right-click → “Inspect”
  3. Find Mosqit Tab: Look for the 🦟 Mosqit panel in DevTools tabs
  4. Start Debugging: All console outputs automatically appear with AI analysis

✨ Panel Features

  • 🌙 Dark/Light Theme: Click the theme toggle in the top-right
  • 🔍 Filter by Level: Click chips for Error, Warn, Info, Debug
  • 🤖 AI Analysis: Toggle AI insights on/off with the AI button
  • 📦 Export Logs: Download all logs as JSON for sharing
  • 🗑️ Clear Logs: Start fresh with the clear button
  • 📊 Live Updates: Logs stream in real-time as they occur

💡 Pro Tips

  • • Click any log to see full details including stack trace
  • • Search logs with Ctrl+F
  • • Press Esc to clear search
  • • Use arrow keys to navigate between logs
  • • Logs available during current debugging session

🛠️ Installation & Setup

🚧
Chrome Web Store submission in progress!
For now, you can build from source or try the demo while we await approval.
🚀
  1. Enable Chrome AI: Navigate to chrome://flags and enable:
    • Prompt API for Gemini Nano
    • Summarization API for WebUI
    • Writer API for WebUI
    • Optimization Guide On Device Model
  2. Restart Chrome: Completely restart Chrome (quit from system tray)
  3. Clone Repository: git clone https://github.com/ma-za-kpe/mosqit.git
  4. Build Extension: npm install && npm run build:extension
  5. Load Extension: Open chrome://extensions, enable Developer mode, load unpacked from dist folder
  6. Download AI Model: Chrome will download Gemini Nano (~2GB) on first use
// 🦟 Mosqit DevTools Panel - Actual Display:

[11:03:02 PM] ❌ ERROR  content.js:215:35
Cannot read properties of null (reading 'addEventListener')
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Click to expand and see:
▼ Log Details

  Message:
  DOM manipulation error: Cannot read properties of null
  (reading 'addEventListener')

  🤖 AI Analysis:
  The error "Cannot read properties of null (reading
  'addEventListener')" occurs because the JavaScript code
  attempted to add an event listener to a DOM element that
  was null. This likely happened because the element targeted
  by the event listener was not found in the DOM at the time
  the code executed.

  Location: content.js:215:35

  Stack Trace:
  Error
    at MosqitLogger.captureMetadata (content.js:273:21)
    at console.<computed> [as error] (content.js:215:35)
    at testDOMError (test-logger.js:88:17)
    at HTMLButtonElement.onclick (test-logger.html:56:56)

  Metadata:
  • URL: http://localhost:3000/test/test-logger.html
  • Timestamp: 9/21/2025, 11:03:02 PM
  • Level: error
  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)

[11:03:05 PM] ⚠️ WARN  app.js:156:8
API response slow: 3.2s
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

[11:03:07 PM] ✅ INFO  content.js:215
[Mosqit] ✅ Logger initialized
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🚀 Advanced Capabilities

🌐 Content Script Bridge

Sophisticated message passing between content scripts and extension. MAIN world execution with secure PostMessage protocol.

💾 Smart Memory Management

Efficient in-memory log caching for current session, pattern detection cache, and reusable AI session management for optimal performance.

📈 Performance Metrics

Sub-50ms analysis latency, 100% console output coverage, 95% pattern detection accuracy with minimal memory footprint.

🔄 Session Management

Intelligent AI session reuse, automatic cleanup, rolling buffer for logs, and efficient resource management.

🔮 Coming Soon

We're continuously improving Mosqit with new features based on community feedback:

✅ GitHub Integration (Released!)

Now available! Create issues directly from debugging insights with AI-generated descriptions and reproduction steps.

✅ Released in v1.0.0

📱 Mobile Dashboard

Responsive web dashboard for viewing and managing logs on mobile devices. Real-time sync across devices.

🚧 Coming Soon

🌍 Multi-Language Support

Localized debugging insights in 5+ languages using Chrome Translator API. Technical terms preserved.

🚧 Coming Soon

👥 Team Collaboration

Share debugging sessions, add comments to logs, @mention teammates, and track issue resolution together.

📋 Backlog

📊 Summarizer API

Condense long stack traces, group related errors, and create executive summaries of debugging sessions.

🚧 Planned

✏️ Rewriter API

Simplify complex technical errors for junior developers. Adjust explanation complexity based on experience.

🚧 Planned

📊 Feature Status & Roadmap

✅ Implemented (Core Features)

  • Visual Bug Reporter with element selection and screenshot capture
  • GitHub Issue Creation with AI-generated content
  • AI-Powered Universal Debugging with Chrome Writer API
  • DevTools Panel with Logcat-inspired UI
  • Intelligent Pattern Detection System
  • Context-Aware Analysis (DOM, Stack, Dependencies)
  • 40+ Fallback Patterns for Offline Operation
  • Content Script Bridge Architecture
  • Comprehensive Test Suite (75+ scenarios)
  • 100% On-Device Privacy
  • Copy Issue Content with visual feedback
  • Auto-recovery from invalid GitHub tokens

✅ Recently Completed

  • Visual Bug Reporter with element selection and screenshot capture
  • GitHub Integration - Create issues directly from DevTools
  • AI-Generated issue titles and enhanced descriptions
  • Copy to clipboard with visual feedback
  • Auto-recovery from invalid GitHub tokens
  • Professional DevTools Panel with Android Logcat-inspired dark UI
  • Chrome Writer & Prompt API Integration
  • Export/Import Debug Sessions with JSON format
  • Light/Dark Theme Toggle with saved preferences
  • Real-time log streaming with expandable metadata
  • Pattern tracking and recurring error detection
  • Developer Notes with debugging checklists
  • Comprehensive test suite (75+ test scenarios)

🚧 In Development

  • Chrome Summarizer API Integration
  • Chrome Rewriter API for Error Simplification
  • Jira Integration
  • Video Recording for Bug Reproduction

📋 Planned Features

  • Mobile Dashboard
  • Multi-Language Support
  • Team Collaboration Features
  • VS Code Extension
  • CI/CD Pipeline Integration
  • Slack/Discord Notifications

🤝 Open Source Project

Mosqit is proudly open source and welcomes contributions from the community. Whether you're fixing bugs, adding features, or improving documentation, your help makes Mosqit better for everyone.

🐛 Report Issues🔀 Submit PR💬 Discussions

🔗 Chrome AI Developer Resources

Join the Chrome Early Preview Program community and access official resources for building with Chrome's built-in AI:

📚Official API Docs

Complete documentation for Chrome's built-in AI APIs including Writer, Prompt, and Summarizer APIs.

View API Docs →

🗂️EPP Docs Index

Comprehensive index including multimodal and hybrid AI capabilities, experimental features, and advanced use cases.

Browse Index →

💬Discussion Forum

Connect with the Chrome AI developer community, share ideas, get help, and provide feedback on the APIs.

Join Discussion →

🎮Discord Community

Real-time chat with Chrome AI developers and enthusiasts. Get instant help and share your projects.

Join Discord →
🏆 Building for Chrome Built-in AI Challenge? These resources are essential for maximizing your use of Chrome's AI capabilities!

☕ Support Development

Mosqit is free and open source forever. If you find it helpful, consider supporting the development!

Your support helps us:

  • ✨ Add new features faster
  • 🐛 Fix bugs and improve performance
  • 📚 Create better documentation
  • 🌍 Add support for more languages
  • ⚡ Keep the project maintained and updated
☕ Buy Me a Coffee❤️ GitHub Sponsors

100% optional - Mosqit will always be free and open source!

Mosqit - Built with ❤️ for the Chrome Built-in AI Challenge 2025

GitHubChrome AI DocsTest SuiteTutorialMIT License

© 2025 Mosqit Project. Open Source under MIT License.