news 2026/4/17 16:57:46

openclaw mcporter 操作 chome 在 window10/linux chrome-devtools-mcp

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
openclaw mcporter 操作 chome 在 window10/linux chrome-devtools-mcp

主要是提供了一种新的方式,不集成搜索引擎来搜索东西,可以节省很多不必要的token花销。

openclaw mcporter 操作 chome 在 window10/linux chrome-devtools-mcp

https://github.com/ChromeDevTools/chrome-devtools-mcp/
https://github.com/steipete/mcporter

首先在 window10/linux
安装 chrome-devtools-mcp
npm install chrome-devtools-mcp@latest
mcporter 是 openclaw 自带工具

已安装 Node.js(建议 v16+,过低版本可能兼容报错),可通过 node -v 检查版本;
已配置 npm 源(默认官方源,国内建议切换国内源。

然后配置

chrome 配置:

window

"C:\Program Files\Google\Chrome\Application\chrome.exe"--user-data-dir=D:/Chrome002 --remote-debugging-port=9222

Debian 系统通用版

# 标准格式(Chrome安装在系统默认路径)/usr/bin/google-chrome --user-data-dir=/home/你的用户名/Chrome002 --remote-debugging-port=9222

chrome-devtools-mcp 命令

npx chrome-devtools-mcp@latest --browser-url=http://192.168.0.2:9223 --port=18793--no-usage-statistics

接下来配置 frp 端口转发,如果是同一台电脑应该不用。

#serverAddr="js.shuobude.top"serverAddr="127.0.0.1"serverPort=7000[[proxies]]name="chrome-devtools-mcp "type="tcp"localIP="127.0.0.1"localPort=18793remotePort=18794[[proxies]]name="chromes"type="tcp"localIP="127.0.0.1"localPort=9222remotePort=9223

首先 mcporter config add browser-url
我的是在 /root/.openclaw 执行,那么config就在 /root/.openclaw/config
名字叫 mcporter.json

mcporter configadd--browser-url=http://192.168.0.2:9223

接下来是 mcporter mcpServer 配置,自己替换ip

{"mcpServers":{"chrome":{"type":"stdio","command":"npx","args":["-y","chrome-devtools-mcp@latest","--browser-url=http://192.168.0.2:9223"]}},"imports":[]}

然后执行 mcporter list

root@debian:~/.openclaw# mcporter listmcporter0.7.3 — Listing1server(s)(per-server timeout: 30s)- chrome(26tools,2.5s)✔ Listed1server(1healthy). root@debian:~/.openclaw#

现在 mcporter 链接 chrome-devtools-mcp 就成功了。

接下来是我自己的提示词

这次给我搜索 云南的美食,美景, 首先,进入 /root/.openclaw ,执行mcporter list 验证 chrome
是否有效。 确认需要什么搜索引擎,这次是 bing作为搜索引擎。 接下来,开始加载,mcporter 的命令集, 首先打开
mcporter list chrome ,用来给 AI 解析哪些参数是正确的。 然后 执行,mcporter
call,直接打开搜索引擎主页。

接下来,制定完所有的搜索步骤,

结合 mcporter list chrome 解析出来的所有参数, 拼接完所有的步骤,等待用户确认开始执行。
然后你在后台直接执行完后,接着汇总,看用户需要怎么操作。 强制要求:搜集网页源必须真实,要能够点击访问, 所以,允许你
搜索网页源的时候,多加一步,必须确认能够正常访问。 最后交付要附上可以点击访问的来源。

mcporter list chrome ,用来给 AI 解析哪些参数是正确的。

你提供的配置:

{
“mcpServers”: {
“chrome”: {
“baseUrl”: “http://192.168.0.2:18794”
}
},
“imports”: []
}

在语法上是合法的,但 不符合 chrome-devtools-mcp 项目的实际使用方式。

❌ 问题核心:chrome-devtools-mcp 不是 HTTP 服务,而是 MCP over Stdio / WebSocket 的本地进程

根据 官方文档 和所有支持 MCP 的客户端(如 Cursor、VS Code、Gemini CLI 等)的配置方式:

✅ chrome-devtools-mcp 应该作为子进程启动(通过 command + args),而不是通过 baseUrl 远程调用。

🔍 官方标准配置示例(来自 README):
{
“mcpServers”: {
“chrome-devtools”: {
“command”: “npx”,
“args”: [“-y”, “chrome-devtools-mcp@latest”]
}
}
}

或者带参数:
{
“mcpServers”: {
“chrome-devtools”: {
“command”: “npx”,
“args”: [
“chrome-devtools-mcp@latest”,
“–browser-url=http://192.168.0.2:9223”,
“–port=0” // 注意:通常不需要指定 port,MCP 通过 stdio 通信
]
}
}
}

⚠️ 关键点:MCP 协议默认通过 stdin/stdout 与父进程通信,不是 HTTP!

📌 为什么你的 baseUrl 配置无效?

  • baseUrl 适用于 已经运行的、提供 HTTP-based MCP 接口的服务(如某些自定义 MCP 服务器)。
  • 但 chrome-devtools-mcp 默认不启动 HTTP 服务器!它只通过 stdio(标准输入输出) 与 IDE 通信。
  • 即使你手动加了 --port=18793,它启动的是一个 WebSocket-based DevTools 代理,不是标准 MCP-over-HTTP 服务,所以 IDE 无法通过 baseUrl 与之对话。

💡 简单说:baseUrl 是给“HTTP MCP 服务”用的,而 chrome-devtools-mcp 是“子进程 MCP 服务”。

✅ 正确配置方式(推荐)

方案 1:让 IDE 直接启动 chrome-devtools-mcp(最简单可靠)

{
“mcpServers”: {
“chrome-devtools”: {
“command”: “npx”,
“args”: [
“-y”,
“chrome-devtools-mcp@latest”,
“–browser-url=http://192.168.0.2:9223”
]
}
},
“imports”: []
}

✅ 优点:

  • 不需要 frp;
  • 不需要手动管理端口;
  • IDE 直接通过 stdio 与 MCP 通信;
  • 自动处理生命周期。

🔸 注意:确保 192.168.0.2:9223 可访问,且 Chrome 已加载真实网页(如你已做到的 Google 搜索页)。

方案 2:如果你必须通过网络(如远程开发)

目前 chrome-devtools-mcp 官方不支持原生 HTTP MCP 接口。
但你可以用第三方工具桥接 stdio 到 TCP,例如:

使用 mcp-proxy(社区方案)或自定义 wrapper

不过这很复杂,强烈不建议,除非你有特殊架构需求。

🚫 所以:不要用 baseUrl + --port 的组合来连接 chrome-devtools-mcp —— 它不是这么设计的。

🔧 如果你坚持用 --port(高级用法)

chrome-devtools-mcp 的 --port 参数其实是启动一个 内部 HTTP 服务器用于 DevTools 前端调试,不是给 MCP 客户端用的!

它的主要用途是:

  • 让 DevTools 前端连接;
  • 或配合 --auto-connect 使用;

MCP 协议本身仍然走 stdio。

所以即使你看到它监听了 18793,IDE 也无法通过 baseUrl 使用它。

✅ 最终建议

删除 baseUrl 配置,改用 command + args 启动进程:

{
“mcpServers”: {
“chrome-devtools”: {
“command”: “npx”,
“args”: [
“-y”,
“chrome-devtools-mcp@latest”,
“–browser-url=http://192.168.0.2:9223”
]
}
},
“imports”: []
}

然后:

  1. 确保 192.168.0.2:9223 有可调试的真实网页;

  2. 在 IDE 中触发一个 prompt,如:
    Take a screenshot of the weather page

  3. 观察是否自动连接并操作浏览器。

📚 参考官方文档

  • MCP Client configuration
  • 所有示例都使用 command + args,无一使用 baseUrl

✅ 总结:
你的配置问题不是 IP 或端口错误,而是 误解了 chrome-devtools-mcp 的通信模型。
请改用 command 方式启动,这是唯一官方支持的方法。

通过 mcporter 工具,触发 Chrome 浏览器路由到到百度首页

mcporter call chrome.navigate_pagetype=urlurl=https://baidu.com root@debian:~/.openclaw# mcporter call chrome.navigate_page type=url url=https://baidu.com# navigate_page responseSuccessfully navigated to https://baidu.com.## Pages1: https://www.baidu.com/[selected]

最新配置

{"mcpServers":{"chrome":{"type":"stdio","command":"npx","args":["-y","chrome-devtools-mcp@latest","--browser-url=http://192.168.0.2:9223"]}},"imports":[]}
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/17 14:05:37

如何用项目管理工具提升团队效能?StatSVN实践指南

如何用项目管理工具提升团队效能?StatSVN实践指南 【免费下载链接】StatSVN StatSVN is a metrics-analysis tool for charting software evolution through analysis of Subversion source repositories. 项目地址: https://gitcode.com/gh_mirrors/st/StatSVN …

作者头像 李华
网站建设 2026/4/18 6:51:09

3步构建专属AI SQL助手:从环境搭建到企业级部署

3步构建专属AI SQL助手:从环境搭建到企业级部署 【免费下载链接】sqlcoder SoTA LLM for converting natural language questions to SQL queries 项目地址: https://gitcode.com/gh_mirrors/sq/sqlcoder 如何用数据证明SQLCoder的效率优势? 传统…

作者头像 李华
网站建设 2026/4/13 16:33:36

【实战指南】Winform+Halcon+C#通用视觉框架开发:从源码解析到功能拓展

1. 框架架构解析与源码结构 这个通用视觉框架的核心设计理念是模块化和可扩展性。整个项目采用经典的三层架构设计,从下往上分别是硬件接口层、算法处理层和用户界面层。我拆解过多个类似框架后发现,这种分层方式能有效降低耦合度,特别适合需…

作者头像 李华
网站建设 2026/4/18 8:38:24

ChatGPT训练过程优化:从数据预处理到分布式训练的实战效率提升

背景痛点:大模型训练为什么“慢”得离谱 过去一年,我先后参与了三个百亿级参数模型的预训练项目,每次都被同一个“幽灵”绊住脚——效率。GPU 机器一上电就像烧钱,但 nvidia-smi 里却经常出现“0% Util”的尴尬。总结下来&#x…

作者头像 李华
网站建设 2026/4/16 10:06:28

QRemeshify拓扑优化完全指南:从基础到专家的进阶路径

QRemeshify拓扑优化完全指南:从基础到专家的进阶路径 【免费下载链接】QRemeshify A Blender extension for an easy-to-use remesher that outputs good-quality quad topology 项目地址: https://gitcode.com/gh_mirrors/qr/QRemeshify QRemeshify作为Blen…

作者头像 李华