项目简介

dev3000是一个创新的AI辅助开发工具，旨在为Web应用的调试和故障排除提供全面的上下文。它能自动记录您的Web应用在开发过程中的所有关键信息，包括服务器日志、浏览器事件、控制台消息、网络请求和自动截屏，并将它们整合到一个统一、带时间戳的反馈流中。最重要的是，dev3000包含一个符合Model Context Protocol (MCP) 的服务器，允许AI模型（如Claude）通过结构化的工具调用来查询这些日志、分析问题，甚至直接控制浏览器执行操作，从而实现高效的AI驱动调试。

主要功能点

全面的开发时间线捕获: 自动记录服务器日志、浏览器控制台消息、网络请求、关键事件的自动截屏等，形成完整的时间线。
AI友好的日志格式: 生成的日志易于AI模型理解，便于快速识别问题和进行调试。
可视化的开发流程: 提供Web界面查看时间轴日志和截屏，直观跟踪应用状态，地址为 'http://localhost:3684/logs'（如果MCP服务器端口为默认值）。
MCP服务器集成: 暴露标准化的JSON-RPC接口，允许LLM客户端通过预定义工具与开发环境进行交互。
日志查询工具: 通过MCP服务器提供的工具，LLM可以读取、搜索日志，并筛选浏览器错误。
浏览器控制工具: LLM可以通过MCP服务器调用工具，直接执行浏览器操作，如点击、导航、截屏、JS代码执行、滚动和输入文本，实现自动化测试和修复。
持久化日志管理: 日志自动保存并按项目轮换，保留最新记录，方便历史追踪。

安装步骤

全局安装dev3000命令行工具: 推荐使用 'pnpm'：

pnpm install -g dev3000

您也可以使用 'npm' 或 'yarn'：

npm install -g dev3000
# 或 yarn global add dev3000

启动您的Web应用并同时启动dev3000: 在您的Web应用项目根目录下，运行：
```
dev3000
```
这会默认启动您的 'package.json' 中的 'dev' 脚本（例如 'npm run dev'），并同时启动dev3000的监控服务和MCP服务器。

常用启动选项:
- 'dev3000 --port 5173': 如果您的Web应用运行在非默认的3000端口（例如Vite应用通常是5173），请使用 '--port' 指定。
- 'dev3000 --mcp-port 3684': 如果您希望MCP服务器监听不同于默认3684的端口，请使用 '--mcp-port' 指定。
- 'dev3000 --script "build-start"': 如果您的开发服务器启动脚本不是 'dev'，请使用 '--script' 指定。
- 'dev3000 --profile-dir ./chrome-profile': 指定Chrome用户数据目录，以持久化浏览器cookies和登录状态。

服务器配置

MCP客户端需要配置与dev3000 MCP服务器的连接信息，以便调用其提供的工具。以下是用于连接 dev3000 MCP 服务器的配置示例（JSON格式），您可以在LLM客户端中配置此信息：

{
  "name": "dev3000-debugger",
  "displayName": "dev3000 AI 调试器",
  "description": "连接到 dev3000 MCP 服务器，获取开发日志、浏览器事件，并可控制浏览器执行调试操作。",
  "command": "dev3000",
  "args": [],
  "env": {},
  "capabilities": {
    "url": "http://localhost:3684/api/mcp/mcp",
    "transport": "http",
    "timeout": 60000,
    "tools": [
      {
        "name": "healthcheck",
        "description": "简单的健康检查，用于验证 MCP 服务器是否正常工作。",
        "parameters": {
          "type": "object",
          "properties": {
            "message": {
              "type": "string",
              "description": "可选消息，将原样返回。"
            }
          }
        }
      },
      {
        "name": "read_consolidated_logs",
        "description": "读取整合的开发日志（包括服务器和浏览器日志）。",
        "parameters": {
          "type": "object",
          "properties": {
            "lines": {
              "type": "number",
              "description": "要读取的最新行数（默认：50）。"
            },
            "filter": {
              "type": "string",
              "description": "根据文本内容过滤日志。"
            },
            "logPath": {
              "type": "string",
              "description": "日志文件的路径（默认：./ai-dev-tools/consolidated.log）。"
            }
          }
        }
      },
      {
        "name": "search_logs",
        "description": "使用正则表达式模式搜索整合日志。",
        "parameters": {
          "type": "object",
          "properties": {
            "pattern": {
              "type": "string",
              "description": "要搜索的正则表达式模式。"
            },
            "context": {
              "type": "number",
              "description": "匹配行周围的上下文行数（默认：2）。"
            },
            "logPath": {
              "type": "string",
              "description": "日志文件的路径（默认：./ai-dev-tools/consolidated.log）。"
            }
          },
          "required": ["pattern"]
        }
      },
      {
        "name": "get_browser_errors",
        "description": "从日志中获取最近的浏览器错误和页面错误。",
        "parameters": {
          "type": "object",
          "properties": {
            "hours": {
              "type": "number",
              "description": "要回溯的小时数（默认：1）。"
            },
            "logPath": {
              "type": "string",
              "description": "日志文件的路径（默认：./ai-dev-tools/consolidated.log）。"
            }
          }
        }
      },
      {
        "name": "execute_browser_action",
        "description": "通过Chrome DevTools Protocol执行安全的浏览器操作。",
        "parameters": {
          "type": "object",
          "properties": {
            "action": {
              "type": "string",
              "enum": ["click", "navigate", "screenshot", "evaluate", "scroll", "type"],
              "description": "要执行的操作。"
            },
            "params": {
              "type": "object",
              "description": "操作的参数。",
              "properties": {
                "x": {
                  "type": "number",
                  "description": "点击/滚动的X坐标。"
                },
                "y": {
                  "type": "number",
                  "description": "点击/滚动的Y坐标。"
                },
                "url": {
                  "type": "string",
                  "description": "导航的URL。"
                },
                "selector": {
                  "type": "string",
                  "description": "元素定位的CSS选择器。"
                },
                "text": {
                  "type": "string",
                  "description": "要输入的文本。"
                },
                "expression": {
                  "type": "string",
                  "description": "要评估的JavaScript表达式（仅限安全表达式）。"
                },
                "deltaX": {
                  "type": "number",
                  "description": "水平滚动量。"
                },
                "deltaY": {
                  "type": "number",
                  "description": "垂直滚动量。"
                }
              }
            }
          },
          "required": ["action", "params"]
        }
      }
    ]
  }
}

配置说明:

'name': 服务器的唯一标识符，可自定义。
'displayName': 在MCP客户端中显示的名称。
'description': 服务器的功能描述。
'command': 启动 'dev3000' 服务的命令行命令。这里可以直接填写 '"dev3000"'，因为它通常是全局安装的。
'args': 启动 'dev3000' 服务的命令行参数列表。例如，如果您启动dev3000时使用了 '--port 5173 --mcp-port 8080'，则这里应填写 '["--port", "5173", "--mcp-port", "8080"]'。如果使用默认值且没有额外参数，则留空 '[]'。
'env': 环境变量，如果需要为 'dev3000' 进程设置特定环境变量，可在此处配置。
'capabilities': 声明MCP服务器的能力和接口。
- 'url': MCP服务器的基URL，通常为 'http://localhost:<mcp-port>/api/mcp/mcp'。如果您的 'mcp-port' 是默认的 '3684'，则为 'http://localhost:3684/api/mcp/mcp'。
- 'transport': 通信协议，这里使用 'http' (实际是基于HTTP/S的JSON-RPC)。
- 'timeout': 请求超时时间（毫秒），LLM客户端等待MCP服务器响应的最大时间。
- 'tools': MCP服务器提供的工具列表。每个工具包含名称、描述和参数定义（基于JSON Schema），这些是LLM可以调用的函数。

基本使用方法

启动dev3000: 在您的项目目录下运行 'dev3000'（带上必要的 '--port' 或 '--script' 参数以匹配您的Web应用）。这会启动您的开发服务器、dev3000监控服务和MCP服务器。
连接AI客户端: 配置您的AI客户端（如支持MCP协议的LLM客户端）使其连接到上述 服务器配置 中 'capabilities.url' 指定的地址。
LLM交互: 您的AI助手现在可以通过调用MCP服务器提供的工具来与开发环境进行交互，例如：
- 调用 'read_consolidated_logs' 工具请求最新的开发日志，获取应用运行时的状态。
- 调用 'search_logs' 工具使用正则表达式在历史日志中搜索特定模式。
- 调用 'get_browser_errors' 工具提取特定时间段内的浏览器端错误。
- 调用 'execute_browser_action' 工具让AI助手直接在监控的浏览器中执行操作，例如：导航到某个页面、在指定坐标点击元素、在输入框中输入文本、获取当前页面的截屏、执行安全的JavaScript表达式获取页面信息（如标题、URL）等。
可视化查看: 随时访问 'http://localhost:3684/logs'（如果MCP服务器端口为默认值）在浏览器中查看开发时间线、截屏和所有日志，更直观地跟踪应用状态。
停止服务: 在运行 'dev3000' 的终端中按下 'Ctrl-C' 即可安全关闭所有由dev3000启动的服务和浏览器。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息