AI导哈

页面级Chrome DevTools自动化服务器

一个专为WebOS设计的页面级Chrome DevTools协议自动化服务器，适用于嵌入式Chromium实例和远程调试场景。

  • by shyndman
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 shyndman/webos-devtools-mcp

使用说明

webos开发工具mcp

用于Chrome DevTools协议自动化的页面范围MCP服务器。适用于任何 页面范围的websocket端点，但特别为WebOS使用而构建。

背景

此MCP服务器直接连接到Chrome DevTools 页 WebSocket端点，与 chrome开发工具mcp 这需要一个以浏览器为目标的端点。

当调试仅公开页面级套接字的环境时，这种区别很重要，例如：

  • WebOS应用程序
  • 嵌入式Chromium实例
  • 访问受限的远程调试场景

安装

pnpm install
pnpm build

用法

服务器需要一个页面WebSocket端点。您可以通过以下方式提供：

命令行标志：

node ./dist/index.js --endpoint ws://localhost:9222/devtools/page/ABC123...

环境变量：

PAGE_WS_ENDPOINT=ws://localhost:9222/devtools/page/ABC123... node ./dist/index.js

MCP配置

添加到您的MCP设置文件（例如。， claude_desktop_config.json):

{
  "mcpServers": {
    "chrome-page-devtools": {
      "command": "node",
      "args": [
        "/path/to/webos-devtools-mcp/dist/index.js",
        "--endpoint",
        "ws://localhost:9222/devtools/page/YOUR_PAGE_ID"
      ]
    }
}
}

工具类别和筛选

所有工具都分为不同的类别。默认情况下，每个类别都是启用的，但是 您可以使用命令行标志定制表面区域：

  • --tools=core,dom,network –仅注册列出的类别
  • --without-tools=remote –注册除所列类别之外的所有类别

可用类别：

类别 描述
core 评估、日志和屏幕截图
dom DOM检查工具
dom-actions DOM交互助手（点击、键入、覆盖）
navigation 页面导航和重新加载帮助程序
storage Cookie和存储工具
network 网络捕获和检查
remote 远程控制/按键输入工具
overlay 视觉叠加实用程序
events 事件侦听器检查
console 控制台流媒体和状态工具

例子：

node ./dist/index.js --endpoint ws://... --tools=dom,network --without-tools=remote

可用工具

核心工具(core)

  • evaluate_expression -在页面上下文中执行JavaScript

DOM检查(dom)

  • dom_query_selector -通过CSS选择器查询和检查元素
  • dom_get_outer_html -检索元素的完整HTML
  • dom_accessibility_tree -丢弃可访问性树
  • dom_list_event_listeners -列出附加到元素、文档或窗口的DOM事件侦听器

DOM交互(dom-actions)

  • dom_click -单击元素
  • dom_type_text -在输入/文本区域键入文本

导航(navigation)

  • page_navigate -导航到URL
  • page_reload -重新加载当前页面

存储(storage)

  • storage_list_cookies -列出Cookie
  • storage_set_cookie -创建或更新cookie
  • storage_delete_cookie -删除特定cookie
  • storage_clear_cookies -清除所有Cookie
  • storage_list_local_storage -列出本地存储条目
  • storage_set_local_storage -设置本地存储项
  • storage_remove_local_storage -删除本地存储项

网络捕获(network)

  • network_start_capture -开始捕获网络请求
  • network_stop_capture -停止捕获网络请求
  • network_clear_capture -清除捕获的请求
  • network_list_requests -列出已捕获的请求并进行筛选（方法、资源类型，仅失败）
  • network_get_request_body -检索特定请求的请求或响应正文

遥控钥匙(remote)

  • remote_press_key -调度遥控键（箭头、OK、后退、彩色按钮、媒体控件等）
  • remote_type_text -通过字符键事件发送文本

岩芯记录和截图(core)

  • list_logs -检索缓冲的控制台消息、异常和日志
  • clear_logs -清除日志缓冲区
  • take_screenshot -截图

控制台流媒体(console)

  • console_subscribe -开始实时流式控制台输出
  • console_unsubscribe -停止流式控制台输出
  • console_stream_status -报告当前控制台流状态

视觉叠加(overlay)

  • overlay_highlight -突出显示与选择器匹配的元素
  • overlay_highlight_focused -突出显示当前关注的元素（document.activeElement）
  • overlay_hide -立即隐藏任何活动的叠加高亮显示

资源

  • resource://about/version –公开包版本、构建元数据（提交哈希、脏标志、生成时间戳）和节点运行时信息

相关 MCP