Claude Code 四大官方插件实战：Chrome DevTools + Playwright + TypeScript LSP + Context7

这是什么？#

通过 MCP（Model Context Protocol）协议，让 Claude Code 直接连接 Chrome DevTools，具备浏览器调试能力。

Claude 可以：

• 打开网页并检查 DOM 结构
• 在浏览器 Console 中执行 JavaScript
• 检查 Network 请求
• 截图查看页面渲染效果
• 调试 CSS 布局问题

安装#

在 Claude Code 的 .mcp.json 中添加：

1
{
2
  "mcpServers": {
3
    "chrome-devtools-mcp": {
4
      "command": "npx",
5
      "args": ["-y", "@anthropic-ai/chrome-devtools-mcp"]
6
    }
7
  }
8
}

然后在 Chrome 中开启 DevTools 远程调试：

1
# macOS
2
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
3
  --remote-debugging-port=9222
4

5
# Windows
6
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

实战场景#

场景 1：调试 CSS 布局问题

1
帮我看看这个页面的布局为什么错了
2
URL: http://localhost:3000

Claude 会连接到 Chrome DevTools，检查 DOM 结构和 CSS 计算样式，定位问题并给出修复方案。

场景 2：检查网络请求

1
帮我看看这个页面的 API 请求有没有问题

Claude 检查 Network 面板中的请求状态、响应头和响应体。

场景 3：Console 调试

1
在这个页面执行 document.querySelectorAll('.btn') 看看有多少按钮

Claude 直接在浏览器 Console 中执行 JS 并返回结果。

这是什么？#

通过 Playwright MCP 服务器，让 Claude Code 具备浏览器自动化能力。

和 chrome-devtools-mcp 的区别：

• chrome-devtools-mcp：连接已运行的 Chrome，适合调试
• playwright：启动独立的浏览器实例，适合自动化测试

安装#

1
# 安装 Playwright
2
npm install -D playwright
3

4
# 安装浏览器
5
npx playwright install chromium

在 .mcp.json 中配置：

1
{
2
  "mcpServers": {
3
    "playwright": {
4
      "command": "npx",
5
      "args": ["@anthropic-ai/playwright-mcp"]
6
    }
7
  }
8
}

实战场景#

场景 1：自动化 UI 测试

1
帮我写一个 Playwright 测试，验证登录流程：
2
1. 打开 http://localhost:3000/login
3
2. 输入用户名 test@example.com 和密码 123456
4
3. 点击登录按钮
5
4. 验证跳转到 /dashboard

Claude 生成完整的 Playwright 测试代码。

场景 2：截图对比

1
帮我截取首页在移动端和桌面端的效果

场景 3：表单填写自动化

1
帮我把这个表单填满并提交，看看有什么错误

这是什么？#

为 Claude Code 添加 TypeScript Language Server Protocol 支持，让 AI 具备：

• Go to Definition：跳转到定义
• Find References：查找引用
• Error Checking：实时错误检查
• Hover Info：悬停类型信息
• Auto Complete：自动补全建议

安装#

1
# 全局安装 TypeScript 语言服务器
2
npm install -g typescript-language-server typescript

支持的文件类型：.ts, .tsx, .js, .jsx, .mts, .cts, .mjs, .cjs

在 .mcp.json 中配置：

1
{
2
  "mcpServers": {
3
    "typescript-lsp": {
4
      "command": "typescript-language-server",
5
      "args": ["--stdio"]
6
    }
7
  }
8
}

实战场景#

场景 1：查找函数引用

1
帮我找出项目中所有调用了 useAuth 函数的地方

Claude 通过 LSP 的 textDocument/references 精确定位。

场景 2：类型错误诊断

1
这个文件有类型错误，帮我修复

Claude 通过 LSP 的 textDocument/publishDiagnostics 获取编译器级别的错误信息。

场景 3：跳转到定义

1
这个 `calculateTotal` 函数是在哪里定义的？

为什么需要 LSP？#

没有 LSP 时，Claude 只能基于文本分析来理解代码。有了 LSP 后，Claude 获得了编译器级别的理解能力：精确的类型推断、跨文件引用追踪、实时的编译错误。

这是什么？#

Context7 是一个文档检索 MCP 服务器，让 Claude Code 能够实时查询最新的技术文档。

解决的问题：

• Claude 的训练数据有截止日期，不知道最新的 API 变化
• 第三方库文档经常更新，AI 不知道最新版本
• 手动查文档打断工作流

安装#

在 .mcp.json 中配置：

1
{
2
  "mcpServers": {
3
    "context7": {
4
      "command": "npx",
5
      "args": ["-y", "@anthropic-ai/context7-mcp"]
6
    }
7
  }
8
}

实战场景#

场景 1：查询最新 API 文档

1
Express 5.0 的最新路由语法是什么？

Claude 不再靠”记忆”回答，而是实时查询最新文档。

场景 2：库的使用方式

1
Zustand 的 create 函数最新版本有什么变化？

场景 3：框架升级指南

1
React 19 和 React 18 的主要区别是什么？

验证安装#

在 Claude Code 中输入：

1
/list mcp

应该看到 4 个 MCP 服务器都处于连接状态。

前端开发完整流程#

1
1. context7 → 查最新 React 19 API
2
2. typescript-lsp → 写代码时获得类型提示和错误检查
3
3. chrome-devtools-mcp → 调试页面布局和样式
4
4. playwright → 写完代码后自动测试

Q: 这些插件会拖慢 Claude Code 吗？#

不会。MCP 服务器是按需调用的，不使用时不占资源。TypeScript LSP 会常驻内存（约 50-100MB），但对现代机器来说可以忽略。

Q: 可以同时用 chrome-devtools-mcp 和 playwright 吗？#

可以。chrome-devtools-mcp 连接已运行的 Chrome 用于调试，playwright 启动独立的 Chromium 实例用于测试。

Q: TypeScript LSP 和 Prettier/ESLint 冲突吗？#

不冲突。LSP 提供代码智能（类型、引用、定义），Prettier/ESLint 负责代码格式化，各司其职。