claude工具扩展 mcp使用介绍 chrome-devtools-mcp使用介绍

一、mcp使用介绍

1、官方帮助：https://code.claude.com/docs/zh-CN/mcp

2、列出mcp：claude mcp list

3、查询mcp：claude mcp get <name>

4、增加http服务器：claude mcp add --transport http <name> <url>

5、增加sse服务器：claude mcp add --transport sse <name> <url>

6、增加stdio服务器：claude mcp add [options] <name> "--" <command> [args...]

7、增加stdio服务器：windows上面nxp命令需要使用cmd /c执行；

8、自身作为mcp：claude mcp serve

mcp配置：

1、安装范围：本地范围，-s local，存储在~/.claude.json，项目内使用，默认安装范围；

2、安装范围：项目范围，-s project，存储在$project/.mcp.json，项目内使用，提交到仓库；

3、安装范围：用户范围，-s user，存储在~/.claude.json，所有项目使用；

4、安装范围：同名服务的优先级，本地范围 > 项目范围 > 用户范围；

5、本地禁用：/mcp进行禁用，存储在~/.claude.json，项目内禁用；

6、MCP_TIMEOUT：服务启动超时时间设置；

7、MAX_MCP_OUTPUT_TOKENS：单次请求最大输出令牌；

二、chrome-devtools-mcp使用介绍

1、代码仓库：https://github.com/ChromeDevTools/chrome-devtools-mcp

2、使用帮助：https://www.npmjs.com/package/chrome-devtools-mcp

3、puppeteer仓库：https://github.com/puppeteer/puppeteer

4、puppeteer帮助：https://pptr.dev/category/introduction

5、功能介绍：操控chrome，支持自动化、深入测试、分析性能；

6、实现原理：使用puppeteer自动化，使用devtools分析性能；

7、实现原理：snapshot工具读取网页结构，生成a11y tree，标识网页每个元素，用于后续自动化操作；

8、安装mcp：claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

命令参数：

1、--autoConnect，自动连接已开启调试的浏览器；
2、--browserUrl，自动连接已开启调试的远程浏览器；

3、--wsEndpoint，自动连接已开启调试的远程浏览器；

4、--headless，无头模式，没有用户界面的模式；

5、--isolated，隔离模式，使用临时的用户数据目录，浏览器退出时自动清理；

6、--userDataDir，用户数据目录，默认位于%USERPROFILE%\.cache\chrome-devtools-mcp\chrome-profile

工具介绍：

1、navigate_page，跳转到一个网址；

2、close_page，关闭一个指定的页面；

3、list_pages，列出目前打开的页面；

4、wait_for(text, timeout)，等待页面出现指定的文字；

5、evaluate_script(function, args)，当前页面执行脚本；

6、get_network_request(reqid)，查询一个网络请求，返回内容：请求头、请求体、返回头、返回体；

7、list_network_requests(resourceTypes)，列出页面产生的所有网络请求，默认返回所有资源请求；

常用资源类型：

["document", "script",
 "xhr","fetch","other",
 "eventsource", "websocket"]

chrome通信协议：

1、CDP：Chrome DevTools Protocol，基于WebSocket的JSON-RPC协议；

2、CDP：puppeteer和devtools使用CDP与浏览器通信，puppeteer简化了使用CDP；

3、CDP：--remote-debugging-port传输层使用TCP，--remote-debugging-pipe传输层使用管道；

4、扩展API：Chrome Extension API，浏览器的内部组件，运行在浏览器内部，效率非常高；

5、扩展API：扩展程序使用Chrome Extension API与浏览器通信，其核心是chrome.runtime；

6、Electron：Node.js + Chromium，前者是主进程，后者是渲染进程，渲染进程实现UI渲染和交互；

7、Electron：主进程和渲染进程之间使用IPC机制通信；