Chrome DevTools MCP - أداة التحكم في المتصفح لمساعدي برمجة الذكاء الاصطناعي

نظرة عامة على المشروع

Chrome DevTools MCP هو خادم رسمي لبروتوكول سياق النموذج (MCP) يسمح لمساعدي برمجة الذكاء الاصطناعي (مثل Gemini و Claude و Cursor أو Copilot) بالتحكم في متصفح Chrome الذي يعمل في الوقت الفعلي وفحصه. توفر هذه الأداة لمساعدي برمجة الذكاء الاصطناعي الوظائف الكاملة لأدوات مطوري Chrome (Chrome DevTools) من أجل الأتمتة الموثوقة والتصحيح العميق وتحليل الأداء.

عنوان GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp

الميزات الأساسية

1. رؤى الأداء

• تسجيل تتبع الأداء باستخدام Chrome DevTools
• استخراج توصيات قابلة للتنفيذ لتحسين الأداء
• مساعدة مساعدي الذكاء الاصطناعي في تحديد اختناقات الأداء

2. تصحيح أخطاء المتصفح المتقدم

• تحليل طلبات الشبكة
• التقاط لقطات شاشة
• فحص مخرجات وحدة تحكم المتصفح
• اكتشاف مشكلات CORS وأخطاء وحدة التحكم

3. الأتمتة الموثوقة

• أتمتة المتصفح بناءً على Puppeteer
• الانتظار التلقائي لنتائج العمليات
• دعم تعبئة النماذج، التنقل بين الصفحات، التفاعل مع العناصر

فئات الوظائف الرئيسية

يوفر خادم Chrome DevTools MCP 26 أداة، مقسمة إلى الفئات التالية:

أتمتة الإدخال (7 أدوات)

• النقر، تعبئة النماذج، إدخال النص
• التمرير، عمليات لوحة المفاتيح، وغيرها من وظائف التفاعل

أتمتة التنقل (7 أدوات)

• التنقل بين الصفحات، التقدم والعودة
• التحديث، انتظار اكتمال التحميل

وظائف المحاكاة (3 أدوات)

• محاكاة الجهاز
• محاكاة الموقع الجغرافي
• محاكاة ظروف الشبكة

تحليل الأداء (3 أدوات)

• تسجيل تتبع الأداء
• تحليل مقاييس الأداء
• توليد توصيات التحسين

مراقبة الشبكة (أداتان)

• قائمة طلبات الشبكة
• عرض تفاصيل الطلب

أدوات التصحيح (4 أدوات)

• عرض رسائل وحدة التحكم
• تنفيذ JavaScript
• وظيفة التقاط الشاشة
• فحص DOM

متطلبات النظام

• Node.js: الإصدار 20 أو أحدث من LTS
• Chrome: الإصدار المستقر الحالي أو أحدث
• npm: مدير الحزم

التثبيت والتكوين

التكوين العام

أضف ما يلي إلى ملف تكوين عميل MCP الخاص بك:

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

مساعدو برمجة الذكاء الاصطناعي المدعومون

Claude Code

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Cursor

عبر واجهة إعدادات Cursor: Settings -> MCP -> New MCP Server، استخدم التكوين أعلاه

Gemini CLI

# على مستوى المشروع
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

# تثبيت عام
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

VS Code Copilot

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

Cline

اتبع دليل تكوين MCP الخاص بـ Cline لاستخدام التكوين القياسي

خيارات التكوين

يدعم Chrome DevTools MCP معلمات التكوين التالية:

المعلمة	النوع	القيمة الافتراضية	الوصف
--headless	منطقي	false	هل يتم التشغيل في الوضع "بدون رأس" (بدون واجهة مستخدم)
--isolated	منطقي	false	إنشاء دليل بيانات مستخدم مؤقت، يتم تنظيفه تلقائيًا بعد الإغلاق
--channel	سلسلة	stable	قناة إصدار Chrome (stable/canary/beta/dev)
--viewport	سلسلة	-	حجم منفذ العرض الأولي، مثل 1280x720
--executablePath / -e	سلسلة	-	مسار ملف Chrome التنفيذي المخصص
--browserUrl / -u	سلسلة	-	الاتصال بمثيل Chrome قيد التشغيل
--proxyServer	سلسلة	-	تكوين خادم الوكيل
--acceptInsecureCerts	منطقي	false	تجاهل أخطاء الشهادات ذاتية التوقيع والمنتهية الصلاحية (استخدم بحذر)
--logFile	سلسلة	-	مسار ملف سجل التصحيح

مثال التكوين

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

أمثلة الاستخدام

اختبار أساسي

بعد التثبيت، أدخل المطالبة التالية في مساعد الذكاء الاصطناعي الخاص بك للاختبار:

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

سيقوم مساعد الذكاء الاصطناعي تلقائيًا بما يلي:

1. فتح متصفح Chrome
2. الانتقال إلى الموقع المحدد
3. تسجيل تتبع الأداء
4. تحليل وتقديم توصيات لتحسين الأداء

سيناريوهات الاستخدام الشائعة

1. تحليل الأداء

تحليل أداء تحميل example.com وتقديم توصيات للتحسين

2. تصحيح أخطاء الشبكة

التحقق مما إذا كان my-website.com يحتوي على أخطاء CORS

3. الاختبار الآلي

الانتقال إلى demo.realworld.io، تعبئة نموذج تسجيل الدخول والتقاط لقطة شاشة

4. تعبئة النماذج

في صفحة تسجيل الدخول، املأ البريد الإلكتروني test@example.com وكلمة المرور testpass123

5. فحص وحدة التحكم

عرض رسائل خطأ وحدة التحكم للصفحة الحالية

كيف يعمل

يعمل Chrome DevTools MCP بناءً على معيار بروتوكول سياق النموذج (MCP):

1. بروتوكول MCP: معيار مفتوح المصدر لربط نماذج اللغة الكبيرة بالأدوات ومصادر البيانات الخارجية
2. كشف الأدوات: كشف وظائف Chrome DevTools كأدوات عبر بروتوكول MCP
3. استدعاء الذكاء الاصطناعي: يستدعي مساعد الذكاء الاصطناعي الأدوات المناسبة بناءً على متطلبات المستخدم
4. التنفيذ الآلي: استخدام Puppeteer لتنفيذ العمليات في Chrome
5. إرجاع النتائج: إعادة نتائج التنفيذ إلى مساعد الذكاء الاصطناعي

سير العمل النموذجي

عندما تطلب من مساعد الذكاء الاصطناعي "فحص أداء الموقع":

المستخدم: فحص أداء موقعي
  ↓
مساعد الذكاء الاصطناعي: يستخدم أداة performance_start_trace
  ↓
خادم MCP: يشغل Chrome، يفتح الموقع، يسجل تتبع الأداء
  ↓
مساعد الذكاء الاصطناعي: يحلل بيانات الأداء
  ↓
المستخدم: يتلقى تقرير تحليل الأداء وتوصيات التحسين

دليل البيانات

يستخدم Chrome DevTools MCP أدلة بيانات المستخدم التالية:

• Linux / MacOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

لا يتم مسح دليل البيانات بين عمليات التشغيل، إلا إذا تم استخدام خيار --isolated.

اعتبارات الأمان

⚠️ ملاحظة هامة:

يكشف Chrome DevTools MCP محتوى مثيل المتصفح لعملاء MCP، مما يسمح لهم بفحص وتصحيح وتعديل أي بيانات داخل المتصفح أو DevTools.

يرجى تجنب مشاركة المعلومات الحساسة أو الشخصية التي لا ترغب في مشاركتها مع عملاء MCP.

استكشاف الأخطاء وإصلاحها

إذا واجهت مشكلات، يرجى مراجعة دليل استكشاف الأخطاء وإصلاحها الرسمي.

المشكلات الشائعة

1. المتصفح لا يبدأ تلقائيًا: يبدأ خادم MCP المتصفح فقط عندما يستخدم العميل أداة تتطلب المتصفح
2. مشكلات أذونات Sandbox: إذا قام عميل MCP بتمكين Sandbox، فقد تحتاج إلى تعطيله أو استخدام --connect-url للاتصال بمثيل Chrome الذي تم تشغيله يدويًا
3. مهلة البدء: قد تحتاج إلى زيادة تكوين startup_timeout_ms على نظام Windows

المكدس التقني

• الأساس: Node.js
• أتمتة المتصفح: Puppeteer
• البروتوكول: Chrome DevTools Protocol (CDP)
• المعيار: Model Context Protocol (MCP)

ميزات المشروع

1. دعم رسمي: تم تطويره وصيانته رسميًا بواسطة فريق Chrome DevTools
2. توافق واسع: يدعم العديد من مساعدي برمجة الذكاء الاصطناعي الرئيسيين
3. وظائف شاملة: يوفر 26 أداة تغطي الأتمتة والتصحيح وتحليل الأداء
4. سهولة التكامل: لا يتطلب تثبيتًا محليًا باستخدام npx، وتكوينه بسيط
5. تطوير نشط: تحديثات وتحسينات مستمرة للوظائف

سيناريوهات التطبيق

• تصحيح أخطاء تطوير الويب: يساعد مساعد الذكاء الاصطناعي في تحديد الأخطاء وإصلاحها
• تحسين الأداء: تحليل الأداء الآلي وتوصيات التحسين
• الاختبار الآلي: كتابة وتنفيذ اختبارات أتمتة المتصفح
• مراقبة المواقع: فحص وظائف وأداء الموقع
• التحقق من التطوير: التحقق من تأثير تغييرات التعليمات البرمجية في المتصفح

الملاحظات والمساهمات

المشروع في مرحلة المعاينة العامة، وفريق Chrome DevTools يسعى بنشاط للحصول على ملاحظات المجتمع:

• إذا كان لديك طلبات ميزات أو اكتشفت مشكلات، يرجى تقديمها في GitHub Issues
• سواء كنت مطورًا يستخدم مساعدي برمجة الذكاء الاصطناعي، أو موردًا يبني أدوات تطوير الذكاء الاصطناعي من الجيل التالي، فإن رؤيتك لا تقدر بثمن