‫Chrome DevTools (MCP) للوكيل المستند إلى الذكاء الاصطناعي

تاريخ النشر: 23 سبتمبر 2025

نحن بصدد إطلاق إصدار مبكر متاح للجميع اليوم من خادم "بروتوكول سياق النموذج" (MCP) الجديد في "أدوات مطوّري البرامج في Chrome"، ما يتيح الاستفادة من إمكانات "أدوات مطوّري البرامج في Chrome" في أدوات المساعدة المستندة إلى الذكاء الاصطناعي في الترميز.

تواجه برامج الترميز مشكلة أساسية، وهي أنّها لا تستطيع معرفة ما يفعله الرمز الذي تنشئه عند تشغيله في المتصفح. فهم يبرمجون وكأنّهم معصوبو العينين.

يغيّر خادم MCP في "أدوات مطوّري البرامج في Chrome" هذا السلوك. يمكن لمساعدي الترميز المستندين إلى الذكاء الاصطناعي تصحيح أخطاء صفحات الويب مباشرةً في Chrome، والاستفادة من إمكانات تصحيح الأخطاء في DevTools وإحصاءات الأداء. يساعد ذلك في تحسين دقتها عند تحديد المشاكل وحلّها.

يمكنك الاطّلاع على طريقة عملها:

ما هو بروتوكول سياق النموذج (MCP)؟

بروتوكول سياق النموذج (MCP) هو معيار مفتوح المصدر لربط النماذج اللغوية الكبيرة (LLM) بالأدوات الخارجية ومصادر البيانات. يضيف خادم MCP في "أدوات مطوّري البرامج في Chrome" إمكانات تصحيح الأخطاء إلى وكيل الذكاء الاصطناعي.

على سبيل المثال، يوفّر خادم MCP في "أدوات مطوّري البرامج في Chrome" أداة باسم performance_start_trace. عندما يُطلب منك التحقيق في أداء موقعك الإلكتروني، يمكن للنموذج اللغوي الكبير استخدام هذه الأداة لبدء Chrome وفتح موقعك الإلكتروني واستخدام "أدوات مطوّري البرامج في Chrome" لتسجيل تتبُّع الأداء. يمكن للنموذج اللغوي الكبير بعد ذلك تحليل بيانات تتبُّع الأداء لاقتراح تحسينات محتملة. باستخدام بروتوكول MCP، يمكن لخادم MCP في "أدوات مطوّري البرامج في Chrome" توفير إمكانات جديدة لتصحيح الأخطاء في أداة الترميز، ما يساعدها في إنشاء مواقع إلكترونية أفضل.

إذا كنت تريد معرفة المزيد عن طريقة عمل MCP، يمكنك الاطّلاع على مستندات MCP.

ما هي استخدامات هذه الميزة؟

في ما يلي بعض الأمثلة على الطلبات التي يمكنك تجربتها في مساعد الذكاء الاصطناعي الذي تختاره، مثل Gemini CLI.

التحقّق من تغييرات الرمز البرمجي في الوقت الفعلي

يمكنك إنشاء إصلاح باستخدام وكيل الذكاء الاصطناعي، ثم التأكّد تلقائيًا من أنّ الحلّ يعمل على النحو المنشود باستخدام ميزة "التحكّم في نقاط التوقف" في Chrome DevTools.

طلب البحث الذي يمكن تجربته:

Verify in the browser that your change works as expected.

تشخيص أخطاء الشبكة ووحدة التحكّم

امنح وكيلك الإذن بتحليل طلبات الشبكة للكشف عن مشاكل CORS أو فحص سجلات وحدة التحكّم لمعرفة سبب عدم عمل إحدى الميزات على النحو المتوقّع.

طلب البحث الذي يمكن تجربته:

A few images on localhost:8080 are not loading. What's happening?

محاكاة سلوك المستخدم

يمكنك التنقّل وملء النماذج والنقر على الأزرار لإعادة إنتاج الأخطاء واختبار مسارات المستخدمين المعقّدة، كل ذلك أثناء فحص بيئة وقت التشغيل.

طلب البحث الذي يمكن تجربته:

Why does submitting the form fail after entering an email address?

تصحيح أخطاء التصميم والتنسيق المباشر

اطلب من وكيل الذكاء الاصطناعي الاتصال بصفحة مباشرة، وفحص نموذج المستند (DOM) وCSS، والحصول على اقتراحات ملموسة لحلّ مشاكل التنسيق المعقّدة، مثل العناصر المتدفقة، استنادًا إلى البيانات المباشرة من المتصفّح.

طلب البحث الذي يمكن تجربته:

The page on localhost:8080 looks strange and off. Check what's happening there.

تشغيل عمليات التدقيق في الأداء آليًا

اطلب من وكيل الذكاء الاصطناعي إجراء عملية تتبُّع للأداء وتحليل النتائج والتحقيق في مشاكل محدّدة متعلّقة بالأداء، مثل ارتفاع أرقام LCP.

طلب البحث الذي يمكن تجربته:

Localhost:8080 is loading slowly. Make it load faster.

يمكنك الاطّلاع على مستندات مرجع الأدوات للحصول على قائمة بجميع الأدوات المتاحة.

البدء

لتجربة ذلك، أضِف إدخال الإعداد التالي إلى برنامج MCP:

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

للتحقّق من عملها، شغِّل الطلب التالي في وكيل الترميز:

Please check the LCP of web.dev.

لمزيد من التفاصيل، يُرجى الاطّلاع على مستندات MCP في "أدوات مطوّري البرامج في Chrome" على GitHub.

المشاركة

نحن نعمل على إنشاء MCP في "أدوات مطوّري البرامج في Chrome" بشكل تدريجي، بدءًا من إصدار المعاينة العلنية الذي سنطرحه اليوم. نحن نبحث بنشاط عن ملاحظات منك ومن المنتدى بشأن الإمكانات التي يجب أن نضيفها بعد ذلك. سواء كنت مطوّرًا يستخدم مساعدات الترميز المستندة إلى الذكاء الاصطناعي أو مورّدًا يعمل على إنشاء الجيل التالي من أدوات تطوير الذكاء الاصطناعي، ستكون أفكارك قيّمة للغاية، وإذا كان هناك أي شيء ناقص أو لا يعمل، يُرجى الإبلاغ عن مشكلة على GitHub.