How do I use mcp-console-hub?

1. Click on "Deploy Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@mcp-console-hub Diagnose all errors and suggest fixes" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

mcp-console-hub

by nano-step

Overview Schema Source Related Servers Discussions Admin

TypeScript

Local

What It Captures

DevTools Tab	What's Captured	Details
Console	`console.error/warn/log/info/debug`	With stack traces for errors/warnings
Console	Unhandled exceptions	`window.onerror` with file + line + column
Console	Promise rejections	`unhandledrejection` with stack
Network	All fetch/XHR requests	Method, URL, status, duration, headers, body preview, size
Network	Failed requests	4xx, 5xx, connection errors with details
Application	localStorage	All key-value pairs
Application	sessionStorage	All key-value pairs
Application	Cookies	Name, value, domain, path
Application	IndexedDB	Database names
Performance	Navigation timing	TTFB, DOM loaded, load complete, DNS, connect
Performance	Resource loading	JS, CSS, images, fonts with duration + size
Performance	Memory	Heap size (Chrome only)
Performance	Marks & Measures	Custom performance marks

Zero code changes. One bookmarklet. Works with any web app.

Related MCP server: Chrome DevTools MCP

Quick Start

1. Configure your IDE

{
  "mcpServers": {
    "mcp-console-hub": {
      "command": "npx",
      "args": ["-y", "mcp-console-hub@latest"]
    }
  }
}

{
  "servers": {
    "mcp-console-hub": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "mcp-console-hub@latest"]
    }
  }
}

claude mcp add mcp-console-hub npx -y mcp-console-hub@latest

{
  "mcpServers": {
    "mcp-console-hub": {
      "command": "npx",
      "args": ["-y", "mcp-console-hub@latest"]
    }
  }
}

2. Connect your browser

Open http://localhost:3200 — drag the bookmarklet to your bookmarks bar.

Navigate to any web app. Click the bookmarklet.

3. Ask your AI agent

@mcp-console-hub Diagnose all errors and suggest fixes
@mcp-console-hub Show all network failures
@mcp-console-hub Read localStorage and explain the app state
@mcp-console-hub Audit page performance
@mcp-console-hub Fix errors by priority — most critical first

MCP Tools (24 tools)

Console (7 tools)

Tool	Description
`query_console`	Filter by level, source, text, time, stack
`get_entry_context`	Full context with parsed stack frames + timeline
`get_error_chains`	Detect cascading errors (root cause analysis)
`get_repeated_patterns`	Find recurring messages
`parse_stack_trace`	Structured frames: function, file, line, col
`find_by_file`	Find all errors from a specific source file
`get_unhandled_errors`	Runtime exceptions + promise rejections

Network (4 tools)

Tool	Description
`query_network`	Filter by method, status, URL, duration
`get_network_detail`	Full request/response: headers, body, timing
`get_network_errors`	All 4xx, 5xx, and connection failures
`get_slow_requests`	Requests above duration threshold

Storage (3 tools)

Tool	Description
`read_storage`	All storage: localStorage, sessionStorage, cookies, IndexedDB
`read_storage_key`	Read specific key with auto JSON parse
`get_cookies`	List/search cookies

Performance (2 tools)

Tool	Description
`get_performance`	Navigation timing, resources, memory, marks
`get_slow_resources`	Find slow-loading JS, CSS, images, fonts

General (4 tools)

Tool	Description
`get_console_stats`	Aggregated statistics
`get_page_info`	Page URL, user agent, all data availability
`get_timeline`	Chronological event sequence
`clear_console`	Clear all captured data

Export (1 tool)

Tool	Description
`export_report`	Full DevTools report as JSON or Markdown

MCP Prompts (7 prompts)

Prompt	Trigger	Description
`diagnose`	`/diagnose`	Full analysis of errors + network + performance
`fix_by_priority`	`/fix_by_priority`	Prioritized fix list: Critical > High > Medium
`suggest_solution`	`/suggest_solution`	Concrete code fix for the most recent error
`debug_network`	`/debug_network`	Analyze failures, CORS issues, auth errors
`read_app_state`	`/read_app_state`	Analyze storage to understand app state
`performance_audit`	`/performance_audit`	Page load audit with optimization suggestions
`fix_entry`	`/fix_entry`	Step-by-step fix for the latest error

MCP Resources (12 resources)

URI	Description
`console://entries`	All console entries
`console://errors`	Error-level only
`console://warnings`	Warning-level only
`console://timeline`	Chronological timeline
`console://summary`	Aggregated stats
`network://requests`	All network requests
`network://errors`	Failed requests
`network://slow`	Slow requests (>1s)
`storage://snapshot`	Full storage snapshot
`storage://cookies`	Cookies only
`performance://data`	All performance data
`devtools://page`	Page info + data availability

How It Works

Browser (any web app)              MCP Console Hub                     IDE AI Agent
+-----------------+               +--------------------+              +----------------+
| Bookmarklet     |  WebSocket    |                    |    stdio     |                |
| captures:       |==============>|  Console Store     |<===========>|  24 MCP Tools  |
|                 |  :3201        |  Network Store     |              |  12 Resources  |
| - console.*     |               |  Storage Snapshot  |              |  7 Prompts     |
| - window.onerror|  HTTP POST    |  Performance Data  |              |                |
| - fetch/XHR     |-------------->|                    |              |  Cursor        |
| - localStorage  |  :3200        |  File-backed       |              |  VSCode        |
| - cookies       |               |  (.store/)         |              |  Claude Code   |
| - performance   |               |                    |              |  Antigravity   |
+-----------------+               +--------------------+              +----------------+
  zero code changes                  npx mcp-console-hub               IDE MCP config

Ports & Environment

Port	Protocol	Purpose
3200	HTTP	Connector page + health + ingestion
3201	WebSocket	Real-time data streaming

Variable	Default	Description
`MCP_CONSOLE_HUB_PORT`	`3200`	HTTP port
`MCP_CONSOLE_HUB_WS_PORT`	`3201`	WebSocket port
`MCP_CONSOLE_HUB_STORE_PATH`	auto	Custom store file path

License

MIT — see LICENSE

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivityInactive

ResponsivenessNo issues

Resources

Need Help?

Related Servers

Related MCP Connectors

sncro A
io.github.scottconfusedgorilla
Live browser debugging for AI assistants — DOM, console, network via MCP.
Browser Automation Developer Tools Monitoring
2
render-mcp A
io.github.RodRomer
Hosted browser for AI agents: screenshots, post-JS DOM, console, WCAG. No install, no API key.
Browser Automation Testing & QA Tools
61
pipehero A
io.github.pipehero
Debug webhooks from your AI agent: inspect and replay captured webhooks on localhost.
Developer Tools API Testing
72
TabfleetOAuth
com.tabfleet
Launch, inspect, control, and share isolated cloud browsers for your agents.
Agent Orchestration Browser Automation
1

Related MCP Servers

Chrome DevTools MCPofficial
Browser Automation Web Scraping Testing & QA Tools
ChromeDevTools
A
license
Not graded
quality
A
maintenance
Enables AI coding assistants to control and inspect a live Chrome browser through Chrome DevTools. Provides browser automation, performance analysis, debugging capabilities, and network request monitoring.
Updated 14 hours ago (2026-09-15 08:51 UTC)
1,516,489 npm
52,015
Apache 2.0
Chrome DevTools MCP
Browser Automation Web Scraping Developer Tools
SHAY5555-gif
A
license
A
quality
D
maintenance
Enables AI coding assistants to control and inspect a live Chrome browser for automation, debugging, performance analysis, and screenshot capture through Chrome DevTools.
Updated 9 months ago (2025-12-28 14:51 UTC)
26
1,516,489 npm
3
Apache 2.0
browser-connect-mcp
Browser Automation Monitoring Developer Tools
perception30
A
license
C
quality
D
maintenance
Enables AI assistants to connect to browser DevTools and backend debuggers for full-stack debugging, including frontend console, network, performance, and backend log analysis.
Updated a year ago (2025-06-10 00:44 UTC)
16
12 npm
7
MIT
chrome-devtools-mcp
Browser Automation Developer Tools
zhang77-X
A
license
Not graded
quality
D
maintenance
Enables AI coding assistants to control and inspect a live Chrome browser through Chrome DevTools for automation, debugging, and performance analysis.
Updated 3 months ago (2026-06-04 09:46 UTC)
1,516,489 npm
Apache 2.0