00:00:00Chrome 团队终于发布了一项更新，让 Chrome DevTools MCP 服务器
00:00:06能够与正在运行的 Chrome 实例对话，从而处理登录页面后的调试问题、
00:00:12对实时会话进行分析，甚至能执行一些非常酷的调试操作，比如访问
00:00:17已选中的元素、特定错误甚至是网络活动。
00:00:21但由于 Agent Browser 和 Playwright 等其他 AI 浏览器调试工具已经添加了
00:00:26带有技能的 CLI 以及 MCP 服务器，Chrome DevTools MCP 是否也
00:00:31需要在未来加入这些功能呢？
00:00:33点个订阅，让我们一探究竟。
00:00:35几个月前，Anjis 制作了一个视频，对 Chrome DevTools MCP 服务器
00:00:44进行了精彩的概述，但当时它只能启动新的 Chrome 会话，或者
00:00:49连接到远程调试端口，但这需要大量的手动设置。
00:00:53但现在，在 Chrome 144 及以上版本中，只要开启远程调试标志，Chrome
00:00:58MCP 工具就会自动检测已打开的会话并用于调试，这对我个人来说
00:01:04改变了游戏规则，因为我更喜欢在终端中使用 Claude code，这意味着
00:01:09我不再需要使用像 Deer、Comet 甚至是 Claude Chrome 扩展程序这类 AI 浏览器，
00:01:15或者像 React Grab 这样有用的 AI 调试工具了。
00:01:18让我们来看看这些 Chrome DevTools MCP 的新功能。
00:01:22首先，你需要安装支持自动连接选项的 MCP 服务器。
00:01:27我使用的是 open code，但它支持许多智能体框架；在 Chrome 内部，
00:01:31你需要访问这个 URL 并确保开启此选项。
00:01:36以前，你必须使用类似这样的命令来启动会话，智能体
00:01:40会通过 HTTP 连接到公开的端口。
00:01:43但在这种新方式下，你可以像往常一样启动 Chrome，访问所有的
00:01:48Cookie、历史记录等等，并且可以在完成后随时关闭它。
00:01:53如果你注重隐私安全，稍后在视频中，我会向你展示如何连接
00:01:57到一个更私密版本的 Chrome。
00:01:59但在完成这两件事之后——即开启该选项并使用
00:02:04自动连接选项连接到 MCP 服务器，一切就准备就绪了。
00:02:08我可以让我的智能体检查 Betastack 的性能，然后在 Chrome 中，我会看到
00:02:12一个弹出窗口询问是否允许远程调试，接着顶部会出现这个横幅。
00:02:17现在智能体已经能够导航到 Betastack 网站，并正在使用
00:02:21Lighthouse 审计工具为我提供核心 Web 指标、Lighthouse 评分和其他细节。
00:02:27现在让我们做点有用的事。
00:02:29这是我正在开发的一个语言学习应用。
00:02:31我以管理员身份登录，进入内容管理，选择一个特定单元并打开这个练习。
00:02:37我注意到练习弹窗底部的“保存”按钮
00:02:42与网站上的其他按钮风格不一致。
00:02:44我不需要手动告诉智能体重复我的步骤（比如登录并导航到
00:02:49这个特定页面），而是直接在检查工具中选中这个“保存”按钮，然后
00:02:55询问智能体是否能看到我选中的元素。
00:02:58过了一会儿，它就能识别出我选中了“保存”按钮。
00:03:02于是我要求它修改“保存”按钮的样式，使其看起来像新的练习
00:03:06按钮，就是如果你能看到的这边这个按钮。
00:03:09几秒钟后，它就将按钮样式修改成了我完全想要的样子。
00:03:13但如果你是在沙盒环境中运行 MCP 服务器，你就需要使用
00:03:18浏览器 URL 选项，并将远程调试端口设为 HTTP，而不是 WebSockets。
00:03:23如果你注重安全，你需要为 MCP 服务器添加一个特定位置的
00:03:28用户数据目录（user data directory）选项，这意味着智能体将无法访问
00:03:33你现有的 Cookie、密码、浏览器历史记录等内容。
00:03:36如果你想让智能体访问这些网站，你就必须重新登录。
00:03:41尽管这很酷，但如果你看过我之前的视频，你就会知道我并不是
00:03:46MCP 服务器的忠实粉丝，因为如果你运行很多服务器，它们会消耗
00:03:51大量的上下文空间。
00:03:52幸运的是，Chrome DevTools MCP 服务器允许你通过 CLI 完成所有操作，
00:03:59这并不广为人知，因为它藏得比较深，你必须进入
00:04:04skills 目录下的 Chrome DevTools CLI 才能发现这个实验性功能，
00:04:10那里提供了关于如何使用它的信息。
00:04:12如果你还没安装，那里也有一些安装说明。
00:04:16这基本上是 MCP 服务器的一个轻量级封装。
00:04:20如果你已经在智能体框架中运行了它，这个 CLI 不会共用那个实例，
00:04:24因为它使用自己的守护进程（daemon）。
00:04:26这条命令可以查看默认运行的守护进程信息，你可以看到
00:04:30它已经设置了浏览器 URL 标志以及 headless 和 isolated 等其他标志。
00:04:34但你也会注意到，现有的 CLI 选项中没有自动连接（auto connect）。
00:04:39所以，如果你还没通过终端运行 Chrome，你就得先退出当前的，然后
00:04:43像这样运行它，确保在使用远程调试端口标志的同时，
00:04:48也带上用户数据（user data）标志。
00:04:50现在一切就绪，我可以像这样启动守护进程，获取页面列表，
00:04:54目前只显示了一个新标签页，因为没开太多东西。
00:04:57当然，真正的威力在于配合智能体使用。
00:05:01如果我关掉 Chrome MCP 工具，在 DevTools 中选中这个按钮，并让智能体
00:05:06使用 CLI 来查明选中的是哪个元素，我们可以看到它成功识别出来了。
00:05:10注意，用户数据目录中的信息在不同会话之间是持久化的。
00:05:11所以它保留了我所有的 Cookie、浏览器信息等。
00:05:15此外，Chrome DevTools CLI 还有很多功能。
00:05:19我建议你去查看这个技能，或许未来
00:05:22他们会引入自动连接功能。
00:05:26以上就是对 Chrome DevTools MCP 服务器和 CLI 一些新酷功能的快速演示，
00:05:28这肯定会提升你使用编码助手时的调试体验。
00:05:32作为一名 Arc 用户（是的，我还在用 Arc），我真的很希望这个功能
00:05:38未来也能支持它。
00:05:39但在那之前，我很乐意使用 Vassal 的 agent browser，它一直
00:05:45表现得非常出色。
00:05:50如果你对 agent browser 一无所知，可以去看看我很久以前做的视频，
00:05:51虽然从那时起它已经改进了很多。
00:05:55所以，也许是时候让我再做一个新视频了。
00:05:58感谢观看。