Make your AI tools 10x more aware and capable of interacting with your browser
让您的 AI 工具的功能提升 10 倍，使其能够与浏览器进行交互

This application is a powerful browser monitoring and interaction tool that enables AI-powered applications via Anthropic's Model Context Protocol (MCP) to capture and analyze browser data through a Chrome extension.
此应用程序是一款强大的浏览器监控和交互工具，通过 Anthropic 的模型上下文协议（MCP），使 AI 驱动的应用程序能够通过 Chrome 扩展捕获和分析浏览器数据。

Read our docs for the full installation, quickstart and contribution guides.
请参阅我们的文档，获取完整的安装、快速入门和贡献指南。

Check out our project roadmap here: Github Roadmap / Project Board
查看我们的项目路线图：Github 路线图 / 项目板

v1.2.0 is out! Here's a quick breakdown of the update:
v1.2.0 已发布！以下是更新概览：

• You can now enable "Allow Auto-Paste into Cursor" within the DevTools panel. Screenshots will be automatically pasted into Cursor (just make sure to focus/click into the Agent input field in Cursor, otherwise it won't work!)
  现在可以在开发者工具面板中启用“允许自动粘贴到光标”功能。截图将会自动粘贴到 Cursor 中（请确保在 Cursor 中聚焦或点击到 Agent 输入字段，否则不会生效！）
• Integrated a suite of SEO, performance, accessibility, and best practice analysis tools via Lighthouse
  通过 Lighthouse 集成了 SEO、性能、无障碍性和最佳实践分析工具
• Implemented a NextJS specific prompt used to improve SEO for a NextJS application
  为 NextJS 应用实现了特定的提示，用于改进 SEO
• Added Debugger Mode as a tool which executes all debugging tools in a particular sequence, along with a prompt to improve reasoning
  添加了调试模式作为工具，该模式按特定顺序执行所有调试工具，并附带一个提示以改进推理能力
• Added Audit Mode as a tool to execute all auditing tools in a particular sequence
  添加了审计模式作为工具，用于按特定顺序执行所有审计工具
• Resolved Windows connectivity issues
  解决了 Windows 连接问题
• Improved networking between BrowserTools server, extension and MCP server with host/port auto-discovery, auto-reconnect, and graceful shutdown mechanisms
  改进了 BrowserTools 服务器、扩展程序与 MCP 服务器之间的网络通信，增加了主机/端口自动发现、自动重连和优雅关闭机制
• Added ability to more easily exit out of the Browser Tools server with Ctrl+C
  增加了使用 Ctrl+C 更容易退出 Browser Tools 服务器的功能

There are three components to run this MCP tool:
运行此 MCP 工具需要三个组件：

1. Install our chrome extension from here: v1.2.0 BrowserToolsMCP Chrome Extension
   从这里安装我们的 Chrome 扩展：v1.2.0 BrowserToolsMCP Chrome 扩展
2. Install the MCP server from this command within your IDE: npx @agentdeskai/browser-tools-mcp@latest
   在您的 IDE 中通过以下命令安装 MCP 服务器： npx @agentdeskai/browser-tools-mcp@latest
3. Open a new terminal and run this command: npx @agentdeskai/browser-tools-server@latest
   打开一个新的终端并运行此命令： npx @agentdeskai/browser-tools-server@latest

• Different IDEs have different configs but this command is generally a good starting point; please reference your IDEs docs for the proper config setup
  不同的 IDE 有不同的配置，但这个命令通常是一个很好的起点；请参考您 IDE 的文档以获取正确的配置设置

IMPORTANT TIP - there are two servers you need to install. There's...
重要提示 - 你需要安装两个服务器。一个是...

• browser-tools-server (local nodejs server that's a middleware for gathering logs) and
  browser-tools-server（本地的 Node.js 中间件服务器，用于收集日志），和
• browser-tools-mcp (MCP server that you install into your IDE that communicates w/ the extension + browser-tools-server)
  browser-tools-mcp（安装在您 IDE 中的 MCP 服务器，与扩展程序和 browser-tools-server 通信）

npx @agentdeskai/browser-tools-mcp@latest is what you put into your IDE npx @agentdeskai/browser-tools-server@latest is what you run in a new terminal window
npx @agentdeskai/browser-tools-mcp@latest 是您在 IDE 中输入的内容， npx @agentdeskai/browser-tools-server@latest 是您在新终端窗口中运行的内容

After those three steps, open up your chrome dev tools and then the BrowserToolsMCP panel.
完成这三个步骤后，打开您的 Chrome 开发者工具，然后选择 BrowserToolsMCP 面板。

If you're still having issues try these steps:
如果您仍然遇到问题，请尝试以下步骤：

• Quit / close down your browser. Not just the window but all of Chrome itself.
  关闭浏览器。不只是关闭窗口，而是关闭整个 Chrome 浏览器。
• Restart the local node server (browser-tools-server)
  重启本地 node 服务器（browser-tools-server）
• Make sure you only have ONE instance of chrome dev tools panel open
  确保只打开一个 Chrome 开发者工具面板

After that, it should work but if it doesn't let me know and I can share some more steps to gather logs/info about the issue!
之后应该可以正常工作，如果不行，请告诉我，我可以分享一些更多步骤来收集关于问题的日志/信息！

If you have any questions or issues, feel free to open an issue ticket! And if you have any ideas to make this better, feel free to reach out or open an issue ticket with an enhancement tag or reach out to me at @tedx_ai on x
如果有任何问题或需要帮助，请随时打开问题票！如果您有任何想法可以让这个工具更好，请随时联系我或在问题票中添加增强标签，或者在 x 平台上联系我 @tedx_ai

Coding agents like Cursor can run these audits against the current page seamlessly. By leveraging Puppeteer and the Lighthouse npm library, BrowserTools MCP can now:
像 Cursor 这样的编码代理可以无缝地对当前页面进行这些审计。通过利用 Puppeteer 和 Lighthouse npm 库，BrowserTools MCP 现在可以：

• Evaluate pages for WCAG compliance
  评估页面以符合 WCAG 标准
• Identify performance bottlenecks
  识别性能瓶颈
• Flag on-page SEO issues
  标记页面 SEO 问题
• Check adherence to web development best practices
  检查是否遵循了 Web 开发的最佳实践
• Review NextJS specific issues with SEO
  审查 NextJS 特定的 SEO 问题

...all without leaving your IDE 🎉
...无需离开 IDE 即可完成所有操作 🎉

Ensure you have:  请确保您已准备好：

• An active tab in your browser
  浏览器中的活动标签页
• The BrowserTools extension enabled
  The BrowserTools 扩展已启用

Headless Browser Automation:
无头浏览器自动化：
Puppeteer automates a headless Chrome instance to load the page and collect audit data, ensuring accurate results even for SPAs or content loaded via JavaScript.
Puppeteer 会自动化一个无头 Chrome 实例来加载页面并收集审计数据，确保即使对于单页应用（SPA）或通过 JavaScript 加载的内容也能获得准确的结果。

The headless browser instance remains active for 60 seconds after the last audit call to efficiently handle consecutive audit requests.
无头浏览器实例在最后一次审计调用后保持活动状态 60 秒，以高效处理连续的审计请求。

Structured Results:  结构化结果：
Each audit returns results in a structured JSON format, including overall scores and detailed issue lists. This makes it easy for MCP-compatible clients to interpret the findings and present actionable insights.
每次审计将以结构化的 JSON 格式返回结果，包括总体评分和详细的问题列表。这使得 MCP 兼容的客户端能够轻松解读这些发现并呈现可操作的见解。

The MCP server provides tools to run audits on the current page. Here are example queries you can use to trigger them:
MCP 服务器提供了在当前页面运行审计的工具。以下是一些示例查询，您可以使用它们来触发这些审计：

Ensures the page meets accessibility standards like WCAG.
确保页面符合 WCAG 等无障碍标准。

Example Queries:  示例查询：

• "Are there any accessibility issues on this page?"
  “此页面是否存在无障碍问题？”
• "Run an accessibility audit."
  执行无障碍审核。
• "Check if this page meets WCAG standards."
  检查此页面是否符合 WCAG 标准。

Identifies performance bottlenecks and loading issues.
识别性能瓶颈和加载问题。

Example Queries:  示例查询：

• "Why is this page loading so slowly?"
  “为什么这个页面加载得这么慢？”
• "Check the performance of this page."
  “检查这个页面的性能。”
• "Run a performance audit."
  “运行一次性能审计。”

Evaluates how well the page is optimized for search engines.
评估页面对搜索引擎的优化程度。

Example Queries:  示例查询：

• "How can I improve SEO for this page?"
  “如何改进此页面的 SEO？”
• "Run an SEO audit."
  执行 SEO 审计。
• "Check SEO on this page."
  检查此页面的 SEO。

Checks for general best practices in web development.
检查一般最佳实践。

Example Queries:  示例查询：

• "Run a best practices audit."
  运行最佳实践审核。
• "Check best practices on this page."
  请查看此页面上的最佳实践。
• "Are there any best practices issues on this page?"
  此页面上是否有最佳实践问题？

Runs all audits in a particular sequence. Will run a NextJS audit if the framework is detected.
按特定顺序运行所有审计。如果检测到 NextJS 框架，将运行 NextJS 审计。

Example Queries:  示例查询：

• "Run audit mode."  运行审计模式。
• "Enter audit mode."  进入审计模式。

Checks for best practices and SEO improvements for NextJS applications
检查 NextJS 应用的最佳实践和 SEO 改进。

Example Queries:  示例查询：

• "Run a NextJS audit."
  运行 NextJS 审计。
• "Run a NextJS audit, I'm using app router."
  运行 NextJS 审计，我使用了 app 路由。
• "Run a NextJS audit, I'm using page router."
  运行 NextJS 审计，我使用了 page 路由。

Runs all debugging tools in a particular sequence
按特定顺序运行所有调试工具

Example Queries:  示例查询：

• "Enter debugger mode."  "进入调试模式。"

There are three core components all used to capture and analyze browser data:
有三个核心组件用于捕获和分析浏览器数据：

1. Chrome Extension: A browser extension that captures screenshots, console logs, network activity and DOM elements.
   Chrome 扩展：一个浏览器扩展，用于捕获屏幕截图、控制台日志、网络活动和 DOM 元素。
2. Node Server: An intermediary server that facilitates communication between the Chrome extension and any instance of an MCP server.
   Node 服务器：一个中间服务器，用于在 Chrome 扩展和任何 MCP 兼容的 IDE 实例之间建立通信。
3. MCP Server: A Model Context Protocol server that provides standardized tools for AI clients to interact with the browser.
   MCP 服务器：一个模型上下文协议服务器，为 AI 客户端提供标准化工具以与浏览器进行交互。

┌─────────────┐     ┌──────────────┐     ┌───────────────┐     ┌─────────────┐
│  MCP Client │ ──► │  MCP Server  │ ──► │  Node Server  │ ──► │   Chrome    │
│  (e.g.      │ ◄── │  (Protocol   │ ◄── │ (Middleware)  │ ◄── │  Extension  │
│   Cursor)   │     │   Handler)   │     │               │     │             │
└─────────────┘     └──────────────┘     └───────────────┘     └─────────────┘

Model Context Protocol (MCP) is a capability supported by Anthropic AI models that allow you to create custom tools for any compatible client. MCP clients like Claude Desktop, Cursor, Cline or Zed can run an MCP server which "teaches" these clients about a new tool that they can use.
Model Context Protocol (MCP) 是 Anthropic AI 模型支持的一种能力，允许你为任何兼容的客户端创建自定义工具。像 Claude Desktop、Cursor、Cline 或 Zed 这样的 MCP 客户端可以运行一个 MCP 服务器，该服务器“教导”这些客户端使用新的工具。

These tools can call out to external APIs but in our case, all logs are stored locally on your machine and NEVER sent out to any third-party service or API. BrowserTools MCP runs a local instance of a NodeJS API server which communicates with the BrowserTools Chrome Extension.
这些工具可以调用外部 API，但在我们的情况下，所有日志都存储在您的机器上，并且绝不会发送到任何第三方服务或 API。BrowserTools MCP 在本地运行一个 NodeJS API 服务器，与 BrowserTools Chrome 扩展进行通信。

All consumers of the BrowserTools MCP Server interface with the same NodeJS API and Chrome extension.
所有使用 BrowserTools MCP Server 接口的消费者都通过相同的 NodeJS API 和 Chrome 扩展进行交互。

• Monitors XHR requests/responses and console logs
  监控 XHR 请求/响应和控制台日志
• Tracks selected DOM elements
  跟踪选定的 DOM 元素
• Sends all logs and current element to the BrowserTools Connector
  将所有日志和当前元素发送到 BrowserTools Connector
• Connects to Websocket server to capture/send screenshots
  通过 WebSocket 服务器捕获/发送截图
• Allows user to configure token/truncation limits + screenshot folder path
  允许用户配置令牌/截断限制+截图文件夹路径

• Acts as middleware between the Chrome extension and MCP server
  作为 Chrome 扩展程序与 MCP 服务器之间的中间件
• Receives logs and currently selected element from Chrome extension
  从 Chrome 扩展程序接收日志和当前选中的元素
• Processes requests from MCP server to capture logs, screenshot or current element
  处理来自 MCP 服务器的请求以捕获日志、屏幕截图或当前元素
• Sends Websocket command to the Chrome extension for capturing a screenshot
  向 Chrome 扩展程序发送 WebSocket 命令以捕获屏幕截图
• Intelligently truncates strings and # of duplicate objects in logs to avoid token limits
  智能截断字符串和日志中的重复对象数量，以避免超出标记限制
• Removes cookies and sensitive headers to avoid sending to LLMs in MCP clients
  移除 cookies 和敏感头部信息，以避免发送给 MCP 客户端中的 LLMs

• Implements the Model Context Protocol
  实现模型上下文协议
• Provides standardized tools for AI clients
  提供标准化的 AI 客户端工具
• Compatible with various MCP clients (Cursor, Cline, Zed, Claude Desktop, etc.)
  兼容各种 MCP 客户端（Cursor、Cline、Zed、Claude Desktop 等）

Installation steps can be found in our documentation:
安装步骤请参见我们的文档：

• BrowserTools MCP Docs  BrowserTools MCP 文档

Once installed and configured, the system allows any compatible MCP client to:
安装并配置完成后，系统允许任何兼容的 MCP 客户端进行以下操作：

• Monitor browser console output
  监控浏览器控制台输出
• Capture network traffic  捕获网络流量
• Take screenshots  截屏
• Analyze selected elements
  分析选定元素
• Wipe logs stored in our MCP server
  清除存储在我们 MCP 服务器上的日志
• Run accessibility, performance, SEO, and best practices audits
  运行可访问性、性能、SEO 和最佳实践审核

• Works with any MCP-compatible client
  适用于任何 MCP 兼容的客户端
• Primarily designed for Cursor IDE integration
  主要针对 Cursor IDE 集成设计
• Supports other AI editors and MCP clients
  支持其他 AI 编辑器和 MCP 兼容客户端