Console Buddy

A comprehensive Chrome DevTools extension with 22+ analysis tools and AI-powered insights. Analyze security, performance, accessibility, SEO, and debug issues - all from a convenient side panel.

About

Console Buddy is an all-in-one developer toolkit that transforms Chrome's side panel into a powerful analysis dashboard. It combines real-time monitoring, security scanning, performance profiling, and AI-powered analysis to help developers identify and fix issues faster.

Key Highlights: - 22+ Professional Tools organized in 5 categories - Agent Mode for automated full-page audits with exportable reports - Multi-LLM Support - Claude, GPT, and Gemini for AI analysis - Real-time Monitoring - Console, DOM mutations, WebSockets, and more - Zero Configuration - Works instantly on any website

---

Features

Debug & Analysis Tools

Tool	Description
Console Monitor	Real-time console capture with filtering, search, and stack traces
DOM Mutation Monitor	Track DOM changes in real-time with detailed mutation logs
Event Listener Inspector	View all event listeners attached to page elements
Error Pattern Recognizer	Detect common framework errors (React, Vue, Angular, Next.js)

Network Tools

Tool	Description
Network Monitor	Capture all HTTP requests with headers, timing, and response data
API Endpoint Discovery	Map and analyze all API calls grouped by domain
WebSocket Monitor	Inspect WebSocket connections and messages in real-time

Security Tools

Tool	Description
Security Scanner	Analyze HTTPS, headers, cookies, and security policies
XSS Scanner	Detect potential XSS vulnerabilities and unsafe patterns
Sensitive Data Detector	Find exposed API keys, tokens, and credentials
JWT Analyzer	Decode and analyze JWT tokens for security issues
Dependency Scanner	Check JavaScript libraries for known vulnerabilities

Performance Tools

Tool	Description
Performance Metrics	Core Web Vitals, load times, and navigation timing
Resource Waterfall	Visual timeline of all resource loading
Bundle Analyzer	Identify large JavaScript bundles for optimization
Unused Code Detector	Find unused CSS rules and estimate JS coverage
Long Task Monitor	Detect main thread blocking tasks (>50ms)
Memory Profiler	Track heap usage and detect memory leaks

Page Quality Tools

Tool	Description
SEO/AEO Analyzer	Meta tags, Open Graph, structured data, and headings
Accessibility Checker	ARIA, color contrast, keyboard navigation, and more
Storage Inspector	View and manage localStorage, sessionStorage, and cookies
Tech Stack Detector	Identify frameworks, libraries, CMS, and analytics
Service Worker Inspector	View SW status and cached resources

Agent Mode (Full Page Audit)

Run all 22 tools automatically with a single click:

• Automated Analysis - Runs security, performance, accessibility, and SEO checks
• Real-time Progress - Watch each tool execute with live results
• Comprehensive Report - Overall score with categorized findings
• Export Options - Download as HTML, Markdown, or JSON

---

Installation

From Source (Development)

1. Clone the repository: bash git clone https://github.com/Clemens865/Console-Buddy.git cd Console-Buddy

2. Install dependencies: bash npm install

3. Build the extension: bash npm run build

4. Load in Chrome:

5. Navigate to chrome://extensions/
6. Enable Developer mode (toggle in top right)
7. Click Load unpacked

8. Select the dist folder from the project

9. Pin the extension:

10. Click the puzzle piece icon in Chrome toolbar
11. Pin Console Buddy for easy access

Development Mode

For active development with hot reload:

npm run dev

Then reload the extension in Chrome after making changes.

---

Usage

Getting Started

1. Open Console Buddy:
2. Click the Console Buddy icon in Chrome toolbar

3. The side panel will open on the right

4. Connect to page:

5. Click the Connect button to start capturing data

6. The indicator will turn green when connected

7. Navigate tools:

8. Use the sidebar to switch between tool categories
9. Click on any tool to view its analysis

Using AI Analysis

1. Configure API Key:
2. Click the Settings (gear) icon
3. Select your preferred AI provider (Claude, GPT, or Gemini)

4. Enter your API key

5. Analyze Data:

6. Click the Analyze with AI button on any tool

7. The AI will provide insights and recommendations

8. Chat Follow-up:

9. Use the chat feature to ask follow-up questions
10. Context from your current analysis is included

Running a Full Audit

1. Click the Agent Mode button (robot icon)
2. Click Start Audit to run all tools
3. Watch real-time progress as each tool completes
4. Review the comprehensive report with scores
5. Export results in your preferred format

---

API Keys

To use AI-powered analysis, you'll need at least one API key:

Provider	Get API Key	Models Available
Claude	Anthropic Console	Claude Sonnet 4, Claude 3.5 Sonnet, Claude 3.5 Haiku
OpenAI	OpenAI Platform	GPT-4o, GPT-4o Mini, GPT-4 Turbo
Gemini	Google AI Studio	Gemini 2.0 Flash, Gemini 1.5 Pro, Gemini 1.5 Flash

---

Permissions

Console Buddy requires these Chrome permissions:

Permission	Purpose
sidePanel	Display the side panel interface
storage	Store API keys and user settings
tabs	Access tab information for analysis
activeTab	Analyze the currently active tab
debugger	Capture console output and network requests
scripting	Execute analysis scripts on pages
cookies	Analyze cookie security

---

Project Structure

Console Buddy/
├── public/
│   ├── manifest.json          # Chrome extension manifest (MV3)
│   └── icons/                 # Extension icons
├── src/
│   ├── background/
│   │   └── background.ts      # Service worker (API calls)
│   ├── sidepanel/
│   │   ├── index.html         # Side panel HTML
│   │   ├── main.tsx           # React entry point
│   │   └── App.tsx            # Main application component
│   ├── components/
│   │   ├── agent/             # Agent Mode components
│   │   ├── debug/             # Debug tools
│   │   ├── network/           # Network tools
│   │   ├── security/          # Security tools
│   │   ├── performance/       # Performance tools
│   │   ├── quality/           # Page quality tools
│   │   ├── layout/            # Sidebar, headers
│   │   └── shared/            # Reusable components
│   ├── hooks/
│   │   └── usePageData.ts     # Data fetching hooks
│   ├── types/
│   │   └── index.ts           # TypeScript definitions
│   └── styles/
│       └── index.css          # Global styles
├── vite.config.ts             # Vite build configuration
├── tsconfig.json              # TypeScript configuration
└── package.json

---

Development

Commands

# Install dependencies
npm install

# Development build with watch
npm run dev

# Production build
npm run build

# Type checking
npm run typecheck

Tech Stack

• React 18 - UI framework with lazy loading
• TypeScript - Type-safe development
• Vite - Fast build tool with code splitting
• Lucide React - Icon library
• Chrome Extension Manifest V3 - Modern extension APIs

Code Splitting

All tools are lazy-loaded for optimal performance: - Initial bundle: ~75KB gzipped - Each tool: 2-6KB gzipped - Total with all tools: ~150KB

---

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Acknowledgments

• Built with Vite
• Icons by Lucide
• AI powered by Anthropic, OpenAI, and Google

---

Made with love for developers who debug at 2am