Kilo Code 浏览器自动化Browser Use实战指南从 Playwright MCP 到内建浏览器代理【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocodeKilo Code 内置的 Browser Use浏览器自动化能力让你可以在不离开编辑器/终端的情况下直接操控真实浏览器打开网页、点击元素、填写表单、滚动、截图验证前端页面与本地服务的渲染结果。本指南以 Kilo 开源仓库中 browser-use.md 为骨架结合 browser-automation 服务源码 深入讲解其工作原理、配置方式、可用的浏览器工具、安全模型与适用边界读完后你可以在 VSCode 或 CLI 两种模式下立即开始用自然语言驱动浏览器。模型支持要求Browser Use 依赖高级 agentic 模型来理解截图与可访问性快照并规划下一步动作。它通常在近期的高能力模型上表现最稳定例如 Claude Sonnet 4 级别的模型。Browser Use 是什么场景与价值Browser Use 是 Kilo 提供的一项浏览器自动化能力允许 Agent 直接与网站交互。它主要服务于三类典型场景测试 Web 应用让 Agent 访问http://localhost:3000等本地开发服务滚动到底部检查页脚、验证元素渲染是否正常自动化浏览器任务在对话中以自然语言驱动浏览器执行点击、输入、下拉选择、拖拽等操作代替人工重复验证截图取证每次动作后自动截取页面 JPEG 截图让你直观看到 Agent 当前看到的页面状态。该功能完全内置于工作流之中——你在聊天框里提出需求Kilo 负责启动浏览器、执行动作并回传截图无需手动打开浏览器窗口。两种使用形态VSCode 内建与 CLI/Playwright MCPKilo 将浏览器自动化划分为两种入口分别面向图形化编辑器与命令行使用场景。VSCode零配置内建浏览器自动化是扩展内置功能无需任何手动搭建。只需进入Settings设置→ Web Tools → Browser Automation开启开关Kilo 会自动接管后续的一切按需启动浏览器、注入驱动、回传截图与状态。从源码看这一内建能力由packages/kilo-vscode下的 browser-automation 服务 实现核心是BrowserBroker见 browser-broker.ts它在本机127.0.0.1上起一个带 Bearer Token 鉴权的 HTTP 服务环境变量KILO_BROWSER_BROKER_URL/KILO_BROWSER_BROKER_TOKENAgent 通过该服务驱动 Playwright 浏览器实例UI 侧再通过状态订阅拿到实时的BrowserStatestarting / ready / loading / error / closed与截图。CLI通过 Playwright MCP 接入CLI 形态下Kilo 使用 Playwright 官方提供的 MCP 服务器来完成浏览器自动化。在kilo.jsonc位于~/.config/kilo/kilo.jsonc或项目根目录./kilo.jsonc中声明即可{ mcp: { playwright: { type: local, command: [npx, -y, playwright/mcplatest] } } }首次使用时 Playwright 会自动下载 Chromium 浏览器内核无需额外安装步骤。声明完成后Kilo 的 Agent 即可通过该 MCP 服务器暴露的浏览器工具执行各类网页操作。典型使用流程一次完整的浏览器交互浏览器交互遵循一个清晰、可复现的模式提出访问请求在对话中要求 Kilo 访问某个网站浏览器启动并回传截图Kilo 自动拉起浏览器完成导航后回传当前页面的截图供你确认下达后续动作继续用自然语言要求点击、输入、滚动等操作任务结束关闭浏览器Agent 在任务完成后关闭浏览器会话。下面是文档中给出的几个可以直接上手的示例指令Open the browser and view our site.Can you check if my website at https://kilocode.ai is displaying correctly?Browse http://localhost:3000, scroll down to the bottom of the page and check if the footer information is displaying correctly.最后一条指令特别适合开发流程把本地开发服务器跑在localhost:3000让 Agent 从页面顶部滚到底部检查页脚信息相当于一次自动化的冒烟验证。浏览器动作Agent 可以做什么VSCode 形态纯自然语言驱动在 VSCode 中当你提出浏览器相关需求时Kilo 会自动启动浏览器并在每次动作后返回截图让你实时看到当前状态。它可以完成的能力包括导航到指定 URL点击页面元素在表单中输入内容滚动页面悬停元素触发 tooltip 或下拉菜单从下拉框中选择选项拖拽元素到目标位置。所有操作均由聊天框中的自然语言指令驱动无需编写任何选择器或脚本。CLI 形态可用的浏览器工具清单CLI 模式下Playwright MCP 服务器提供一套浏览器工具每次动作后都会返回截图和可访问性快照。其关键特性包括当某个浏览器工具被调用时浏览器自动启动多个浏览器工具可以按顺序连续调用例如先browser_navigate再browser_click每次动作后自动截图提供视觉反馈。工具功能描述适用时机browser_navigate导航到指定 URL打开一个网页browser_click点击页面上的元素与按钮、链接等交互browser_type向输入元素输入文本填写表单、搜索框browser_screenshot截取页面截图检查页面视觉状态browser_scroll滚动页面或页面内特定区域查看上方/下方内容browser_hover悬停在元素上触发 tooltip 或菜单browser_select从下拉框选择一个选项处理 select 元素browser_drag将元素拖到目标位置拖拽交互设置项详解VSCode 形态浏览器自动化的设置集中在Settings设置→ Web Tools → Browser Automation下共三个开关设置项说明默认值Enable browser automation启用浏览器自动化总开关控制浏览器自动化是否可用关闭Headless mode无头模式以不可见窗口方式运行浏览器关闭显示窗口Use system Chrome使用系统 Chrome使用你已安装的 Chrome关闭后 Playwright 将下载并使用自带 Chromium开启其中Use system Chrome默认开启意味着Kilo 优先复用你机器上已安装的 Chrome避免重复下载浏览器内核。从源码实现看browser-runtime.ts 中的启动选项在开启该设置时会追加channel: chrome使用系统 Chrome否则回退到 Playwright Chromium同时启动参数强制chromiumSandbox: true并过滤掉环境变量中所有含proxy或TOKEN/SECRET/PASSWORD/CREDENTIAL/AUTH/API_KEY等敏感模式的变量避免浏览器子进程继承代理设置与密钥。若启动失败错误信息会明确提示安装 Google Chrome 或在设置中启用 Use System Chrome。CLI 形态CLI 模式下浏览器自动化只需在kilo.jsonc中声明 Playwright MCP 即可无需额外设置——Playwright 自动管理浏览器生命周期下载、启动、关闭。源码级原理BrowserBroker 如何工作VSCode 内建实现的核心是 browser-broker.ts 中的BrowserBroker类理解它有助于你预判功能行为与排查问题。架构与状态机BrowserBroker以项目/会话为维度管理浏览器条目Entry每个条目维护一个BrowserContext与一个Page并对外暴露统一状态BrowserStatebrowserId、projectId、sessionId标识浏览器归属status在starting → ready → loading → error → closed间流转screenshot为每次动作后捕获的image/jpeg截图质量 70上限 2MB超出会报错errors统计页面 console error 与未捕获异常次数logs保留最近 20 条控制台日志。每个会话上的操作通过serial串行化执行避免并发导航/截图相互干扰浏览器会话与项目/目录绑定open/refresh/close等操作都会校验归属Browser session does not belong to the requested project or directory同一会话目录或项目不允许中途变更。浏览器启动细节默认以1280×720视口创建上下文并设置serviceWorkers: block导航使用domcontentloaded等待策略、30 秒超时HTTP 状态码 ≥ 400 时视为导航失败并明确报错如Local application returned HTTP 404。每次导航成功后都会自动update同步 URL 与标题并capture截图从而保证每次动作后你都能看到最新视觉状态。安全模型为本地调试而设计这是该功能最值得注意的设计。从 validate 与 allowed 逻辑 可以看出Kilo 的浏览器代理仅面向本地回环地址只允许http://localhost或http://127.0.0.1且不含用户名密码的 URLIPv6 回环请显式使用localhost通过route拦截页面所有请求只放行与入口 URL 同源同 origin的 HTTP/HTTPS 请求跨域资源与 WebSocket 一律blockedbyclient中断页面弹出的popup会被记录并立即关闭Blocked browser popup若目标站点通过X-Frame-Options: DENY/SAMEORIGIN或 CSPframe-ancestors禁止内嵌会给出明确提示说明该应用禁止内嵌浏览器预览。因此该功能的安全定位是让你安全地让 Agent 浏览/验证本地开发服务如localhost:3000而非用于无限制的通用上网。若想用于任意公网站点请使用 CLI 形态的 Playwright MCP其工具集面向通用网页交互。错误诊断diagnostic()会将原始异常转换为人类可读的排查提示ERR_CONNECTION_REFUSED→ 无法连接本地应用请确认本地服务器已启动超时 → 本地应用未及时响应请检查服务器后重试浏览器已关闭 → 浏览器会话已关闭请重新打开浏览器后再试。结合状态机的error字段你可以快速定位是本地服务未启动、超时还是 HTTP 错误。实践建议与限制确认模型能力浏览器自动化依赖模型对截图与可访问性快照的理解与动作规划建议使用当前最高能力档的 agentic 模型如 Claude Sonnet 4 级别从本地服务开始开发中最常见的用法是验证localhost上的应用请先确保本地开发服务器已启动再让 Agent 访问否则会得到无法连接本地应用的提示信任工作区VSCode 内建代理要求工作区为可信状态available()中会检查trusted未受信工作区会被拒绝执行浏览器内核来源默认使用系统 Chrome若机器未安装 Chrome关闭Use system Chrome让 Playwright 下载 Chromium或直接走 CLI/Playwright MCP 形态自动下载 Chromium观察截图与日志每次动作后的截图是验证 Agent 行为的主要依据同时页面 console 错误会计入errors可用于辅助定位前端运行时问题。至此你已掌握 Kilo Browser Use 的两种接入方式、可用的浏览器工具集、设置项语义以及内建代理的底层安全与运行机制可以立即在编辑器中开始用自然语言驱动浏览器完成 Web 应用验证与自动化任务。【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考