القائمة
启动Chrome DevTools mcp服务器并加载到Claude Code
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/blueif16/ui-clone --skill start-mcpيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| 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 启动服务器查看详细日志。