关于 browser-setup-devtools
面向使用 Chrome DevTools MCP 的 Agent 的浏览器设置技能。它会检查 Chrome 和 MCP 是否可用，并引导 Agent 打开网页。
主要功能
- 01检查 Chrome 是否已安装
- 02确认 DevTools MCP 是否可用
- 03选择或创建浏览器页面
- 04排查 MCP 连接故障
- 05导航至指定网址
适用场景
- 01在任务前准备浏览器自动化
- 02DevTools MCP 调用失败时恢复
- 03设置完成后打开网页
MCP 相关
使用 Chrome DevTools MCP 列出、选择和创建页面，并导航至网址。
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/browser-setup-devtools确认已加载。
详细介绍
浏览器自动化设置（Chrome DevTools MCP）
原则
- 尽量精简提示词；尽可能使用工具和命令完成任务。
- 仅使用 Chrome DevTools MCP。
工作流
- 询问：“这台电脑上安装了 Chrome 吗？”
- 如果没有或不确定：
- 提出由你打开下载页面；如果可以，就直接操作。
- 提供可点击的链接：https://www.google.com/chrome/
- 确认安装完成后继续。
- 检查 DevTools MCP 是否可用：
- 调用
chrome-devtools_list_pages。 - 如果有页面，使用
chrome-devtools_select_page选择一个。 - 如果没有页面，使用
chrome-devtools_new_page创建一个（使用 https://example.com），然后选择该页面。
- 调用
- 如果 DevTools MCP 调用失败：
- 请用户打开 Chrome 并保持运行。
- 重试
chrome-devtools_list_pages。 - 如果仍然失败，确保
opencode.jsonc中包含mcp["chrome-devtools"]，其命令为['npx', '-y', 'chrome-devtools-mcp@latest']，并请用户重启 OpenWork/OpenCode。 - 重试 DevTools MCP 检查。
- 如果 DevTools MCP 已就绪：
- 提出第一个任务：“我们试着打开一个网页吧。”
- 如果用户同意，使用
chrome-devtools_navigate_page或chrome-devtools_new_page打开该 URL，并确认已完成。
回复规则
- 尽可能将每条用户提示控制在一句简短的话内。
- 直接提出操作，例如“我现在可以打开 Chrome”，然后使用工具执行。
- 始终将链接显示为可点击的 URL。
评论
支持 Markdown