تقدّم شركة CyberAgent، وهي شركة رائدة في مجال تكنولوجيا المعلومات في اليابان، مجموعة واسعة من الخدمات على الإنترنت، بما في ذلك منصة التدوين الشهيرة Ameba. واجه الفريق تحديًا كبيرًا بسبب أخطاء وقت التشغيل التي كان من الصعب رصدها من خلال الاختبارات الآلية، ما استدعى تدخلاً يدويًا استغرق وقتًا طويلاً.
يوضّح هذا المستند كيف استخدمت شركة CyberAgent خادم بروتوكول سياق النموذج (MCP) في Chrome DevTools للانتقال من عملية يدوية إلى سير عمل آلي، ما وفّر وقت المطوّرين وحسّن موثوقية سير الاختبار.
التحدي: سير عمل يدوي ومحدود
نظام تصميم Ameba، المعروف باسم Spindle، هو مجموعة من مكوّنات واجهة المستخدم القابلة لإعادة الاستخدام التي يتم استخدامها لإنشاء واجهة منصة التدوين. تعتمد هذه المنصة على Storybook لتطوير واختبار مكونات واجهة المستخدم.
في السابق، كان سير عمل شركة CyberAgent لمعالجة أخطاء وقت التشغيل عبارة عن دورة يدوية متكررة. سيراجع المطوّر كل مكوّن في المتصفّح، ويطبّق إصلاحًا، ثم يعيد مراجعته. ومع العدد الكبير من الصفحات والمكوّنات، كان لهذا الاعتماد على التأكيد المرئي حدوده، ما صعّب عملية رصد كل خطأ.
الحلّ: تصحيح أخطاء الوكيل باستخدام أداة MCP في Chrome DevTools
للتغلّب على هذا التحدّي، لجأ الفريق إلى خادم MCP في "أدوات مطوّري البرامج في Chrome". بعد عملية إعداد مباشرة باستخدام دليل الإعداد الرسمي، تمكّنوا على الفور من توجيه وكيل يعمل بالذكاء الاصطناعي (Claude) لأتمتة عملية تصحيح الأخطاء بأكملها.
باستخدام طلب واحد، يمكن للوكيل التفاعل مع "أدوات مطوّري البرامج" من خلال معالجة معلومات حالة المتصفّح التي تم التقاطها بواسطة MCP في "أدوات مطوّري البرامج في Chrome"، والوصول إلى سياق نظام الملفات، وقراءة سجلّات وحدة التحكّم. بعد ذلك، حدّد النظام الأخطاء تلقائيًا ونفّذ الإصلاحات بدون تدخّل يدوي.
كان الطلب الأوّلي الذي استخدموه على النحو التالي:
Currently, spindle-ui's Storybook is running, but runtime errors may be occurring.
Please use chrome-dev-tools-mcp to confirm the operation of the Story in the following steps:
Identify all target Stories. Confirm each and every one, no matter how many there are.
Confirm that the Story is displayed correctly using dev-tools-mcp.
Fix all errors.
Click and move through each Story from the top in the browser opened with mcp to confirm.
بعد ذلك، بدأ وكيل الذكاء الاصطناعي في تدقيق مثيل Storybook، وتنقّل بين القصص الكاملة لقراءة الأخطاء وتطبيق تصحيحات الرمز البرمجي والتأكّد من نجاح كل عملية إصلاح.
التأثير: من عمليات التحقّق اليدوية إلى الإصلاحات المبرمَجة
وقد تحقّقت النتائج بسرعة. في غضون ساعة واحدة تقريبًا، راجع وكيل الذكاء الاصطناعي بشكل مستقل جميع المكوّنات الـ 32 والقصص الـ 236 في نظام تصميم Spindle.
على الرغم من أنّ البرنامج قد رصد خطأ واحدًا في وقت التشغيل وتحذيرَين، فإنّ القيمة الحقيقية للتجربة تكمن في التأكّد من عدم حدوث أي أخطاء، أي التأكّد من أنّ الغالبية العظمى من المكتبة خالية من الأخطاء بدون أن يضطر المطوّر إلى النقر يدويًا على مئات الحالات.
في السابق، كان هذا النوع من عمليات التدقيق الشاملة مرهقًا بصريًا وعرضةً للخطأ البشري. من خلال تفويض هذه المهمة إلى أداة MCP في Chrome DevTools، حقّقت شركة CyberAgent ما يلي:
- تغطية التدقيق بنسبة% 100: تحقّق الوكيل آليًا من كل قصة، ما يضمن أنّ المكوّنات "النظيفة" كانت نظيفة بالفعل، وهو مستوى من الاجتهاد يصعب الحفاظ عليه يدويًا.
- عدم تسجيل أي نتائج سلبية خاطئة: على عكس حِزم الاختبارات المبرمَجة التي قد لا ترصد أي مشاكل مرئية في وقت التشغيل، أتاح خادم MCP للوكيل التحقّق من صحة حالة المتصفّح الفعلية، ما يضمن موثوقية عالية.
- تخفيف العبء المعرفي: يمكن للمطوّرين الوثوق بالنظام للتعامل مع "المهام الشاقة" المتكررة، ما يتيح لهم التركيز على المنطق المعقّد بدلاً من عمليات التحقّق الروتينية.
أشار مطوّر الويب "كوتا ياناغي" إلى أنّ الفائدة تكمن في نقل المسؤولية:
"لقد كان من المفيد جدًا تفويض عملية التحقّق من أخطاء وقت التشغيل والتحذيرات التي كنت أجريها يدويًا في المتصفّح. يعجبني أيضًا أنّه يمكنني الآن وصف العمليات المعقّدة بلغة طبيعية، وأنّ الأداة يمكنها الانتقال من قراءة سجلّات الأخطاء إلى حلّ المشكلة مباشرةً".
وقد أدّى نجاح سير العمل الآلي هذا إلى تعديل شركة CyberAgent دليل Spindle Agents الداخلي لوكلاء الذكاء الاصطناعي. يحدّد هذا الدليل الآن Chrome DevTools MCP كخادم تصحيح الأخطاء التلقائي لوكيل الذكاء الاصطناعي Claude، ما يضفي طابعًا رسميًا على استخدامه كأفضل ممارسة ويؤكّد ثقتهم في هذه العملية الجديدة المستندة إلى الذكاء الاصطناعي.
تم تنفيذ الإصلاحات المحدّدة في طلبَي سحب، ويمكنك مراجعتها على GitHub:
بعد ذلك، طوّرت شركة CyberAgent الطلب ونشرت النتيجة النهائية هذه.
التعليقات والخطط المستقبلية
أعربت شركة CyberAgent عن رضاها عن المرونة وعدد الخيارات المتاحة ضمن "برنامج شركاء منصة Chrome DevTools". قدّموا أيضًا ملاحظات قيّمة بشأن التحسينات المستقبلية، وأشاروا إلى أنّه على الرغم من فعالية الأداة، يتطلّب استخدام ميزاتها الأكثر تقدّمًا مستوى معيّنًا من المعرفة لدى المستخدم.
في المستقبل، يهمّ الفريق إجراء عمليات دمج أعمق مع لوحة Performance في DevTools. يتصوّرون سير عمل يمكن فيه للوكيل التحقّق من مؤشرات Core Web Vitals ثم الانتقال إلى تحليل أكثر تفصيلاً للأداء باستخدام لوحة "الأداء" لتحليل التحسينات واقتراحها.
شارك "كازوناري هارا"، وهو خبير مطوّرين في شركة CyberAgent، انبهاره، مؤكّدًا على كفاءة الأداة وإمكانية استخدامها في تطبيقات مستقبلية:
"لقد أدهشني عندما رأيت المتصفّح يصلح الأخطاء تلقائيًا مباشرةً من السجلات. يمكن الآن تنفيذ المهام التي كان يتم تفويتها أو تستغرق وقتًا طويلاً بشكل موثوق وتلقائي، ما يؤدي إلى تحسين كفاءة التطوير. بما أنّ أداة MCP في "أدوات مطوّري البرامج في Chrome" توفّر العديد من الميزات في بيئة وقت تشغيل حقيقية، أتوقّع أن تكون مفيدة في العديد من المواقف المختلفة في المستقبل".
الخاتمة
من خلال دمج أداة MCP في Chrome DevTools في سير عملها، تمكّنت شركة CyberAgent من إتمام مهمة تصحيح الأخطاء المعقّدة والتي تستغرق وقتًا طويلاً بشكل آلي. وتُظهر تجربتهم الإمكانات الهائلة التي توفّرها الأدوات المستندة إلى الذكاء الاصطناعي لتعزيز إنتاجية المطوّرين.
حققت العملية التشغيل الآلي الكامل، ما أدى إلى إلغاء الحاجة إلى عمليات التحقّق اليدوية وضمان عدم تفويت أي أخطاء. على الرغم من أنّ التنفيذ الحالي قد أثبت فائدته، تشير الملاحظات الواردة من CyberAgent إلى مستقبل واعد يمكن فيه لأداة MCP في "أدوات مطوّري البرامج في Chrome" أن تتيح لهم تنفيذ مهام أكثر تعقيدًا لتحليل الأداء وتحسينه مباشرةً في المتصفّح.