🦟 Mosqit Tutorial

Get started in 5 minutes

📥 Install the Extension

Load the Mosqit extension in Chrome to start debugging with AI-powered insights.

Quick Install Steps:

Open chrome://extensions/ in Chrome
Enable "Developer mode" (top right)
Click "Load unpacked"
Select the dist/extension folder

✅ Success! You should see the Mosqit icon (🦟) in your Chrome toolbar.

🤖 Enable Chrome AI (Optional)

Get intelligent error analysis powered by Chrome's built-in AI (Gemini Nano).

AI Setup (2 minutes):

Open chrome://flags in a new tab
Search for: Prompt API for Gemini Nano
Set it to: "Enabled"
Search for: Gemini Nano
Set it to: "Enabled"
Restart Chrome completely

Test AI is working:

// Open Console (F12) and run:
await ai.languageModel.create();
// Should return: LanguageModel object

⚠️ Note: AI features work without this, but you'll get pattern-based analysis instead of AI insights.

🔧 Open Mosqit DevTools

Access the Mosqit panel to start seeing intelligent error insights.

Open the Panel:

Visit any website (try example.com)
Press F12 or right-click → "Inspect"
Look for the "Mosqit" tab in DevTools
Click it to open the panel

💡 Pro Tip: Keep DevTools docked to the bottom or right for the best experience.

🧪 Test with Real Errors

Trigger some errors to see Mosqit's AI analysis in action.

Try these in the Console:

// Null reference error
const user = null;
console.log(user.name);

// Undefined function
someFunction();

// Type error
const num = 5;
num.toUppercase();

What You'll See:

🤔 "AI is analyzing..." indicator appears
✨ AI-powered analysis with fix suggestions (1-2 seconds)
📍 File location and line number
🎯 Smart context about what went wrong

🐛 Visual Bug Reporter

Report visual bugs by clicking elements directly on the page. Captures screenshots, context, and element details automatically.

How to Use Visual Bug Reporter:

In Mosqit DevTools panel, find the 🐛 Visual Bug Reporter button (toolbar, top right)
Click it to switch from Logs view to Visual Bug Reporter view
Click the "Start Capture Mode" button
Hover over any element on the page (you'll see blue highlighting)
Click the element you want to report

What Gets Captured:

📸 Screenshot - Visual snapshot of the element and surrounding area
🎯 Element Selector - CSS selector, XPath, and DOM position
🎨 Computed Styles - Colors, fonts, dimensions, spacing
📍 Context - Page URL, viewport size, browser info
🔍 Element Tree - Parent and child elements hierarchy

💡 Pro Tip: Use this for reporting UI bugs like misaligned elements, wrong colors, missing images, or layout issues. The captured data is perfect for bug reports!

⚠️ Note: After capturing, you can add annotations and submit directly to GitHub if configured. All data is session-only (ephemeral).

⚡ Key Features

Quick overview of what makes Mosqit powerful.

🎯

Smart Capture

Automatically captures console.error(), console.warn(), and uncaught exceptions

✨

AI Analysis

Chrome's Gemini Nano analyzes errors and suggests fixes instantly

🔍

Pattern Detection

Identifies recurring errors and common patterns

⚡

Zero Persistence

Ephemeral like native console - no data left behind

🎨

Visual Inspector

Click any element to capture screenshots and context

🔒

Privacy First

All processing happens locally - nothing sent to servers

💡 Pro Tips

Get the most out of Mosqit with these tips.

🎯 Filter by Level: Click error/warn/info buttons to filter logs

🔍 Search: Use the search bar to find specific errors quickly

📋 Copy Issues: Click any log to copy formatted error details

🧹 Clear Logs: Hit the clear button to start fresh (just like native console)

⚙️ Debug Mode: Set DEBUG = true in source files to see internal logs

📚 Quick Reference

Keyboard Shortcuts

F12 - Open DevTools
Ctrl/Cmd + K - Clear console
Ctrl/Cmd + F - Search logs

Panel Controls

🗑️ Clear - Clear all logs
🔄 Filters - Toggle log levels
🔍 Search - Find specific errors