Chrome DevTools MCP: أول أداة رسمية من Google تدي الـ AI Agent تحكم كامل في المتصفح (49 ألف نجمة)

Google فتحت مصدر Chrome DevTools MCP — MCP server رسمي من فريق Chrome DevTools بيدي أي AI coding agent (Claude Code، Cursor، Codex، Copilot، Gemini CLI) صلاحيات كاملة على متصفح Chrome. مش مجرد screenshot أو fetch لصفحة — ده وصول لكل قدرات DevTools: performance traces، network analysis، console messages، heap snapshots، وautomation عبر Puppeteer.

الريبو وصل 49.3 ألف نجمة على GitHub و3.4 ألف fork، ومرخّص Apache 2.0.

ازاي بيغيّر شكل شغلك مع الـ agent؟

قبله: كنت لازم تعمل screenshot يدوي، تنسخ console errors، تفتح DevTools بنفسك، وتشرح للـ agent اللي انت شايفه. بعده: بتقول للـ agent “افحص أداء الموقع ده” وهو بيفتح Chrome، بيسجّل trace كامل، بيحلّله، ويرجعلك بالنتائج والحلول.

40+ أداة مقسّمة على 10 فئات

• Input Automation (10 tools): click, drag, fill, fill_form, hover, press_key, type_text, upload_file
• Navigation (6 tools): navigate_page, new_page, list_pages, close_page, wait_for
• Performance (3 tools): record traces بـ real insights من DevTools + CrUX API
• Network (2 tools): list_network_requests + get_network_request بكل التفاصيل
• Debugging (8 tools): screenshots, console messages (مع stack traces)، evaluate_script، lighthouse_audit
• Memory (12 tools): heap snapshots كاملة — compare, dominators, retainers، duplicate strings
• Emulation: resize_page + emulate (mobile, throttling)
• Extensions: install, list, reload, uninstall Chrome extensions
• PWA: install/launch/uninstall Progressive Web Apps
• WebMCP: استخدام الـ tools اللي بيوفرها الموقع نفسه (Chrome 150+)

يشتغل مع 20+ عميل MCP

مش مرتبط بأداة واحدة. يشتغل مع كل ده:

• Claude Code (يدعم Plugin بـ Skills)، Cursor، Codex CLI، Copilot CLI
• Gemini CLI، Gemini Code Assist، Google Antigravity
• VS Code، Visual Studio، JetBrains AI Assistant، Junie
• Windsurf، OpenCode، Cline، Warp، Kiro، Qoder
• Amp، Bob (IBM)، Devin CLI، Factory CLI، Grok Build CLI، Mistral Vibe

التثبيت — 30 ثانية

لأي MCP client: ضيف الـ config ده في ملف الإعدادات:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Claude Code (بأمر واحد):

# MCP فقط
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

# Plugin كامل (MCP + Skills)
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Cursor فيه زرار Install مباشر. Codex codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest. Gemini CLI gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest.

أول prompt تجربه

Check the performance of https://developers.chrome.com

الـ agent هيفتح Chrome، يسجّل performance trace كامل، يحلّله، ويرجّعلك تقرير بأهم المشاكل والحلول.

حالات استخدام حقيقية

• تحسين أداء الموقع: “افحص أداء صفحة الشراء واقترح تحسينات” — الـ agent يعمل trace ويحلّل الـ Core Web Vitals
• تصحيح أخطاء JS: “روح على الصفحة دي وشوف console errors” — يفتحها، يقرا الـ errors مع الـ stack traces، ويقترح إصلاحات
• E2E testing: “املأ الفورم ده وتأكد إن الرسالة بتظهر” — بديل مجاني ومباشر لـ Playwright
• Network debugging: “شوف كل requests الـ API اللي بتحصل لما أضغط submit” — ويرجّع كل التفاصيل
• Memory leaks: “خد heap snapshot، اعمل action X، خد snapshot تاني، وقارن” — يكشف الـ memory leaks
• Lighthouse audits: امر واحد يعطيك تقرير SEO + Performance + Accessibility كامل

ميزة قوية: اتصال بمتصفح موجود

ممكن يشتغل مع Chrome اللي انت فاتحه بالفعل — يعني حسابك مسجّل، cookies موجودة، extensions شغّالة. مفيد جداً لاختبار مواقع بتتطلب login، أو لما محتاج تعمل automation على session معينة.

# شغّل Chrome مع debugging port
google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile

# اربط الـ MCP بيه
"args": ["chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222"]

ملاحظات مهمة

• Chrome بيشتغل بصلاحيات كاملة — الـ MCP client بيقدر يشوف ويعدّل أي حاجة. متكونش بتصفح مواقع فيها بيانات حساسة أثناء الاستخدام
• يدعم Chrome و Chrome for Testing فقط رسمياً
• Google بتجمع usage statistics افتراضياً — لو مش عايز، ضيف --no-usage-statistics
• Slim mode بـ --slim — 3 أدوات بس (navigate, evaluate, screenshot) لتقليل استهلاك الـ context

ليه ده مهم؟

ده أول مرة الـ AI agent بيقدر يتعامل مع المتصفح بنفس عمق ما مطور محترف بيتعامل بيه — مش مجرد “افتح الصفحة” أو “خد screenshot”. دي نقلة كاملة في debugging وweb testing وperformance optimization. إضافة كونه رسمي من Google (مش أداة community)، معناه صيانة مستمرة وتوثيق كامل.

لو انت بتشتغل web development أو automation، ده الـ MCP الأساسي اللي المفروض يبقى مركّب عندك.