内容
# 工具列表
> **Chrome Devtools MCP 服务器,为 AI 助手优化** — 在保持完整功能的情况下,减少 69.5% 的上下文窗口令牌。与 Claude、ChatGPT、Gemini、Cursor 和所有 MCP 客户端兼容。
[](https://www.npmjs.com/package/chrome-devtools-slim)
[](https://github.com/mcpslim/mcpslim)
[](https://modelcontextprotocol.io)
## 什么是 chrome-devtools-slim?
**令牌优化** 版本的 Chrome Devtools [模型上下文协议(MCP)](https://modelcontextprotocol.io) 服务器。
### 问题
MCP 工具模式消耗了大量的 **上下文窗口令牌**。当像 Claude 或 ChatGPT 这样的 AI 助手加载 MCP 工具时,每个工具定义都会占用宝贵的上下文空间。
原始的 `chrome-devtools-mcp` 加载了 **26 个工具**,大约消耗 **~18,576 个令牌** — 这是您可以用于实际对话的空间。
### 解决方案
`chrome-devtools-slim` 智能地 **将 26 个工具分组为 8 个语义操作**,减少令牌使用量 **69.5%** — **零功能损失**。
您的 AI 助手看到的工具更少、更智能。所有原始功能仍然可用。
## 性能
| 指标 | 原始 | 精简 | 减少 |
| --- | --- | --- | --- |
| 工具 | 26 | 8 | **-69%** |
| 模式令牌 | 3,756 | 1,104 | **70.6%** |
| Claude 代码(估计) | ~18,576 | ~5,664 | **~69.5%** |
> **基准信息**
> - 原始:`chrome-devtools-mcp@0.12.1`
> - 模式令牌使用 [tiktoken](https://github.com/openai/tiktoken)(cl100k_base)测量
> - Claude 代码估计包括 ~570 个令牌/工具开销
## 快速开始
### 一键设置(推荐)
```bash
# Claude Desktop - 自动配置
npx chrome-devtools-slim --setup claude
# Cursor - 自动配置
npx chrome-devtools-slim --setup cursor
# 交互模式(选择您的客户端)
npx chrome-devtools-slim --setup
```
完成!重启您的应用程序以使用 chrome-devtools。
### CLI 工具(已有 CLI?)
```bash
# Claude Code(在项目根目录创建 .mcp.json)
claude mcp add chrome-devtools -s project -- npx -y chrome-devtools-slim@latest
# Windows:使用 cmd /c 包装器
claude mcp add chrome-devtools -s project -- cmd /c npx -y chrome-devtools-slim@latest
# VS Code(Copilot、Cline、Roo Code)
code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["-y","chrome-devtools-slim@latest"]}'
```
## 手动设置
<details>
<summary>点击展开手动配置选项</summary>
### Claude Desktop
添加到您的 `claude_desktop_config.json`:
| 操作系统 | 路径 |
| --- | --- |
| Windows | `%APPDATA%\Claude\claude_desktop_config.json` |
| macOS | `~/Library/Application Support/Claude/claude_desktop_config.json` |
```json
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-slim@latest"]
}
}
}
```
### Cursor
添加到 `.cursor/mcp.json`(全局)或 `<project>/.cursor/mcp.json`(项目):
```json
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-slim@latest"]
}
}
}
```
</details>
## 工作原理
MCPSlim 作为 AI 模型和原始 MCP 服务器之间的 **透明桥梁**:
```
┌─────────────────────────────────────────────────────────────────┐
│ 没有 MCPSlim │
│ │
│ [AI 模型] ──── 读取 26 个工具模式 ────→ [原始 MCP] │
│ (~18,576 个令牌加载到上下文中) │
├─────────────────────────────────────────────────────────────────┤
│ 使用 MCPSlim │
│ │
│ [AI 模型] ───→ [MCPSlim 桥] ───→ [原始 MCP] │
│ │ │ │ │
│ 看到 8 个分组 翻译为 执行实际 │
│ 工具仅 原始调用 工具并返回 │
│ (~5,664 个令牌) │
└─────────────────────────────────────────────────────────────────┘
```
### 翻译工作原理
1. **AI 读取精简模式** — 仅 8 个分组工具,而不是 26 个
2. **AI 调用分组工具** — 例如,`interaction({ action: "click", ... })`
3. **MCPSlim 翻译** — 转换为原始:`browser_click({ ... })`
4. **原始 MCP 执行** — 实际服务器处理请求
5. **返回响应** — 结果不变地传回
**零功能损失。69.5% 令牌节省。**
## 可用工具组
| 组 | 操作 |
| --- | --- |
| `get` | 2 |
| `list` | 3 |
| `performance` | 3 |
| `take` | 2 |
| `page` | 5 |
| `interaction` | 7 |
| `control` | 3 |
另外 **1 个直通工具** — 不能很好地分组的工具保持原样,并优化了描述。
## 兼容性
- ✅ **完整功能** — 所有原始 `chrome-devtools-mcp` 功能均保留
- ✅ **所有 AI 助手** — 与 Claude、ChatGPT、Gemini、Copilot 和任何 MCP 客户端兼容
- ✅ **直接替换** — 相同的功能,只是使用分组操作名称
- ✅ **已测试** — 通过自动化测试验证模式兼容性
## 常见问题
### 这会减少功能吗?
**否。** 每个原始工具都可访问。工具按语义分组(例如,`click`、`hover`、`drag` → `interaction`),但所有操作均可通过 `action` 参数使用。
### 为什么 AI 助手需要令牌优化?
AI 模型具有有限的上下文窗口。MCP 工具模式会消耗可以用于对话、代码或文档的令牌。减少工具模式大小意味着有更多空间用于实际工作。
### 这是官方支持的吗?
MCPSlim 是一个社区项目。它透明地包装官方 MCP 服务器 — 原始服务器执行所有实际工作。
## 许可证
MIT
---
<p align="center">
由 <a href="https://github.com/mcpslim/mcpslim"><b>MCPSlim</b></a> 提供支持 — MCP 令牌优化器
<br>
<sub>减少 AI 上下文使用量。保持完整功能。</sub>
</p>