How to Use Claude Code in Your Browser

如何在浏览器中使用 Claude Code | Towards Data Science

Agentic AI

如何在浏览器中使用 Claude Code

学习如何应用代码代理来在浏览器中验证工作。

Eivind Kjosbakken

2026年6月22日

8分钟阅读

分享

学习如何应用调用代理来在浏览器中导航以验证工作。图片由ChatGPT生成。

关于代码代理的一个常见误解是，它们只能用于执行编码或编程。然而，它们实际上是更加通用的代理，基本上可以完成所有办公任务，尽管成功率各不相同。

然而，一个受到广泛关注的领域是使用诸如Claude Code和OpenAI的Codex等代码代理通过浏览器进行浏览。

这些代理在浏览网络方面变得非常熟练，这对许多不同任务都非常有用。

当然，网络浏览在许多不同情况下都非常有用，例如在互联网上获取信息或为您填写表格。然而，值得注意的是，某些使用场景可能会违反服务条款，因此您必须对此保持警惕。今天我将要讨论的主要使用场景肯定是完全合法的，它涵盖了使用代码代理导航您自己开发的应用程序以测试和验证实现。

之前，我曾多次讨论在要求代码代理为您执行操作时创建可验证的任务。给予代码代理访问您的浏览器以测试实现是这一可验证性的重要组成部分。

这张信息图突出了本文的主要概念或主题。我将讨论如何给予您的代码代理访问浏览器的权限，使其变得更为强大。我将讨论为什么代码代理需要访问浏览器，您应该设置的循环，以及如何使用这种浏览器访问使代理验证其自己的工作。图片由ChatGPT生成。

为什么代码代理应该使用您的浏览器

首先，我想介绍一下为什么您应该关心在代码代理中运行浏览器。浏览器是人类与世界互动的重要界面。通过您的浏览器，您可以执行许多不同的操作，例如查阅信息、填写申请表等。

鉴于这是人类与世界互动的重要界面，许多关注和研究都集中在如何有效导航浏览器上。目前有许多公司专门从事浏览器导航，而且所有前沿实验室都将其集成到他们的产品中，例如OpenAI的Codex和Anthropic的Claude Code。

想象一下，如果您告诉一个代码代理根据一个HTML设计文件来实现一个设计。当然，代码代理在前端代码方面很擅长，可以立即开始实现；然而，如果代码代理无法导航浏览器，它就无法验证自己的工作。

这大大增加了代码代理出错的可能性，并且无法实现您想要实现的确切设计。

幸运的是，解决这个问题有一个非常简单的办法。给予您的代码代理访问浏览器的权限。让它拍摄自己实现的设计的截图，并将其与您希望它实现的设计的截图进行比较。代码代理然后可以继续迭代，直到实现的代码看起来与设计文件完全一致。

这为你作为程序员节省了大量时间，因为你不需要反复验证并指导编码代理在执行设计实现时所犯的错误。这再次使你能够执行许多其他不同的任务，并作为工程师更加高效。

它是如何工作的

在继续讲解如何使用 Claude Code 导航浏览器之前，我还想简单地介绍它的工作原理。

从理论上讲，导航浏览器其实很简单。编码代理通过打开浏览器进行导航，当然，它能够访问一些操作：

• 截图

• 点击（基于坐标）

• 输入文本

这些是编码代理执行的三个主要操作，基本上是你与浏览器交互所需的所有操作：

• 编码代理需要截图，因为它通过截图来了解每一页的内容，并确定点击的位置。

• 编码代理还需要能够点击网站上的不同位置，例如点击按钮或点击输入框。

这是基于坐标的。

因此，如果编码代理想要点击某个特定的位置，它会输出以下文本：

click(x=0.754, y=0.328)

它基本上使用点击函数并提供想要点击的坐标。这些坐标通常被归一化到一个特定的范围，比如 0 到 1 之间。

然后，一旦代理点击了特定的位置，它就可以输入文本以在浏览器上执行所有想要的操作。当然，编码代理也可以执行不同类型的点击，例如右键点击以获取页面上的更多选项。

这个循环会不断重复。编码代理会截图，选择要执行的操作，检查是否实现了目标，然后重复。它再次截图，选择一个操作，检查是否实现了目标，然后继续。代理就这样一直继续下去，直到在浏览器中实现了目标。

如何使用 Claude Code 导航浏览器

接下来，我想详细介绍如何使用 Claude Code 导航浏览器，而我在这里介绍的原理基本上适用于任何编码代理。我不会介绍那些难以推广到几乎所有其他编码代理的技术。

首先，如果你正在使用 Claude Code，它有一个内置的 Chrome 集成，你只需在 Claude Code 窗口中输入以下命令即可启用：

/chrome

Codex 也有相应的命令。

这非常简单地让 Claude 能够在你的电脑上打开 Chrome 并使用它来验证任务。

我认为 Claude 中的 Chrome 实现表现还可以，但并不是最优的。

我使用 Playwright MCP 的体验更好，你只需告诉 Claude Code 安装它，就可以在 Claude Code 中简单地安装 Playwright MCP：

Install the Playwright MCP to interact with the browser

在 Claude 安装完成后，你需要重新启动 Claude Code，这样你就可以使用 Playwright MCP 了。根据我的经验，如果 Claude 使用 Playwright MCP 而不是使用基础 Claude Code 中已有的 /chrome 实现，它在完成任务时会更有效。

当然，如果你使用的是其他编码代理，你也可以做同样的事情：告诉它安装 Playwright MCP。代理会安装 MCP，然后你重新启动代理，它将能够使用 Playwright。

我该如何让我的代理测试我的实现

现在你已经实现了 Playwright MCP 并为你的代理提供了与浏览器交互的权限，就可以使用它来测试你的实现。

每当你的代理完成某项工作（例如，从设计文件中实现了一个新设计），只需告诉代理通过 Chrome 浏览器使用 Playwright MCP 来端到端地验证其工作成果，并确认其自身的工作是否正确。

同时，告诉代理不要中途停止，直到它完成端到端的验证后才回来向你汇报。在这种情况下，端到端验证意味着实际与浏览器进行交互，并确认某项功能是否正常工作。

我通常还会使用 /goal 功能，该功能在 Codex 和 Claude Code 中都可用，它基本上是一种让代理持续完成任务直到达成目标的方式。我通常会写类似以下的内容：

/goal 继续完成任务，实现 <feature>，直到你完全实现该功能，并通过使用 Playwright MCP 与浏览器进行交互、截图并验证你的工作，只有在你成功实现了该功能并进行了完整的测试后，才回来向我汇报。

这将使代理持续朝着目标努力并进行验证，只有在验证工作完成后才会回来向你汇报。这为我节省了大量时间，特别是在你只想让代理实现设计时，尤其有用。

结论

在本文中，我介绍了如何使用 Claude Code 在浏览器中验证工作。首先，我讨论了为什么编码代理可以并且应该与你的浏览器进行交互。然后，我向你展示了编码代理如何实际进行浏览器导航，这实际上是一个相当简单的概念。最后，我具体介绍了如何使用 Claude Code 或其他编码代理来导航浏览器。

我认为浏览器导航仍然会非常重要，因为人类与世界互动的很多方式都是通过浏览器进行的。然而，值得注意的是，编码代理在使用 API 和 MCP 方面仍然更加高效，因此，如果你可以通过这些方式与某个服务进行交互，你应该基本上总是选择这样做。

此外，请查看《如何高效并行运行多个 Claude Code 代理》。

👋 联系我

👉 我的免费电子书和网络研讨会：

🚀 使用 LLMs 将你的工程效率提升 10 倍（免费 3 天电子邮件课程）

📚 获取我的免费视觉语言模型电子书

💻 我关于视觉语言模型的网络研讨会

👉 在社交媒体上找到我：

💌 Substack

🔗 LinkedIn

🐦 X / Twitter

撰写者

查看 Eivind Kjosbakken 的所有文章

Ai Agent

,

Coding agent

coding agents

LLM Agents

Programming

分享本文

• 在 Facebook 上分享

• 在 LinkedIn 上分享

• 在 X 上分享

Towards Data Science 是一个社区出版物。提交你的见解，以接触我们的全球受众并通过 TDS 作者支付计划获得报酬。

将 href 更新为你的实际提交 URL

为 TDS 撰写文章

✦ 结束 CTA ✦