MCP 工具

Chrome DevTools MCP

让 AI Agent 检查 DOM、CSS、控制台错误、网络请求、截图和前端性能,用于调试工作流。

返回目录

MCP 工具

Chrome DevTools MCP

需要让编程 Agent 在调试 UI 时看到真实浏览器状态的前端团队。

Chrome Devtools McpAI Agents工作流自动化MCPMCP 服务器Tool UseBrowser AutomationData Extraction
适合场景

需要让编程 Agent 在调试 UI 时看到真实浏览器状态的前端团队。

页面类型

MCP 工具

属性

MCP 工具 / 工具调用 / 集成

如何使用

把这个工作流作为起点,再根据自己的流程调整工具、提示词和复核步骤。

概览

Chrome DevTools MCP 面向需要把 Agent 安全接入外部工具的团队。它关注的是让 AI Agent 检查 DOM、CSS、控制台错误、网络请求、截图和前端性能,用于调试工作流,页面目标不是罗列工具,而是把 Chrome DevTools MCP 变成可执行、可复查、可更新的工作流。

适合使用它的场景:需要让编程 Agent 在调试 UI 时看到真实浏览器状态的前端团队。稳定做法是先准备服务配置、工具权限、示例提示词和调用日志,产出经过测试的 MCP 连接、受限工具和可复查日志,并在扩大自动化范围前暴露权限过大,或工具可以绕过审核修改数据。

为了避免低质程序化内容,这一页需要围绕“MCP 工具”给出具体步骤、证据、边界和人工审核点,让读者能直接判断是否适合自己的项目。

使用场景

  • 用 Chrome DevTools MCP 在团队定型工具栈前刷新MCP 工具相关方案。
  • 把 Chrome DevTools MCP 做成内部检查清单,写清输入、权限、责任人、交付物和成功指标。
  • 当客户、同事或 Agent 需要复现同一流程时,把它作为交接文档使用。
  • 对比相邻工具或教程时,不只看功能宣传,而是比较工具调用成功率、权限事件和审核耗时。
  • 当模型、API、页面结构或业务流程变化后,重新刷新这一页,避免内容变成过期模板。

实施步骤

  1. 确认目标 URL. 记录实时 URL、登录状态、选择器、网络响应和可见结果。保存工具调用记录,因为页面结构可能随时变。
  2. 启动浏览器会话. 先在一个代表性页面上跑动作,标出稳定选择器、动态元素,以及需要人工查看的触发条件。
  3. 检查页面结构. 把 DOM 观察和截图对照。如果两者不一致,保留截图,并等页面状态解释清楚后再进提取并核对。
  4. 提取并核对. 提前规范名称、日期和标识符,避免重复记录或过期信息污染最终页面。
  5. 保存证据. 只有当证据整理到足够判断时,再让人工看 diff、样例输出或 trace。
  6. 人工审核. 用一个小样例验证:期望答案、实际输出、审核结论,以及权限过大,或工具可以绕过审核修改数据出现后的第一步修复办法。

配置步骤

  1. 先给 Chrome DevTools MCP 画数据边界:哪些调用日志可以进入流程,哪些必须排除,最终结果存放在哪里。
  2. 为 MCP 工具 任务建立最小权限集,并写清哪个服务账号、MCP 服务或 Agent 可以执行哪类动作。
  3. 生成前先定义输出契约:必填字段、拒收格式、审核备注,以及经过测试的 MCP 连接、受限工具和可复查日志交接到哪里。
  4. 建立失败记录,保存工具调用记录、触发条件,以及出现工具可以绕过审核修改数据时做出的处理决定。
  5. 真实运行后复盘审核耗时,只修改导致问题的提示词、路由、工具范围或来源清单。

快速判断

主要读者需要把 Agent 安全接入外部工具的团队
输入材料服务配置、工具权限、示例提示词和调用日志
交付结果经过测试的 MCP 连接、受限工具和可复查日志
需要保留的证据工具调用记录、返回结果、权限范围和失败信息
主要风险权限过大,或工具可以绕过审核修改数据
衡量指标工具调用成功率、权限事件和审核耗时

常见问题

Chrome DevTools MCP 和普通 AI 工具清单有什么不同?

Chrome DevTools MCP 围绕服务配置、工具权限、示例提示词和调用日志、经过测试的 MCP 连接、受限工具和可复查日志和工具调用记录、返回结果、权限范围和失败信息组织,读者能复现流程,而不是只看到功能摘要。

什么时候适合使用 Chrome DevTools MCP?

当场景是“需要让编程 Agent 在调试 UI 时看到真实浏览器状态的前端团队”时最适合。前提是任务边界清楚,并且团队需要一种可重复运行、审核和改进的方法。

Chrome DevTools MCP 上线前要检查什么?

检查权限范围、样例任务或测试、日志、失败兜底,以及权限过大,或工具可以绕过审核修改数据是否被人工确认步骤拦住。

Chrome DevTools MCP 应该怎么衡量效果?

持续记录工具调用成功率、权限事件和审核耗时,用多次运行的数据判断价值,不要只根据一次成功演示做结论。

相关资源

123 results 0 saved 7 categories 123 resources Updated index

Workflow Directory

Browse curated agents, MCP servers, templates, and workflow examples for real AI automation projects.

AI agent stack research

Find the right AI agents, MCP servers, and workflow templates

Agent Stack Library is a practical directory for people who are building real AI automation systems, not just collecting tool names. The site brings together AI agent frameworks, MCP servers, workflow templates, coding agents, browser automation tools, research workflows, and SaaS operations playbooks so you can compare an entire agent stack before committing to a toolchain.

A useful AI agent stack usually needs more than one model or one chat interface. Teams need a clear workflow, safe tool permissions, repeatable prompts, review checkpoints, and a way to measure whether the output is good enough for production. That is why the directory focuses on use cases such as AI coding agents, MCP server selection, SEO content workflows, browser QA, research assistants, internal tools, and multi-agent orchestration.

If you are evaluating MCP servers for AI agents, start with the task. A coding agent often needs GitHub access, a narrow filesystem scope, a test runner, and browser or DevTools verification. A research agent may need web search, document parsing, citation capture, memory, and a review step. A business operations agent may need CRM, email, calendar, spreadsheet, and audit logs. The best stack is the smallest one that completes the job safely.

AI agent workflow templates

Workflow templates help turn one-off prompts into repeatable systems. Each template should define the trigger, input context, agent role, connected tools, output format, human review step, and success metric. Browse the AI Agent Workflow Templates guide for SEO, coding, research, browser automation, and SaaS operations examples.

MCP servers for AI agents

MCP servers connect agents to browsers, repositories, files, databases, memory, and business apps. Good MCP choices reduce custom integration work, but they also require clear permission boundaries. The Best MCP Servers for AI Agents guide explains how to pick a safe and useful tool stack.

AI coding agent workflow

Coding agents work best when they follow a normal engineering path: issue intake, repo context, plan, patch, tests, UI verification, pull request, and human review. The AI Coding Agent Workflow page gives a practical checklist for scoped code changes.

How to choose an agent stack

Start by deciding what the agent is allowed to do. Read-only workflows are easier to launch because the agent can gather context, summarize findings, and draft recommendations without touching production systems. Write-capable workflows need stricter guardrails: scoped credentials, test environments, logging, rollback procedures, and a human approval point before external actions.

Next, compare tools by workflow fit rather than popularity. An open-source agent framework may be perfect for a developer team that wants full control, while a managed automation platform may be better for operations teams that need quick integrations. A browser automation stack is useful for UI checks and web research, but it should not replace structured APIs when reliable APIs exist.

Finally, measure quality. Track task completion rate, review time, correction rate, cost per run, latency, and whether the output can be reused without heavy manual cleanup. A strong AI agent workflow is not the one with the most tools; it is the one that produces reliable output, exposes failures clearly, and lets humans stay in control where the risk is high.

What each directory category is for

The Agents category covers frameworks, SDKs, and agent products that help teams plan, call tools, manage memory, hand off work, or coordinate multiple specialist agents. Use this category when you are comparing LangGraph-style orchestration, coding agents, research agents, customer support agents, or open-source agent frameworks for a production project.

The MCP Tools category is focused on servers and integrations that let an AI agent interact with the outside world. These pages are useful when you need repository context, browser inspection, file access, databases, calendars, CRMs, or other business systems. Each MCP server should be judged by permission scope, reliability, setup effort, documentation quality, and how clearly failed tool calls are reported.

The Workflows and Templates categories are for readers who already know the job they want to automate. Instead of starting with a tool, start with a repeatable process: SEO content briefing, GitHub issue triage, browser QA, competitive research, sales lead enrichment, or support ticket summarization. From there, pick the smallest agent stack that can collect the right context, run the task, produce a reviewable output, and leave a log for future improvement.