Chrome DevTools MCP

Chrome 官方 DevTools MCP 服务器:让 AI Agent 操控、检查与调试真实浏览器。

MCP 服务器
MCPChrome DevToolsDebuggingBrowser Automation
已验证

安装

传输方式: stdio

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

工具列表 (61)

  • click

    Clicks on an element from the page snapshot.

  • drag

    Drags an element onto another element.

  • fill

    Types text into an input, text area, or selects an option.

  • fill_form

    Fills out multiple form elements at once.

  • handle_dialog

    Accepts or dismisses a browser dialog.

  • hover

    Hovers over an element.

  • press_key

    Presses a key or key combination.

  • type_text

    Types text using the keyboard into a focused input.

  • upload_file

    Uploads a file through a file input element.

  • click_at

    Clicks at given coordinates (requires --experimentalVision).

  • close_page

    Closes a page by its index.

  • list_pages

    Lists all open pages including extension service workers.

  • navigate_page

    Goes to a URL, or navigates back, forward, or reloads.

  • new_page

    Opens a new tab and loads a URL.

  • select_page

    Selects a page as context for future tool calls.

  • wait_for

    Waits for specified text to appear on the selected page.

  • emulate

    Emulates viewport, geolocation, color scheme, network conditions, and more.

  • resize_page

    Resizes the page window to specified dimensions.

  • performance_analyze_insight

    Gives detail on a specific performance insight from a trace.

  • performance_start_trace

    Starts recording a performance trace.

  • performance_stop_trace

    Stops the trace and returns performance insights.

  • get_network_request

    Gets details of a single network request.

  • list_network_requests

    Lists network requests made by the page.

  • evaluate_script

    Evaluates JavaScript in the page and returns the result.

  • get_console_message

    Gets a single console message by index.

  • get_css_styles

    Gets the computed CSS styles of an element.

  • lighthouse_audit

    Runs a Lighthouse audit on the page.

  • list_console_messages

    Lists console messages (errors, warnings, logs).

  • screencast_start

    Starts a screencast recording of the page.

  • screencast_stop

    Stops the screencast recording.

  • set_logpoints

    Sets logpoints (conditional console logging) in page scripts.

  • take_screenshot

    Captures a screenshot of the page or a specific element.

  • take_snapshot

    Gets the page accessibility tree with element UIDs.

  • take_heapsnapshot

    Takes a JS heap snapshot for memory analysis.

  • analyze_heapsnapshot_contexts

    Analyzes heap snapshot contexts.

  • close_heapsnapshot

    Closes a heap snapshot session.

  • compare_heapsnapshots

    Compares two heap snapshots to find growth.

  • get_heapsnapshot_class_nodes

    Gets class nodes from a heap snapshot.

  • get_heapsnapshot_details

    Gets details of a heap snapshot.

  • get_heapsnapshot_dominators

    Gets dominator nodes from a heap snapshot.

  • get_heapsnapshot_duplicate_strings

    Finds duplicate strings in a heap snapshot.

  • get_heapsnapshot_edges

    Gets edges of a heap snapshot node.

  • get_heapsnapshot_object_details

    Gets details of a heap object.

  • get_heapsnapshot_retainers

    Gets retainers of a heap object.

  • get_heapsnapshot_retaining_paths

    Gets retaining paths of a heap object.

  • get_heapsnapshot_summary

    Gets a summary of a heap snapshot.

  • query_heapsnapshot_objects

    Queries objects in a heap snapshot.

  • install_extension

    Installs a Chrome extension.

  • list_extensions

    Lists installed Chrome extensions.

  • reload_extension

    Reloads a Chrome extension.

  • trigger_extension_action

    Triggers an extension action (e.g. toolbar click).

  • uninstall_extension

    Uninstalls a Chrome extension.

  • execute_3p_developer_tool

    Executes a third-party developer tool.

  • list_3p_developer_tools

    Lists available third-party developer tools.

  • execute_webmcp_tool

    Executes a WebMCP tool exposed by the page.

  • list_webmcp_tools

    Lists WebMCP tools exposed by the page.

  • get_os_app_state

    Gets the install state of a PWA on the OS.

  • install_pwa

    Installs a Progressive Web App.

  • launch_pwa

    Launches an installed PWA.

  • uninstall_pwa

    Uninstalls a PWA.

  • configure_webauthn

    Configures a virtual WebAuthn authenticator.

质量与安全评分

开源协议100
维护状态95
安全性75
文档质量95
开源协议: Apache-2.0
版本: 1.12.0
最近更新: 2026-11-09

价格

Free and open source (Apache 2.0). No account or API key needed.

Chrome DevTools MCP
Chrome DevTools MCP
Chrome DevTools MCP
Chrome DevTools MCP

Chrome DevTools MCP 评测:让 AI Agent 亲自开一个真实浏览器

网页调试一直是人盯着浏览器在做。Agent 写代码,你打开 DevTools,你读控制台,你看网络面板,再回头告诉它你看到了什么。Agent 对网页真相所在的地方是看不见的。

Chrome DevTools MCP 是 Chrome DevTools 团队的官方服务器,它把一个真实 Chrome 浏览器的钥匙交给了 Agent。1.12.0 版提供 61 个工具,覆盖控制台、网络、性能、元素和导航,Agent 可以打开页面、点一点、读控制台报错、追踪网络请求、测量性能。这是 Agent 检查线上网页的标准做法。

什么是 Chrome DevTools MCP?

Chrome DevTools MCP 是由 Chrome DevTools 团队维护的 Model Context Protocol 服务器。它在本地运行并连接 Chrome,把开发者在 DevTools 面板里用的能力变成 Agent 可以调用的工具。服务器以一个包的形式分发,一条命令就能跑起来,支持 Claude Code、Cursor、VS Code 和 Claude Desktop 的标准配置。

工具分工明确。导航工具打开页面、移动历史记录。控制台工具读取日志和报错。网络工具检查请求、响应、请求头和耗时。性能工具记录追踪并测量加载。元素工具检查和操作 DOM。Agent 还能截图、模拟设备、按浏览器实际渲染的样子读取页面。

核心功能

1. 像开发者一样读控制台

Agent 直接从浏览器读取控制台消息、警告和报错。页面出问题时,它看到的是确切的报错、堆栈和行号,而不是让你从 DevTools 里复制出来。

2. 完整的网络检查

每个请求都看得见:URL、方法、请求头、状态、耗时和正文。Agent 能找到失败的 API 调用、慢的资源或缺失的请求头,不用你打开网络面板。

3. Agent 自己能测量的性能追踪

性能工具记录追踪并报告加载时间、长任务和布局偏移。Agent 可以测量修复效果,而不是猜页面是不是变快了。

4. 不只是读,还能操作页面

点击、输入、滚动、导航。Agent 可以自己执行步骤来复现 bug,修复后再走一遍同样的流程验证。

5. 截图与真实渲染的 DOM

截图和 DOM 快照展示浏览器实际渲染的页面,包括布局和样式。Agent 可以直观地检查自己的前端工作,而不是假设代码是对的。

工作原理

一条命令把服务器加到客户端,然后用远程调试开启 Chrome,或者让服务器自己启动它。Agent 连上后 61 个工具就出现了。让它打开你的页面,走一遍出问题的流程,报告发现。提出修复后,它可以重新加载页面并确认报错消失了。

因为服务器在本地运行、连接的是你自己的 Chrome,不涉及账号、密钥或托管服务。你的浏览记录留在你自己的机器上。

适合谁用?

和 AI 助手一起调试前端的开发者、想让 Agent 验证自己网页工作的团队,以及今天还在手动测试网页的人。如果你曾经把控制台报错粘贴到聊天里,这就是让你不用再这么做的工具。

价格

免费开源(Apache 2.0)。不需要账号或 API 密钥。

优点与缺点

优点

  • 官方服务器:61 个工具覆盖整个浏览器
  • Agent 看到的是真实的控制台、网络和性能数据,不是摘要
  • 免费、开源、本地:没有账号、密钥或托管服务
  • 可以操作页面并通过重跑流程验证修复

缺点

  • 仅限本地:驱动的是你机器上的浏览器,不是远程或托管浏览器
  • Agent 可以点击和输入,会改变访问页面的状态,只在信任的页面上用
  • 61 个工具很多,Agent 需要好的提示才能选对工具

上手提示

先让 Agent 打开你正在开发的页面,走一遍出问题的流程。让它自己读控制台报错、看网络请求,再提出修复。修复后让它重新加载页面验证,确认报错消失。养成这个习惯后,你就不用再手动复制控制台报错了。性能问题也一样,让 Agent 自己录追踪、报数据,比凭感觉调要靠谱得多。

最终评价

如果 AI Agent 写你的前端,它就应该能像开发者一样看到这个前端。这是官方、免费、本地的做法。装上它,指给它你正在做的页面,别再当那个把控制台报错复制到聊天里的人了。

在 GitHub 上试用 Chrome DevTools MCP