إتاحة إحصاءات وقت التشغيل: تقديم أدوات مطوّرين تابعة لجهات خارجية في "أدوات مطوّري البرامج في Chrome" للوكلاء

Wolfgang Beyer
Wolfgang Beyer
X GitHub

تاريخ النشر: 18 يونيو 2026

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

يسرّنا تقديم أدوات مطوّري البرامج التابعة لجهات خارجية في أدوات مطوّري البرامج في Chrome للوكلاء. يمكن الآن لتطبيقاتك وأُطر عملك أن تتيح لوكلاء الذكاء الاصطناعي الاطّلاع مباشرةً على حالتها الداخلية. يساعد ذلك موظفي الدعم في الربط بين ما يظهر على الشاشة والمنطق الذي يتم تنفيذه في الخلفية.

الهدف: تجاوز التحليل الثابت

تعتمد عملية تطوير الويب الحديثة على التجريدات، مثل أُطر العمل Angular أو React أو Vue، ومنصات أنظمة إدارة المحتوى مثل WordPress أو Shopify، والمكتبات الخاصة بتنسيقات CSS أو الرسومات الثلاثية الأبعاد أو الصور المتحركة. على الرغم من أنّ "أدوات مطوّلي البرامج" تتيح الوصول المباشر إلى نموذج DOM النهائي المعروض، فإنّ "الحقيقة" الخاصة بالتطبيق غالبًا ما تكون مضمّنة في الحالة الداخلية للإطار، مثل تسلسلات المكوّنات أو إشارات JavaScript أو حالة الخلفية.

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

  • تسلسلات المكوّنات الهرمية: يمكنك ربط عنصر DOM على الصفحة مباشرةً بمكوّن الإطار وحالته الداخلية المقابلَين.
  • فحص الحالة الداخلية: يمكنك الوصول إلى حالة جهة الخادم أو محتوى قاعدة البيانات مباشرةً خلال جلسة تصحيح الأخطاء.

طريقة العمل: Discovery API

تستخدم أدوات المطوّرين التابعة لجهات خارجية واجهة برمجة تطبيقات JavaScript مستندة إلى الأحداث. يكتشف خادم MCP في "أدوات مطوّري Chrome" هذه الأدوات من خلال إرسال حدث devtoolstooldiscovery إلى العنصر العام window. يتم إرسال الحدث devtoolstooldiscovery تلقائيًا في كل مرة يتم فيها الانتقال إلى صفحة أخرى، أو إذا تم تغيير الصفحة المحدّدة، ويمكن إرساله بشكل صريح باستخدام list_3p_developer_tools أداة MCP.

استخدام أدواتك الخاصة

لعرض أدوات من مكتبتك أو تطبيقك، عليك الاستماع إلى حدث الاكتشاف هذا والرد عليه باستخدام ToolGroup.

window.addEventListener('devtoolstooldiscovery', (event) => {
  event.respondWith({
    name: "My Library Tools",
    description: "Tools for inspecting internal library state",
    tools: [
      {
        name: "getInternalState",
        description: "Returns the current internal state of the framework.",
        inputSchema: {
          type: "object",
          properties: {
            componentId: { type: "string" }
          }
        },
        execute: async (input) => {
          // Access your framework's internal registry
          return myFramework.getState(input.componentId);
        }
      }
    ]
  });
});

يتم التنفيذ على النحو التالي:

  1. تحديد المخطّط: استخدِم مخطّط JSON لتحديد الإدخال الذي تتوقّعه أداتك.
  2. التعامل مع المنطق: نفِّذ الدالة execute التي تعمل في سياق الصفحة وتعرض بيانات يمكن تسلسلها.
  3. عناصر DOM: لا يمكن إرسال الكائنات غير القابلة للتسلسل بين الصفحة و"أدوات مطوّري البرامج" للوكلاء. تُستثنى عناصر DOM من ذلك. عندما تعرض أدواتك عناصر DOM، تربط "أدوات مطوّري البرامج للوكلاء" تلقائيًا هذه العناصر بمعرّفات UID نفسها التي تستخدمها أداة take_snapshot . يتيح ذلك للوكيل التفاعل مع جميع عناصر الصفحة (سواء كانت من إطار عمل أو من لقطة شاشة للصفحة) بالطريقة نفسها.

التفاعل مع الأدوات باستخدام MCP

بعد تسجيل أدواتك، يمكن لوكيل الترميز التفاعل معها من خلال DevTools for agents. تعرض أداة list_3p_developer_tools MCP أوصافًا للأدوات التابعة لجهات خارجية المتوفّرة على الصفحة. بالإضافة إلى ذلك، عندما تتغير الصفحة المحدّدة (على سبيل المثال، بعد التنقّل)، يضيف تطبيق "أدوات مطوري البرامج" قائمة بالأدوات المتاحة إلى استجابة أداة MCP.

لاستخدام هذه الأدوات، يتصل الوكيل بـ execute_3p_developer_tool. تتحقّق DevTools تلقائيًا من صحة مَعلمات الإدخال للتأكّد من أنّها تتطابق مع تعريف الأداة.

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

يُعدّ استخدام evaluate_script فعّالاً لتصحيح الأخطاء المعقّدة لأنّه يتيح للوكلاء ما يلي:

  • عمليات الإنشاء: يمكنك دمج عدة خطوات في عملية تنفيذ واحدة.
  • التعامل مع القيم غير القابلة للتسلسل: معالجة العناصر أو الإشارات الخاصة بإطار العمل مباشرةً في سياق الصفحة
  • تحسين الأداء: قلِّل من الحمل الزائد الناتج عن التسلسل وتجنَّب عمليات الإرسال والاستقبال المتعددة بين الوكيل والمتصفّح.

النجاح المبكر: دمج Angular

تعاونّا مع فريق Angular الذي نفّذ أداتَين للمطوّرين من جهات خارجية، وهما:

  1. أداة "الرسم البياني للإشارات": تتيح هذه الأداة للموظفين إمكانية عرض العلاقات بين الحالة والعرض بشكل مرئي، ما يساعدهم في تحديد التبعيات التي تتسبّب في حدوث حلقات لا نهائية أو تعذُّر إجراء التحديثات.
  2. أداة "مخطط إدخال التبعية": تعرض هذه الأداة أدوات إدخال العناصر، ما يتيح للوكلاء معرفة المكان الذي يتم فيه تقديم الخدمة أو المكان الذي لا تتوفّر فيه. بما أنّ الرسم البياني لنظام إدخال التبعيات في Angular هو بنية خاصة بوقت التشغيل فقط، لا يمكن تصحيح أخطاء موفّر الخدمة باستخدام التحليل الثابت وحده.
لقطة شاشة تعرض وكيل ذكاء اصطناعي يستخدم أداة "مخطط الإشارات" في Angular لتصحيح حلقة تفاعلية.

بدأ فريق React أيضًا بتجربة أدوات مطوّرين تابعة لجهات خارجية.

ساهم في بناء مستقبل تصحيح الأخطاء المستند إلى الوكلاء

تتوفّر هذه الميزة التجريبية في "أدوات مطوّري البرامج في Chrome" للوكلاء بدءًا من الإصدار 0.25.0. لتفعيلها، استخدِم علامة سطر الأوامر --categoryExperimentalThirdParty.

إذا كنت تدير إطار عمل أو مكتبة أو أداة وتريد تحسين تجربة تصحيح الأخطاء لوكلاء الترميز، يسعدنا التعاون معك:

ندعوك للانضمام إلينا في بناء مستقبل تطوير الويب المستند إلى الوكلاء.