Chrome DevTools MCP: ثورة في تطوير الواجهات الأمامية بفضل الذكاء الاصطناعي
أطلقت جوجل مؤخرًا معاينة عامة لـ “Chrome DevTools MCP”، وهو خادم بروتوكول سياق النموذج (MCP) الذي يُمكّن وكلاء البرمجة القائمة على الذكاء الاصطناعي من التحكم في مثيل متصفح كروم حقيقي وفحصه. يتيح هذا النظام تسجيل آثار الأداء، وفحص DOM و CSS، وتنفيذ JavaScript، وقراءة مخرجات وحدة التحكم، وأتمتة تدفقات المستخدم. يُعالج هذا الإطلاق مباشرةً قيدًا معروفًا في وكلاء توليد التعليمات البرمجية، ألا وهو عدم قدرتهم على مراقبة سلوك وقت التشغيل للصفحات التي يقومون بإنشائها أو تعديلها.
ما هو Chrome DevTools MCP؟
بدمج الوكلاء في أدوات مطوري كروم (DevTools) عبر MCP، تُحوّل جوجل محركات الاقتراحات الثابتة إلى أجهزة تصحيح أخطاء مغلقة الحلقة تُجري القياسات في المتصفح قبل اقتراح الإصلاحات. يُعد MCP بروتوكولًا مفتوحًا لربط نماذج اللغات الكبيرة (LLMs) بالأدوات والبيانات. ويعمل Chrome DevTools MCP كخادم متخصص يُعرّض سطح تصحيح أخطاء كروم للعملاء المتوافقين مع MCP. تُعرّف مدونة مطوري جوجل هذا النظام بأنه “جلب قوة Chrome DevTools لمساعدي البرمجة بالذكاء الاصطناعي”، مع تدفقات عمل ملموسة مثل بدء تتبع الأداء (مثل: performance_start_trace) على عنوان URL مستهدف، ثم السماح للوكيل بتحليل التتبع الناتج واقتراح تحسينات (مثل تشخيص ارتفاع مؤشر Largest Contentful Paint).
القدرات والواجهات
يوثق المستودع الرسمي على GitHub مجموعة واسعة من الأدوات. إلى جانب تتبع الأداء (performance_start_trace, performance_stop_trace, performance_analyze_insight)، يمكن للوكلاء تشغيل بدائيات التنقل (navigate_page, new_page, wait_for)، ومحاكاة إدخال المستخدم (click, fill, drag, hover)، والاستفسار عن حالة وقت التشغيل (list_console_messages, evaluate_script, list_network_requests, get_network_requests). توفر أدوات لالتقاط لقطات الشاشة واللقطات الفورية إمكانية التقاط الحالة المرئية وحالة DOM لدعم عمليات المقارنة واكتشاف الانحدارات. يستخدم الخادم Puppeteer تحت الغطاء لأتمتة موثوقة ومعاني الانتظار، ويتواصل مع كروم عبر بروتوكول Chrome DevTools (CDP).
التثبيت والإعداد
تم تصميم عملية الإعداد لتكون بسيطة للغاية لعملاء MCP. توصي جوجل بإضافة فقرة تكوين واحدة تقوم بتشغيل npx، مع تتبع أحدث إصدار للخادم دائمًا:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}يتكامل هذا الخادم مع العديد من واجهات وكلاء الطرف الأمامي: Gemini CLI، و Claude Code، و Cursor، ودعم MCP في GitHub Copilot. بالنسبة لـ VS Code/Copilot، يوثق المستودع سطرًا واحدًا من التعليمات البرمجية --add-mcp؛ وبالنسبة إلى Claude Code، يعكس الأمر claude mcp add نفس الهدف npx. يستهدف الحزمة Node.js ≥22 وكروم الحالي.
أمثلة على تدفقات عمل الوكيل
يُبرز إعلان جوجل مطالبات عملية تُظهر حلقات كاملة: التحقق من إصلاح مقترح في متصفح حقيقي؛ تحليل أخطاء الشبكة (مثل CORS أو طلبات الصور المحظورة)؛ محاكاة سلوكيات المستخدم مثل إرسال النماذج لإعادة إنتاج الأخطاء؛ فحص مشكلات التصميم من خلال قراءة DOM/CSS في السياق؛ وتشغيل عمليات تدقيق الأداء الآلية لتقليل LCP وغيرها من مؤشرات Core Web Vitals. هذه كلها عمليات يمكن للوكلاء الآن التحقق منها باستخدام القياسات الفعلية بدلاً من الاستدلالات.
الخلاصة
تُعد معاينة Chrome DevTools MCP العامة نقطة تحول عملية لأدوات واجهة المستخدم الأمامية القائمة على الوكلاء: فهي تُرسّخ المساعدين القائمين على الذكاء الاصطناعي في بيانات القياس عن بُعد للمتصفح الحقيقي – تتبع الأداء، وحالة DOM/CSS، وبيانات الشبكة ووحدة التحكم – بحيث تُستمد التوصيات من القياسات بدلاً من التخمينات. الخادم من الطرف الأول، الذي يُقدمه فريق Chrome DevTools، قابل للتثبيت عبر npx ويستهدف عملاء MCP، مع كروم/CDP تحت الغطاء. توقع دوائر أقصر لتشخيص الإصلاحات والانحدارات وتدفقات واجهة المستخدم غير المستقرة، بالإضافة إلى التحقق الدقيق من عمل الأداء.
اترك تعليقاً