Menu
启动Chrome DevTools mcp服务器并加载到Claude Code
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/blueif16/ui-clone --skill start-mcpLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Basé sur la classification professionnelle SOC
Affichage de SKILL.md
| name | start-mcp |
| description | 启动Chrome DevTools mcp服务器并加载到Claude Code |
| allowed-tools | Read, Bash |
当用户调用此skill时，自动执行以下操作：
npm run setup-mcp 自动设置环境变量和构建项目首先检查MCP服务器是否已经可用：
claude mcp list
如果chrome-devtools已经连接并可用，则直接结束，不执行任何操作。
如果chrome-devtools不可用或未安装，尝试直接添加MCP服务器：
claude mcp remove chrome-devtools 2>/dev/null || true
claude mcp add chrome-devtools node "$CHROME_DEVTOOLS_MCP_PATH/build/src/index.js"
然后验证是否成功：
claude mcp list
如果添加成功并且chrome-devtools已连接，则结束。
如果添加失败（例如build目录不存在），则运行完整的setup脚本：
npm run setup-mcp
如果自动设置失败，执行以下命令：
# 1. 构建项目
npm run build
# 2. 移除旧的MCP服务器（如果存在）
claude mcp remove chrome-devtools 2>/dev/null || true
# 3. 添加新的MCP服务器
claude mcp add chrome-devtools node "$CHROME_DEVTOOLS_MCP_PATH/build/src/index.js"
# 4. 验证
claude mcp list
使用MCP Inspector进行测试：
npx @modelcontextprotocol/inspector node build/src/index.js
加载后，你可以使用26个浏览器自动化工具，包括：
Q: 如何知道MCP服务器是否正常运行？ A: 在Claude Code中，MCP工具会自动出现在可用工具列表中。
Q: 修改代码后需要重启吗？ A: 是的，需要重新构建并重新添加MCP服务器。
Q: 如何查看MCP服务器日志？
A: 使用 npm run start-debug 启动服务器查看详细日志。