AgentMatter
EN/中文
提交项目GitHub
MCP 服务器 · 发布者仓库

Chrome DevTools MCP

让支持 MCP 的 Agent 连接 Chrome DevTools，执行页面调试、性能分析、网络检查和浏览器自动化。

49.4k StarsApache-2.0TypeScript今天更新
安装与使用 GitHub
01

项目介绍

Chrome DevTools MCP 是一项MCP 服务器，核心内容是让支持 MCP 的 Agent 连接 Chrome DevTools，执行页面调试、性能分析、网络检查和浏览器自动化。它把控制 Chrome 页面、分析页面性能放在同一个公开项目里，安装前可以先看清目录、命令和限制，再决定是否接入自己的 Agent 工作流。

02

核心功能

01

控制 Chrome 页面

仓库 README 或组件说明记录了控制 Chrome 页面的用途。实际启用前应继续查看原文，确认当前版本的行为和依赖。

02

分析页面性能

仓库 README 或组件说明记录了分析页面性能的用途。实际启用前应继续查看原文，确认当前版本的行为和依赖。

03

检查网络请求

仓库 README 或组件说明记录了检查网络请求的用途。实际启用前应继续查看原文，确认当前版本的行为和依赖。

04

读取控制台与页面状态

仓库 README 或组件说明记录了读取控制台与页面状态的用途。实际启用前应继续查看原文，确认当前版本的行为和依赖。

03

安装与连接

按照公开 GitHub 说明配置 Chrome DevTools MCP，首次接入时保持较小权限范围，再用低风险任务验证，确认正常后再投入日常使用。

AI AGENT INSTALL

让 AI Agent 帮你安装

把这段话发送给 Codex、Claude Code 或其他可以操作本地环境的 AI Agent。

请帮我安装并配置Chrome DevTools MCP。
项目地址：https://github.com/ChromeDevTools/chrome-devtools-mcp

请先阅读仓库 README 和许可证，确认当前宿主、依赖、目标目录与所需权限。严格采用仓库记录的方法，不要把凭据写进文件或日志；如果支持只读或最小权限模式，优先从该模式开始。完成后运行一个小型验证，并告诉我实际修改、执行命令、配置位置和验证结果。遇到覆盖文件或扩大权限的操作时先停下说明。
01开始前准备
  • Node.js LTS
  • 稳定版 Chrome
  • 宿主支持 MCP stdio 配置
02复制安装命令或配置
{"mcpServers":{"chrome-devtools":{"command":"npx","args":["-y","chrome-devtools-mcp@latest"]}}}
03按步骤完成安装
  1. 1
    确认依赖和使用范围

    先读 README，确认目标宿主，并准备这些条件：Node.js LTS；稳定版 Chrome；宿主支持 MCP stdio 配置。执行前检查目标目录和权限范围。

  2. 2
    按仓库方式完成配置

    执行仓库给出的命令： npx -y chrome-devtools-mcp@latest

  3. 3
    用小任务验证

    重启 MCP 宿主，确认服务器列表中出现 Chrome DevTools MCP。先调用一个低风险的只读工具，能够返回预期结果且没有认证错误，就说明连接正常。

如何确认安装成功

重启 MCP 宿主，确认服务器列表中出现 Chrome DevTools MCP。先调用一个低风险的只读工具，能够返回预期结果且没有认证错误，就说明连接正常。

使用前注意
  • Agent 能读取和操作浏览器内容，应避免连接敏感会话
  • 匿名使用统计默认开启，可用 --no-usage-statistics 关闭
04

使用场景

SCENARIO 01

诊断网页加载和交互问题

当仓库记录的依赖和权限模型与当前环境相符时，可以把它用于诊断网页加载和交互问题。

SCENARIO 02

让 Agent 做性能审计

当仓库记录的依赖和权限模型与当前环境相符时，可以把它用于让 Agent 做性能审计。

SCENARIO 03

检查控制台与网络错误

当仓库记录的依赖和权限模型与当前环境相符时，可以把它用于检查控制台与网络错误。

05

使用评价

这次评价依据仓库 README、组件说明、许可证和维护元数据。比较值得肯定的是把浏览器开发工具直接带进 Agent 工作流；配置只有一条 npx 命令，首次连接成本低。同时也要把限制说清楚，Agent 能读取和操作浏览器内容，应避免连接敏感会话；匿名使用统计默认开启，可用 --no-usage-statistics 关闭。本次收录没有把资料核验写成本机实测。

值得一试的地方

  • 把浏览器开发工具直接带进 Agent 工作流
  • 配置只有一条 npx 命令，首次连接成本低

使用前要知道

  • Agent 能读取和操作浏览器内容，应避免连接敏感会话
  • 匿名使用统计默认开启，可用 --no-usage-statistics 关闭
06

README

Chrome DevTools MCP

Overview

让支持 MCP 的 Agent 连接 Chrome DevTools，执行页面调试、性能分析、网络检查和浏览器自动化。 让支持 MCP 的 Agent 连接 Chrome DevTools，执行页面调试、性能分析、网络检查和浏览器自动化。

Getting started

  • 按照公开 GitHub 说明配置 Chrome DevTools MCP，首次接入时保持较小权限范围，再用低风险任务验证，确认正常后再投入日常使用。
  • 仓库把 Chrome DevTools MCP 定位为让支持 MCP 的 Agent 连接 Chrome DevTools，执行页面调试、性能分析、网络检查和浏览器自动化。重点不在做一份泛泛的合集，而是把控制 Chrome 页面、分析页面性能、检查网络请求、读取控制台与页面状态这些能力整理成可以继续使用或核验的内容。
  • 从公开 README 可以确认的要点包括基于 Chrome DevTools、使用 npx 启动、支持性能与网络分析、默认收集匿名使用统计。这些信息来自仓库说明和目录，本次收录没有把文档描述写成已经在本机完成的实测结果。
  • 重启 MCP 宿主，确认服务器列表中出现 Chrome DevTools MCP。先调用一个低风险的只读工具，能够返回预期结果且没有认证错误，就说明连接正常。

Configuration

{"mcpServers":{"chrome-devtools":{"command":"npx","args":["-y","chrome-devtools-mcp@latest"]}}}
在 GitHub 阅读完整 README →