Web Debug Pro

Web Debug Pro

专业级浏览器调试工具，基于 browser-use CLI 实现高级调试功能。

功能模块

前置条件

确保 browser-use 已安装并配置：

browser-use doctor

核心工作流

1. 网络分析

# 打开页面并获取网络信息
browser-use open <url>
browser-use eval "
  performance.getEntriesByType('resource').map(r => ({
    name: r.name,
    type: r.initiatorType,
    duration: r.duration,
    size: r.transferSize
  }))
"

2. 性能审计

# 获取导航时序
browser-use eval "
  const nav = performance.getEntriesByType('navigation')[0];
  ({
    dns: nav.domainLookupEnd - nav.domainLookupStart,
    tcp: nav.connectEnd - nav.connectStart,
    ttfb: nav.responseStart - nav.requestStart,
    download: nav.responseEnd - nav.responseStart,
    domReady: nav.domContentLoadedEventEnd - nav.fetchStart,
    load: nav.loadEventEnd - nav.fetchStart
  })
"

3. DOM 调试

# 获取页面状态
browser-use state

# 检查元素
browser-use get html --selector "#element-id"

# 执行 JavaScript
browser-use eval "document.querySelector('form').outerHTML"

4. 反爬虫检测

# 检测自动化特征
browser-use eval "
  ({
    webdriver: navigator.webdriver,
    chrome: !!window.chrome,
    cdc: !!window.document.$cdc_,
    languages: navigator.languages,
    platform: navigator.platform
  })
"

# 使用真实浏览器配置
browser-use --browser real --profile "Default" open <url>

高级用法

JavaScript 错误捕获

browser-use eval "
  window.__errors = [];
  window.onerror = (msg, url, line) => {
    window.__errors.push({msg, url, line});
  };
  'Error listener installed'
"

网络请求监控

browser-use python "
  # 在 Python 模式下设置网络拦截
  browser.setup_network_monitor()
"

性能指标采集

browser-use eval "
  ({
    fcp: performance.getEntriesByName('first-contentful-paint')[0]?.startTime,
    lcp: performance.getEntriesByType('largest-contentful-paint')[0]?.startTime,
    cls: performance.getEntriesByType('layout-shift').reduce((a, e) => a + e.value, 0)
  })
"

测试用例示例

表单填写测试

# 打开页面
browser-use open http://localhost:8000
browser-use state

# 填写表单（使用 state 返回的索引）
browser-use select <gender-index> "男"
browser-use input <year-index> "2001"
browser-use input <month-index> "9"
browser-use input <day-index> "15"
browser-use select <hour-index> "6"
browser-use click <submit-index>

# 验证结果
browser-use wait text "八字排盘"
browser-use screenshot result.png

API 响应分析

# 执行 API 请求并分析
browser-use eval "
  (async () => {
    const res = await fetch('/api/chart/', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({gender:'男', birth_year:2001, birth_month:9, birth_day:15, birth_hour:6})
    });
    return {status: res.status, headers: Object.fromEntries(res.headers)};
  })()
"

反爬虫深度指南

检测方法详解

绕过技术方案

1. 使用真实浏览器模式

# 推荐：使用真实 Chrome + 现有配置
browser-use --browser real --profile "Default" open <url>

2. 云端 Stealth 浏览器

# browser-use Cloud 自动处理 stealth
browser-use --browser remote open <url>

3. 注入反检测脚本

browser-use eval "
  // 隐藏 webdriver
  Object.defineProperty(navigator, 'webdriver', {get: () => undefined});

  // 修改 languages
  Object.defineProperty(navigator, 'languages', {get: () => ['en-US', 'en', 'zh-CN']});

  // 修改 WebGL renderer
  const getParam = WebGLRenderingContext.prototype.getParameter;
  WebGLRenderingContext.prototype.getParameter = function(p) {
    if (p === 37445) return 'Intel Inc.';
    if (p === 37446) return 'Intel Iris OpenGL Engine';
    return getParam.call(this, p);
  };

  // 模拟 Chrome runtime
  window.chrome = {runtime: {}};

  'Stealth scripts applied'
"

主要反爬虫系统

浏览器模式

# 本地 Chromium（快速、隔离）
browser-use --browser chromium open <url>

# 本地真实 Chrome（使用登录会话，推荐用于反爬虫）
browser-use --browser real --profile "Default" open <url>

# 云端浏览器（绕过 IP 限制，自动 stealth）
browser-use --browser remote open <url>

参考资源

• browser-use CLI 文档
• Chrome DevTools Protocol
• MDN Performance API
• playwright-stealth
• puppeteer-extra-plugin-stealth
• Bot Detection Test

页面加载问题

browser-use close --all
browser-use --headed open <url>  # 显示浏览器窗口调试

元素未找到

browser-use state
browser-use scroll down
browser-use state  # 再次检查

清理

browser-use close              # 关闭当前会话
browser-use close --all        # 关闭所有会话
browser-use session stop --all # 停止云会话

工具脚本

本 skill 包含以下 Python 工具脚本：

工具使用示例

# 网络时序分析
python ~/skills/web-debug-pro/tools/network-analyzer.py timing

# 性能报告
python ~/skills/web-debug-pro/tools/performance-audit.py report

# 反爬虫扫描
python ~/skills/web-debug-pro/tools/anti-bot-tester.py scan

# DOM 元素检查
python ~/skills/web-debug-pro/tools/dom-inspector.py element "#chartForm"

测试报告

天机阁项目测试结果

测试环境: FastAPI 后端 + 单页前端，运行在 http://localhost:8000

示例 API 响应:

{
  "id": 19,
  "bazi": "辛巳 丁酉 辛巳 辛卯",
  "day_master": "辛",
  "day_master_wx": "金",
  "strength": "身弱",
  "ming_palace": "巳",
  "ju": 4
}

参考资源

• browser-use CLI 文档
• Chrome DevTools Protocol
• MDN Performance API