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

Wolfgang Beyer
Wolfgang Beyer
X GitHub

Published: June 18, 2026

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

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

الهدف: ما وراء التحليل الثابت

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

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

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

طريقة العمل: واجهة برمجة التطبيقات Discovery API

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

تنفيذ أدواتك الخاصة

لعرض الأدوات من مكتبتك أو تطبيقك، عليك الاستماع إلى حدث الاكتشاف هذا والردّ باستخدام 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 Schema لتحديد الإدخال الذي تتوقّعه أداتك.
  2. التعامل مع المنطق: نفِّذ دالة execute تعمل في سياق الصفحة وتعرض بيانات قابلة للتسلسل.
  3. عناصر DOM: لا يمكن إرسال الكائنات غير القابلة للتسلسل بين الصفحة و"أدوات مطوري البرامج" للوكلاء. عناصر DOM هي استثناء. عندما تعرض أدواتك عناصر DOM، تربطها "أدوات مطوري البرامج" للوكلاء تلقائيًا بمعرّفات UID نفسها التي تستخدِمها أداة take_snapshot tool. يسمح ذلك لوكيلك بالتفاعل مع جميع عناصر الصفحة (سواء كانت من إطار أو من لقطة شاشة للصفحة) بالطريقة نفسها.

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

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

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

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

إنّ استخدام evaluate_script فعّال لتحديد المشاكل المعقّدة لأنّه يسمح للوكلاء بما يلي:

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

نجاح مبكّر: التكامل مع Angular

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

  1. أداة Signal Graph: تمنح الوكلاء القدرة على عرض العلاقات بين الحالة والعرض، ما يساعدهم في تحديد التبعيات التي تتسبب في حدوث حلقات لا نهائية أو عمليات تعديل فاشلة.
  2. أداة Dependency Injection (DI) Graph: تعرض أدوات إدخال العناصر، ما يسمح للوكلاء بمعرفة المكان الذي يتم فيه توفير خدمة أو المكان الذي تكون فيه غير متوفّرة. بما أنّ رسم DI البياني في Angular هو بنية وقت التشغيل فقط، لا يمكن تحديد مشاكل أخطاء مقدّم الخدمة باستخدام التحليل الثابت وحده.
A screencast showing an AI agent using the Angular Signal Graph tool to debug a reactive loop.

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

شارِك في بناء مستقبل تحديد المشاكل المستنِد إلى الوكلاء معنا

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

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

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