باز کردن بینش‌های زمان اجرا: معرفی ابزارهای توسعه‌دهنده شخص ثالث برای Chrome DevTools برای عامل‌ها

ولفگانگ بایر
Wolfgang Beyer
X GitHub

منتشر شده: ۱۸ ژوئن ۲۰۲۶

برای اشکال‌زدایی مؤثر یک برنامه وب مدرن، یک عامل هوش مصنوعی به چیزی بیش از کد منبع شما نیاز دارد؛ باید بفهمد که برنامه در زمان اجرا چگونه رفتار می‌کند.

ما مفتخریم که ابزارهای توسعه‌دهندگان شخص ثالث را برای Chrome DevTools برای عامل‌ها معرفی کنیم. اکنون، برنامه‌ها و چارچوب‌های شما می‌توانند به عامل‌های هوش مصنوعی، نگاهی مستقیم به وضعیت داخلی خود ارائه دهند. این به عامل‌ها کمک می‌کند تا نقاط بین آنچه روی صفحه نمایش اتفاق می‌افتد و منطق پشت صحنه را به هم متصل کنند.

هدف: فراتر از تحلیل استاتیک

توسعه وب مدرن بر اساس انتزاعات ساخته شده است - چارچوب‌هایی مانند Angular، React یا Vue؛ پلتفرم‌های CMS مانند WordPress یا Shopify؛ و کتابخانه‌هایی برای CSS، گرافیک سه‌بعدی یا انیمیشن‌ها. در حالی که DevTools دسترسی مستقیم به DOM رندر شده نهایی دارد، "حقیقت" یک برنامه اغلب در داخل وضعیت داخلی چارچوب قرار دارد: سلسله مراتب کامپوننت‌ها، سیگنال‌های جاوا اسکریپت یا وضعیت backend.

هدف ما با ابزارهای توسعه‌دهندگان شخص ثالث، فراهم کردن مسیری برای هر کتابخانه‌ای است تا این زمینه غنی و کاربردی را با عوامل هوش مصنوعی به اشتراک بگذارد. با انجام این کار، به عوامل اجازه می‌دهد تا مشکلاتی را که قبلاً برای آنها "نامرئی" بود، اشکال‌زدایی کنند، به عنوان مثال:

  • سلسله مراتب کامپوننت‌ها: یک عنصر DOM در صفحه را مستقیماً به کامپوننت فریم‌ورک مربوطه و وضعیت داخلی آن نگاشت می‌کند.
  • بازرسی وضعیت داخلی: دسترسی به وضعیت سمت سرور یا محتوای پایگاه داده مستقیماً در جلسه اشکال‌زدایی.

نحوه کار: رابط برنامه‌نویسی کاربردی اکتشاف (Discovery API)

ابزارهای توسعه‌دهنده شخص ثالث از یک API جاوا اسکریپت مبتنی بر رویداد استفاده می‌کنند. سرور Chrome DevTools MCP این ابزارها را با ارسال یک رویداد 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 Schema برای تعریف ورودی مورد انتظار ابزار خود استفاده کنید.
  2. منطق را مدیریت کنید: یک تابع execute پیاده‌سازی کنید که در متن صفحه اجرا شود و داده‌های قابل سریال‌سازی را برگرداند.
  3. عناصر DOM: اشیاء غیرقابل سریال‌سازی را نمی‌توان بین صفحه و DevTools برای عامل‌ها ارسال کرد. عناصر DOM یک استثنا هستند. هنگامی که ابزارهای شما عناصر DOM را برمی‌گردانند، DevTools برای عامل‌ها به طور خودکار آنها را به همان UID های استفاده شده توسط ابزار take_snapshot نگاشت می‌کند. این به عامل شما اجازه می‌دهد تا با تمام عناصر صفحه (چه از یک چارچوب و چه از یک عکس فوری صفحه) به یک روش تعامل داشته باشد.

تعامل با ابزارها با استفاده از MCP

پس از ثبت ابزارهای خود، عامل کدنویسی شما می‌تواند از طریق DevTools برای عامل‌ها با آنها تعامل داشته باشد. ابزار MCP مربوط به list_3p_developer_tools توضیحاتی از ابزارهای شخص ثالث موجود در صفحه را برمی‌گرداند. علاوه بر این، هنگامی که صفحه انتخاب شده تغییر می‌کند (به عنوان مثال، پس از پیمایش)، DevTools لیستی از ابزارهای موجود را به پاسخ ابزار MCP اضافه می‌کند.

برای استفاده از این ابزارها، عامل شما execute_3p_developer_tool را فراخوانی می‌کند. DevTools به طور خودکار پارامترهای ورودی را اعتبارسنجی می‌کند تا از مطابقت آنها با تعریف ابزار اطمینان حاصل کند.

همچنین می‌توانید ابزارها را با استفاده از ابزار evaluate_script MCP فراخوانی کنید. عامل شما یک قطعه کد جاوا اسکریپت ارائه می‌دهد که DevTools آن را روی صفحه اجرا می‌کند. این قطعه کد می‌تواند ابزارهای توسعه‌دهنده شخص ثالث را فراخوانی کند و بلافاصله از خروجی آنها برای محاسبات بیشتر استفاده کند.

استفاده از evaluate_script برای اشکال‌زدایی پیچیده مؤثر است زیرا به عامل‌ها اجازه می‌دهد:

  • ترکیب عملیات : چندین مرحله را در یک اجرا ترکیب می‌کند.
  • مدیریت مقادیر غیرقابل سریال‌سازی : اشیاء یا سیگنال‌های مختص چارچوب را مستقیماً در متن صفحه پردازش کنید.
  • بهینه‌سازی عملکرد : سربار سریال‌سازی را به حداقل برسانید و از رفت و برگشت‌های متعدد بین عامل و مرورگر جلوگیری کنید.

موفقیت اولیه: ادغام زاویه‌ای

ما با تیم Angular همکاری داشته‌ایم که دو ابزار توسعه‌دهنده شخص ثالث را پیاده‌سازی کرده‌اند:

  1. ابزار نمودار سیگنال: به عامل‌ها این امکان را می‌دهد که روابط بین حالت و نما را تجسم کنند و به آنها کمک می‌کند وابستگی‌هایی را که باعث حلقه‌های بی‌نهایت یا به‌روزرسانی‌های ناموفق می‌شوند، شناسایی کنند.
  2. ابزار نمودار تزریق وابستگی (DI): تزریق‌کننده‌های عنصر را نمایش می‌دهد که به عامل‌ها اجازه می‌دهد دقیقاً ببینند یک سرویس کجا ارائه می‌شود یا کجا وجود ندارد. از آنجا که نمودار تزریق وابستگی Angular یک ساختار فقط در زمان اجرا است، تحلیل استاتیک به تنهایی نمی‌تواند خطاهای ارائه‌دهنده را اشکال‌زدایی کند.
اسکرین‌کستی که یک عامل هوش مصنوعی را در حال استفاده از ابزار Angular Signal Graph برای اشکال‌زدایی یک حلقه واکنشی نشان می‌دهد.

تیم React همچنین آزمایش ابزارهای توسعه‌دهندگان شخص ثالث را آغاز کرده است.

آینده‌ی اشکال‌زدایی عامل‌محور را با ما بسازید

این ویژگی آزمایشی در Chrome DevTools برای عامل‌هایی که از نسخه 0.25.0 شروع می‌شوند، در دسترس است. برای فعال کردن آن، از پرچم خط فرمان --categoryExperimentalThirdParty استفاده کنید.

اگر شما یک چارچوب، کتابخانه یا ابزار را نگهداری می‌کنید و می‌خواهید تجربه اشکال‌زدایی را برای کدنویسان بهبود بخشید، ما دوست داریم با شما همکاری کنیم:

به ما بپیوندید تا آینده توسعه وب عامل‌محور را با هم بسازیم!