Back to Details

kaboom-browser-ai-devtools

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Kaboom Browser AI DevTools MCP

Kaboom Browser AI DevTools MCP

Skill by ara.so — Devtools Skills collection.
Kaboom is a browser debugging, inspection, and verification toolkit that streams console logs, network failures, exceptions, recordings, and browser evidence into MCP-compatible coding assistants. It provides real-time browser debugging without requiring 
--remote-debugging-port
, using a standard browser extension instead.
由ara.so开发的Skill——Devtools Skills合集。
Kaboom是一款浏览器调试、检查与验证工具包，可将控制台日志、网络请求失败信息、异常、操作记录及浏览器证据传输至兼容MCP的编码助手。它无需使用
--remote-debugging-port
，而是通过标准浏览器扩展实现实时浏览器调试。

Key Features

核心功能

  • Console monitoring — Stream all 
    console.log()
    , 
    .warn()
    , 
    .error()
    with full arguments
  • Network debugging — Capture failed requests (4xx/5xx) with full request/response bodies
  • Exception tracking — Uncaught errors with complete stack traces
  • WebSocket monitoring — Connection events and message payloads
  • User action recording — Click, type, navigate, scroll with smart selectors
  • Web Vitals tracking — LCP, CLS, INP, FCP with regression detection
  • DOM inspection — Query page elements via CSS selectors
  • Accessibility audits — WCAG compliance checks with SARIF export
  • Security audits — Credentials, PII, headers, cookies analysis
  • Browser automation — Click, type, select, upload, navigate programmatically
  • Test generation — Generate Playwright tests from recorded sessions
  • Visual annotations — Drawing mode for user feedback with style extraction
  • 控制台监控 — 流式传输所有带完整参数的
    console.log()
    、
    .warn()
    、
    .error()
    日志
  • 网络调试 — 捕获包含完整请求/响应体的失败请求（4xx/5xx状态码）
  • 异常追踪 — 带完整堆栈跟踪的未捕获错误
  • WebSocket监控 — 连接事件与消息负载
  • 用户操作录制 — 带智能选择器的点击、输入、导航、滚动操作录制
  • Web Vitals追踪 — LCP、CLS、INP、FCP指标及回归检测
  • DOM检查 — 通过CSS选择器查询页面元素
  • 可访问性审计 — 符合WCAG标准的合规性检查，支持SARIF导出
  • 安全审计 — 凭证、PII、请求头、Cookie分析
  • 浏览器自动化 — 程序化执行点击、输入、选择、上传、导航操作
  • 测试用例生成 — 从录制会话生成Playwright测试用例
  • 视觉标注 — 用于用户反馈的绘图模式，支持样式提取

Installation

安装

Quick Install (Recommended)

快速安装（推荐）

macOS / Linux:
bash
curl -sSL https://raw.githubusercontent.com/brennhill/Kaboom-Browser-AI-Devtools-MCP/STABLE/scripts/install.sh | bash
Windows (PowerShell):
powershell
irm https://raw.githubusercontent.com/brennhill/Kaboom-Browser-AI-Devtools-MCP/STABLE/scripts/install.ps1 | iex
This automatically:
  1. Downloads the binary for your platform
  2. Installs browser extension to 
    ~/.kaboom/extension
  3. Auto-configures detected MCP clients (Claude Code, Cursor, Windsurf, Zed)
macOS / Linux:
bash
curl -sSL https://raw.githubusercontent.com/brennhill/Kaboom-Browser-AI-Devtools-MCP/STABLE/scripts/install.sh | bash
Windows (PowerShell):
powershell
irm https://raw.githubusercontent.com/brennhill/Kaboom-Browser-AI-Devtools-MCP/STABLE/scripts/install.ps1 | iex
这会自动完成以下操作：
  1. 下载适配您平台的二进制文件
  2. 将浏览器扩展安装至
    ~/.kaboom/extension
  3. 自动配置检测到的MCP客户端（Claude Code、Cursor、Windsurf、Zed）

Manual Installation

手动安装

  1. Download binary from releases
  2. Extract and make executable:
    bash
    tar -xzf kaboom-*.tar.gz
chmod +x kaboom
mv kaboom /usr/local/bin/
  3. Install browser extension:
    • Open 
      chrome://extensions
    • Enable Developer mode
    • Click "Load unpacked"
    • Select 
      ~/.kaboom/extension
      directory
  1. 从发布页面下载二进制文件
  2. 解压并设置可执行权限：
    bash
    tar -xzf kaboom-*.tar.gz
chmod +x kaboom
mv kaboom /usr/local/bin/
  3. 安装浏览器扩展：
    • 打开
      chrome://extensions
    • 启用开发者模式
    • 点击“加载已解压的扩展程序”
    • 选择
      ~/.kaboom/extension
      目录

MCP Configuration

MCP配置

Add to your MCP client config:
Claude Desktop / Claude Code (
claude_desktop_config.json
):
json
{
  "mcpServers": {
    "kaboom": {
      "command": "/usr/local/bin/kaboom",
      "args": ["--mcp"]
    }
  }
}
Cursor (
config.json
in 
.cursor/
directory):
json
{
  "mcpServers": {
    "kaboom": {
      "command": "/usr/local/bin/kaboom",
      "args": ["--mcp"]
    }
  }
}
Zed (
settings.json
):
json
{
  "context_servers": {
    "kaboom": {
      "command": {
        "path": "/usr/local/bin/kaboom",
        "args": ["--mcp"]
      }
    }
  }
}
将以下配置添加到您的MCP客户端配置文件中：
Claude Desktop / Claude Code（
claude_desktop_config.json
）：
json
{
  "mcpServers": {
    "kaboom": {
      "command": "/usr/local/bin/kaboom",
      "args": ["--mcp"]
    }
  }
}
Cursor（
.cursor/
目录下的
config.json
）：
json
{
  "mcpServers": {
    "kaboom": {
      "command": "/usr/local/bin/kaboom",
      "args": ["--mcp"]
    }
  }
}
Zed（
settings.json
）：
json
{
  "context_servers": {
    "kaboom": {
      "command": {
        "path": "/usr/local/bin/kaboom",
        "args": ["--mcp"]
      }
    }
  }
}

MCP Tools Reference

MCP工具参考

Console & Error Monitoring

控制台与错误监控

kaboom_console_clear
 — Clear all captured console logs
typescript
// No arguments required
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_console_clear"
});
kaboom_console_get
 — Get all captured console logs
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_console_get",
  arguments: {
    level: "error" // Optional: "log", "warn", "error", "info"
  }
});
kaboom_console_clear
 — 清除所有捕获的控制台日志
typescript
// No arguments required
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_console_clear"
});
kaboom_console_get
 — 获取所有捕获的控制台日志
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_console_get",
  arguments: {
    level: "error" // Optional: "log", "warn", "error", "info"
  }
});

Network Monitoring

网络监控

kaboom_network_get
 — Get captured network requests
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_network_get",
  arguments: {
    status: "failed", // "all", "failed", "success"
    includeBody: true
  }
});
kaboom_network_clear
 — Clear network capture buffer
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_network_clear"
});
kaboom_network_get
 — 获取捕获的网络请求
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_network_get",
  arguments: {
    status: "failed", // "all", "failed", "success"
    includeBody: true
  }
});
kaboom_network_clear
 — 清除网络捕获缓冲区
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_network_clear"
});

DOM Inspection

DOM检查

kaboom_dom_query
 — Query DOM elements with CSS selectors
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_dom_query",
  arguments: {
    selector: ".error-message",
    includeStyles: true,
    includeAttributes: true
  }
});
kaboom_dom_snapshot
 — Capture full DOM snapshot
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_dom_snapshot",
  arguments: {
    includeInlineStyles: true
  }
});
kaboom_dom_query
 — 通过CSS选择器查询DOM元素
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_dom_query",
  arguments: {
    selector: ".error-message",
    includeStyles: true,
    includeAttributes: true
  }
});
kaboom_dom_snapshot
 — 捕获完整DOM快照
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_dom_snapshot",
  arguments: {
    includeInlineStyles: true
  }
});

User Action Recording

用户操作录制

kaboom_recording_start
 — Start recording user actions
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_start",
  arguments: {
    captureClicks: true,
    captureInputs: true,
    captureNavigation: true,
    captureScrolls: true
  }
});
kaboom_recording_stop
 — Stop and retrieve recording
typescript
const recording = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_stop"
});
// Returns array of recorded actions with selectors
kaboom_recording_generate_test
 — Generate Playwright test from recording
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_generate_test",
  arguments: {
    format: "playwright", // "playwright" or "puppeteer"
    includeAssertions: true
  }
});
kaboom_recording_start
 — 开始录制用户操作
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_start",
  arguments: {
    captureClicks: true,
    captureInputs: true,
    captureNavigation: true,
    captureScrolls: true
  }
});
kaboom_recording_stop
 — 停止录制并获取记录内容
typescript
const recording = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_stop"
});
// Returns array of recorded actions with selectors
kaboom_recording_generate_test
 — 从录制会话生成Playwright测试用例
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_generate_test",
  arguments: {
    format: "playwright", // "playwright" or "puppeteer"
    includeAssertions: true
  }
});

Browser Automation

浏览器自动化

kaboom_browser_click
 — Click element
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_click",
  arguments: {
    selector: "button[type='submit']"
  }
});
kaboom_browser_type
 — Type into input field
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_type",
  arguments: {
    selector: "input[name='email']",
    text: "user@example.com",
    clear: true
  }
});
kaboom_browser_navigate
 — Navigate to URL
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_navigate",
  arguments: {
    url: "https://example.com/dashboard",
    waitForLoad: true
  }
});
kaboom_browser_select
 — Select dropdown option
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_select",
  arguments: {
    selector: "select[name='country']",
    value: "US"
  }
});
kaboom_browser_upload
 — Upload file
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_upload",
  arguments: {
    selector: "input[type='file']",
    filePath: "/path/to/file.pdf"
  }
});
kaboom_browser_click
 — 点击元素
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_click",
  arguments: {
    selector: "button[type='submit']"
  }
});
kaboom_browser_type
 — 在输入框中输入内容
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_type",
  arguments: {
    selector: "input[name='email']",
    text: "user@example.com",
    clear: true
  }
});
kaboom_browser_navigate
 — 导航至指定URL
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_navigate",
  arguments: {
    url: "https://example.com/dashboard",
    waitForLoad: true
  }
});
kaboom_browser_select
 — 选择下拉选项
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_select",
  arguments: {
    selector: "select[name='country']",
    value: "US"
  }
});
kaboom_browser_upload
 — 上传文件
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_upload",
  arguments: {
    selector: "input[type='file']",
    filePath: "/path/to/file.pdf"
  }
});

Accessibility Auditing

可访问性审计

kaboom_a11y_audit
 — Run WCAG accessibility audit
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_a11y_audit",
  arguments: {
    standard: "WCAG2AA", // "WCAG2A", "WCAG2AA", "WCAG2AAA"
    includeWarnings: true
  }
});
kaboom_a11y_export
 — Export audit results
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_a11y_export",
  arguments: {
    format: "sarif" // "sarif", "json", "html"
  }
});
kaboom_a11y_audit
 — 运行WCAG可访问性审计
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_a11y_audit",
  arguments: {
    standard: "WCAG2AA", // "WCAG2A", "WCAG2AA", "WCAG2AAA"
    includeWarnings: true
  }
});
kaboom_a11y_export
 — 导出审计结果
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_a11y_export",
  arguments: {
    format: "sarif" // "sarif", "json", "html"
  }
});

Security Auditing

安全审计

kaboom_security_audit
 — Run security audit
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_security_audit",
  arguments: {
    checkCredentials: true,
    checkPII: true,
    checkHeaders: true,
    checkCookies: true,
    checkThirdParty: true
  }
});
kaboom_security_audit
 — 运行安全审计
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_security_audit",
  arguments: {
    checkCredentials: true,
    checkPII: true,
    checkHeaders: true,
    checkCookies: true,
    checkThirdParty: true
  }
});

Web Vitals Monitoring

Web Vitals监控

kaboom_vitals_get
 — Get Web Vitals metrics
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_vitals_get",
  arguments: {
    metrics: ["LCP", "CLS", "INP", "FCP"] // Optional, defaults to all
  }
});
kaboom_vitals_baseline
 — Set performance baseline
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_vitals_baseline",
  arguments: {
    metric: "LCP",
    threshold: 2500 // milliseconds
  }
});
kaboom_vitals_get
 — 获取Web Vitals指标
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_vitals_get",
  arguments: {
    metrics: ["LCP", "CLS", "INP", "FCP"] // Optional, defaults to all
  }
});
kaboom_vitals_baseline
 — 设置性能基准值
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_vitals_baseline",
  arguments: {
    metric: "LCP",
    threshold: 2500 // milliseconds
  }
});

Visual Annotations

视觉标注

kaboom_annotation_enable
 — Enable drawing mode
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_annotation_enable"
});
kaboom_annotation_get
 — Get annotations with computed styles
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_annotation_get",
  arguments: {
    includeStyles: true
  }
});
kaboom_annotation_enable
 — 启用绘图模式
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_annotation_enable"
});
kaboom_annotation_get
 — 获取包含计算样式的标注内容
typescript
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_annotation_get",
  arguments: {
    includeStyles: true
  }
});

Common Workflows

常见工作流

Debug Console Errors

调试控制台错误

typescript
// 1. Get all error logs
const errors = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_console_get",
  arguments: { level: "error" }
});

// 2. Inspect DOM at error location
const elements = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_dom_query",
  arguments: {
    selector: ".error-component",
    includeStyles: true
  }
});

// 3. Clear logs after fix
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_console_clear"
});
typescript
// 1. 获取所有错误日志
const errors = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_console_get",
  arguments: { level: "error" }
});

// 2. 检查错误位置的DOM元素
const elements = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_dom_query",
  arguments: {
    selector: ".error-component",
    includeStyles: true
  }
});

// 3. 修复后清除日志
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_console_clear"
});

Debug Failed API Calls

调试失败的API请求

typescript
// 1. Get failed network requests
const failed = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_network_get",
  arguments: {
    status: "failed",
    includeBody: true
  }
});

// 2. Check for auth issues in request headers
// Analyze the response from failed requests

// 3. Clear network buffer
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_network_clear"
});
typescript
// 1. 获取失败的网络请求
const failed = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_network_get",
  arguments: {
    status: "failed",
    includeBody: true
  }
});

// 2. 检查请求头中的认证问题
// 分析失败请求的响应内容

// 3. 清除网络缓冲区
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_network_clear"
});

Record User Flow and Generate Test

录制用户流程并生成测试用例

typescript
// 1. Start recording
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_start",
  arguments: {
    captureClicks: true,
    captureInputs: true,
    captureNavigation: true
  }
});

// 2. User performs actions in browser...

// 3. Stop recording and get actions
const actions = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_stop"
});

// 4. Generate Playwright test
const test = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_generate_test",
  arguments: {
    format: "playwright",
    includeAssertions: true
  }
});
typescript
// 1. 开始录制
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_start",
  arguments: {
    captureClicks: true,
    captureInputs: true,
    captureNavigation: true
  }
});

// 2. 用户在浏览器中执行操作...

// 3. 停止录制并获取操作记录
const actions = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_stop"
});

// 4. 生成Playwright测试用例
const test = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_generate_test",
  arguments: {
    format: "playwright",
    includeAssertions: true
  }
});

Automate Browser Testing

自动化浏览器测试

typescript
// Navigate to login page
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_navigate",
  arguments: {
    url: "https://app.example.com/login",
    waitForLoad: true
  }
});

// Fill in credentials
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_type",
  arguments: {
    selector: "input[name='email']",
    text: "test@example.com"
  }
});

await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_type",
  arguments: {
    selector: "input[name='password']",
    text: "testpass123"
  }
});

// Submit form
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_click",
  arguments: {
    selector: "button[type='submit']"
  }
});

// Check for errors
const errors = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_console_get",
  arguments: { level: "error" }
});
typescript
// 导航至登录页面
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_navigate",
  arguments: {
    url: "https://app.example.com/login",
    waitForLoad: true
  }
});

// 填写凭证
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_type",
  arguments: {
    selector: "input[name='email']",
    text: "test@example.com"
  }
});

await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_type",
  arguments: {
    selector: "input[name='password']",
    text: "testpass123"
  }
});

// 提交表单
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_click",
  arguments: {
    selector: "button[type='submit']"
  }
});

// 检查错误
const errors = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_console_get",
  arguments: { level: "error" }
});

Accessibility Audit

可访问性审计

typescript
// Run WCAG 2.1 AA audit
const audit = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_a11y_audit",
  arguments: {
    standard: "WCAG2AA",
    includeWarnings: true
  }
});

// Export results as SARIF
const report = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_a11y_export",
  arguments: {
    format: "sarif"
  }
});
typescript
// 运行WCAG 2.1 AA审计
const audit = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_a11y_audit",
  arguments: {
    standard: "WCAG2AA",
    includeWarnings: true
  }
});

// 将结果导出为SARIF格式
const report = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_a11y_export",
  arguments: {
    format: "sarif"
  }
});

Performance Regression Detection

性能回归检测

typescript
// Set baseline for LCP
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_vitals_baseline",
  arguments: {
    metric: "LCP",
    threshold: 2500
  }
});

// Get current metrics
const vitals = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_vitals_get"
});

// Check if LCP regressed
if (vitals.LCP > 2500) {
  console.log("LCP regression detected!");
}
typescript
// 设置LCP的基准值
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_vitals_baseline",
  arguments: {
    metric: "LCP",
    threshold: 2500
  }
});

// 获取当前指标
const vitals = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_vitals_get"
});

// 检查LCP是否出现回归
if (vitals.LCP > 2500) {
  console.log("检测到LCP性能回归！");
}

Browser Extension Developer API

浏览器扩展开发者API

Use 
window.__kaboom
in your application code for custom context:
javascript
// Add custom annotation to help AI understand context
window.__kaboom.annotate({
  type: "error-boundary",
  component: "CheckoutForm",
  message: "Payment validation failed",
  metadata: {
    step: 3,
    validationErrors: ["invalid_card", "expired"]
  }
});

// Check if Kaboom is available
if (window.__kaboom) {
  // Kaboom is active
}
在您的应用代码中使用
window.__kaboom
获取自定义上下文：
javascript
// 添加自定义标注以帮助AI理解上下文
window.__kaboom.annotate({
  type: "error-boundary",
  component: "CheckoutForm",
  message: "Payment validation failed",
  metadata: {
    step: 3,
    validationErrors: ["invalid_card", "expired"]
  }
});

// 检查Kaboom是否可用
if (window.__kaboom) {
  // Kaboom已激活
}

Configuration

配置

Environment Variables

环境变量

bash
undefined
bash
undefined

Disable telemetry

禁用遥测

export KABOOM_TELEMETRY=off
export KABOOM_TELEMETRY=off

Custom port (default: 3333)

自定义端口（默认：3333）

export KABOOM_PORT=8080
export KABOOM_PORT=8080

Log level

日志级别

export KABOOM_LOG_LEVEL=debug # debug, info, warn, error
export KABOOM_LOG_LEVEL=debug # debug, info, warn, error

Custom extension path

自定义扩展路径

export KABOOM_EXTENSION_PATH=/custom/path/to/extension
undefined
export KABOOM_EXTENSION_PATH=/custom/path/to/extension
undefined

Server CLI Flags

服务器CLI参数

bash
undefined
bash
undefined

Start MCP server

启动MCP服务器

kaboom --mcp
kaboom --mcp

Custom port

自定义端口

kaboom --mcp --port 8080
kaboom --mcp --port 8080

Enable debug logging

启用调试日志

kaboom --mcp --debug
kaboom --mcp --debug

Print version

打印版本

kaboom --version
undefined
kaboom --version
undefined

Troubleshooting

故障排除

Extension Not Connecting

扩展无法连接

  1. Check extension is loaded:
    • Open 
      chrome://extensions
    • Verify Kaboom is enabled
    • Check for errors in extension details
  2. Verify server is running:
    bash
    ps aux | grep kaboom
  3. Check connection:
    • Open browser DevTools
    • Look for "Kaboom connected" in console
    • If not connected, refresh the page
  1. 检查扩展是否已加载：
    • 打开
      chrome://extensions
    • 确认Kaboom已启用
    • 检查扩展详情中的错误信息
  2. 验证服务器是否在运行：
    bash
    ps aux | grep kaboom
  3. 检查连接状态：
    • 打开浏览器开发者工具
    • 在控制台中查找“Kaboom connected”信息
    • 如果未连接，刷新页面

No Console Logs Captured

未捕获到控制台日志

  1. Clear cache and refresh:
    typescript
    await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_console_clear"
});
  2. Check log level filter — Make sure you're not filtering out the logs you need
  3. Verify page is active — Kaboom only captures from the active tab
  1. 清除缓存并刷新：
    typescript
    await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_console_clear"
});
  2. 检查日志级别过滤器 — 确保没有过滤掉您需要的日志
  3. 验证页面是否处于活跃状态 — Kaboom仅捕获活跃标签页的日志

Network Requests Not Appearing

网络请求未显示

  1. Check status filter:
    typescript
    // Get ALL requests, not just failed
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_network_get",
  arguments: { status: "all" }
});
  2. Verify XHR/Fetch interception — Some requests may be blocked by CSP
  3. Check response body size — Very large bodies may be truncated
  1. 检查状态过滤器：
    typescript
    // 获取所有请求，而不仅仅是失败的请求
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_network_get",
  arguments: { status: "all" }
});
  2. 验证XHR/Fetch拦截是否正常 — 部分请求可能被CSP阻止
  3. 检查响应体大小 — 过大的响应体可能会被截断

Recording Generates Weak Selectors

录制生成的选择器效果不佳

  1. Add explicit IDs/data attributes to critical elements:
    html
    <button data-testid="submit-btn">Submit</button>
  2. Use semantic HTML — 
    <button>
    instead of 
    <div onclick>
  3. Manually improve selectors in generated tests after recording
  1. 为关键元素添加明确的ID/数据属性：
    html
    <button data-testid="submit-btn">Submit</button>
  2. 使用语义化HTML — 使用
    <button>
    而非
    <div onclick>
  3. 录制后手动优化生成测试用例中的选择器

MCP Client Not Finding Kaboom

MCP客户端无法找到Kaboom

  1. Check binary path:
    bash
    which kaboom
# Should output: /usr/local/bin/kaboom
  2. Update config with full path:
    json
    {
  "mcpServers": {
    "kaboom": {
      "command": "/usr/local/bin/kaboom",
      "args": ["--mcp"]
    }
  }
}
  3. Restart MCP client completely (not just reload window)
  1. 检查二进制文件路径：
    bash
    which kaboom
# 应输出：/usr/local/bin/kaboom
  2. 使用完整路径更新配置：
    json
    {
  "mcpServers": {
    "kaboom": {
      "command": "/usr/local/bin/kaboom",
      "args": ["--mcp"]
    }
  }
}
  3. 完全重启MCP客户端（不仅仅是刷新窗口）

Performance Impact

性能影响

Kaboom is designed for minimal overhead, but:
  • Disable when not debugging — Unload extension if not needed
  • Clear buffers regularly — Large console/network buffers can grow
  • Use selective recording — Only record what you need
Kaboom设计为低开销工具，但仍需注意：
  • 不调试时禁用 — 不需要时卸载扩展
  • 定期清除缓冲区 — 过大的控制台/网络缓冲区会占用资源
  • 使用选择性录制 — 仅录制您需要的内容

Privacy & Security

隐私与安全

  • All data stays local — Nothing leaves your machine
  • No cloud, no accounts — Zero external dependencies
  • Auth headers stripped — Sensitive headers automatically removed
  • Localhost only — Server binds to 
    127.0.0.1
    only
  • Anonymous telemetry — Random install ID, no personal data (disable with 
    KABOOM_TELEMETRY=off
    )
  • 所有数据本地存储 — 数据不会离开您的设备
  • 无云端、无账户 — 零外部依赖
  • 自动剥离认证头 — 敏感请求头会被自动移除
  • 仅本地访问 — 服务器仅绑定到
    127.0.0.1
  • 匿名遥测 — 使用随机安装ID，不包含个人数据（可通过
    KABOOM_TELEMETRY=off
    禁用）

Advanced Usage

高级用法

Custom Test Generation Template

自定义测试生成模板

Generate tests with custom assertions:
typescript
const test = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_generate_test",
  arguments: {
    format: "playwright",
    includeAssertions: true
  }
});

// Add custom assertions to generated test
const customTest = test.replace(
  "// end of test",
  `
  // Custom assertions
  await expect(page.locator('.success-message')).toBeVisible();
  await expect(page).toHaveURL(/.*dashboard/);
`
);
生成带自定义断言的测试用例：
typescript
const test = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_generate_test",
  arguments: {
    format: "playwright",
    includeAssertions: true
  }
});

// 为生成的测试用例添加自定义断言
const customTest = test.replace(
  "// end of test",
  `
  // Custom assertions
  await expect(page.locator('.success-message')).toBeVisible();
  await expect(page).toHaveURL(/.*dashboard/);
`
);

Continuous Monitoring Pattern

持续监控模式

typescript
// Set up baseline thresholds
const thresholds = {
  LCP: 2500,
  CLS: 0.1,
  INP: 200,
  FCP: 1800
};

for (const [metric, threshold] of Object.entries(thresholds)) {
  await use_mcp_tool({
    server_name: "kaboom",
    tool_name: "kaboom_vitals_baseline",
    arguments: { metric, threshold }
  });
}

// Periodically check for regressions
const vitals = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_vitals_get"
});

// Flag regressions
const regressions = Object.entries(vitals)
  .filter(([metric, value]) => value > thresholds[metric])
  .map(([metric, value]) => `${metric}: ${value} > ${thresholds[metric]}`);

if (regressions.length > 0) {
  console.log("Performance regressions detected:", regressions);
}
typescript
// 设置基准阈值
const thresholds = {
  LCP: 2500,
  CLS: 0.1,
  INP: 200,
  FCP: 1800
};

for (const [metric, threshold] of Object.entries(thresholds)) {
  await use_mcp_tool({
    server_name: "kaboom",
    tool_name: "kaboom_vitals_baseline",
    arguments: { metric, threshold }
  });
}

// 定期检查是否出现回归
const vitals = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_vitals_get"
});

// 标记回归项
const regressions = Object.entries(vitals)
  .filter(([metric, value]) => value > thresholds[metric])
  .map(([metric, value]) => `${metric}: ${value} > ${thresholds[metric]}`);

if (regressions.length > 0) {
  console.log("检测到性能回归：", regressions);
}

Multi-Page Recording

多页面录制

typescript
// Start recording
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_start",
  arguments: { captureNavigation: true }
});

// Navigate through multiple pages
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_navigate",
  arguments: { url: "https://example.com/page1" }
});

// Perform actions...

await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_navigate",
  arguments: { url: "https://example.com/page2" }
});

// More actions...

// Stop and generate comprehensive test
const recording = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_stop"
});

const test = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_generate_test",
  arguments: {
    format: "playwright",
    includeAssertions: true
  }
});
typescript
// 开始录制
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_start",
  arguments: { captureNavigation: true }
});

// 导航至多个页面
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_navigate",
  arguments: { url: "https://example.com/page1" }
});

// 执行操作...

await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_navigate",
  arguments: { url: "https://example.com/page2" }
});

// 更多操作...

// 停止录制并生成综合测试用例
const recording = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_stop"
});

const test = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_generate_test",
  arguments: {
    format: "playwright",
    includeAssertions: true
  }
});

Resources

资源