קבלת תובנות בזמן ריצה: הכירו את הכלים למפתחים של צד שלישי בכלי הפיתוח ל-Chrome עבור סוכנים

Wolfgang Beyer
Wolfgang Beyer
X GitHub

תאריך פרסום: 18 ביוני 2026

כדי לבצע ניפוי באגים באפליקציית אינטרנט מודרנית בצורה יעילה, סוכן AI צריך יותר מסתם קוד מקור. הוא צריך להבין איך האפליקציה מתנהגת בזמן הריצה.

אנחנו שמחים להציג כלים למפתחים של צד שלישי עבור כלי הפיתוח ל-Chrome לסוכנים. עכשיו, האפליקציות והמסגרות שלכם יכולות לתת לסוכני AI גישה ישירה למצב הפנימי שלהן. כך הסוכנים יכולים להבין את הקשר בין מה שקורה במסך לבין הלוגיקה שפועלת מאחורי הקלעים.

המטרה: מעבר לניתוח סטטי

פיתוח אתרים מודרני מבוסס על הפשטות – מסגרות כמו Angular,‏ React או Vue; פלטפורמות של מערכות ניהול תוכן כמו WordPress או Shopify; וספריות ל-CSS, לגרפיקה תלת-ממדית או לאנימציות. לכלי DevTools יש גישה ישירה ל-DOM הסופי שעבר רינדור, אבל הנתונים האמיתיים של אפליקציה נמצאים בדרך כלל במצב הפנימי של המסגרת: היררכיות של רכיבים, אותות JavaScript או מצב של קצה עורפי.

המטרה שלנו בכלים למפתחים של צד שלישי היא לספק דרך לכל ספרייה לשתף את ההקשר העשיר והפרקטי הזה עם סוכני AI. כך הסוכנים יכולים לנפות באגים בבעיות שקודם היו 'בלתי נראות' להם, למשל:

  • היררכיות של רכיבים: מיפוי של רכיב DOM בדף ישירות לרכיב המסגרת המתאים ולמצב הפנימי שלו.
  • בדיקת מצב פנימי: גישה למצב בצד השרת או לתוכן מסד הנתונים ישירות בסשן ניפוי הבאגים.

איך זה עובד: Discovery API

כלי פיתוח של צד שלישי משתמשים ב-JavaScript API מבוסס-אירועים. שרת ה-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 Schema כדי להגדיר את הקלט שהכלי מצפה לו.
  2. טיפול בלוגיקה: מטמיעים פונקציית execute שפועלת בהקשר של הדף ומחזירה נתונים שניתנים לסריאליזציה.
  3. רכיבי DOM: אי אפשר לשלוח אובייקטים שלא ניתן לסדר בסדרות בין הדף לבין כלי הפיתוח של סוכנים. רכיבי DOM הם יוצאים מן הכלל. כשכלי הפיתוח מחזירים רכיבי DOM, כלי הפיתוח לסוכנים ממפים אותם באופן אוטומטי לאותם מזהי UID שבהם נעשה שימוש בכלי take_snapshot. כך הסוכן יכול לקיים אינטראקציה עם כל רכיבי הדף (בין אם הם מגיעים ממסגרת או מתמונת מצב של הדף) באותו אופן.

אינטראקציה עם כלים באמצעות MCP

אחרי שרושמים את הכלים, סוכן התכנות יכול ליצור איתם אינטראקציה באמצעות כלי הפיתוח לסוכנים. כלי ה-MCP‏ list_3p_developer_tools מחזיר תיאורים של הכלים של צד שלישי שזמינים בדף. בנוסף, כשהדף שנבחר משתנה (לדוגמה, אחרי ניווט), כלי ה-MCP מוסיף לרשימת התגובות שלו רשימה של כלים זמינים.

כדי להשתמש בכלים האלה, הסוכן מתקשר אל execute_3p_developer_tool. כלי הפיתוח מאמתים באופן אוטומטי את פרמטרי הקלט כדי לוודא שהם תואמים להגדרה של הכלי.

אפשר גם להפעיל כלים באמצעות evaluate_script כלי ה-MCP. הסוכן שלכם מספק קטע קוד של JavaScript שכלי הפיתוח מריצים בדף. קטע הקוד הזה יכול לקרוא לכלים של מפתחים מצד שלישי ולהשתמש מיד בפלט שלהם לחישובים נוספים.

השימוש ב-evaluate_script יעיל לניפוי באגים מורכב כי הוא מאפשר לסוכנים:

  • פעולות של יצירה: שילוב של כמה שלבים להרצה אחת.
  • טיפול בערכים שלא ניתן לסדר אותם: עיבוד של אובייקטים או אותות ספציפיים למסגרת ישירות בהקשר של הדף.
  • אופטימיזציה של הביצועים: כדאי לצמצם את התקורה של הסריאליזציה ולהימנע מכמה הלוך ושוב בין הסוכן לדפדפן.

הצלחה מוקדמת: שילוב של Angular

אנחנו משתפים פעולה עם צוות Angular, שהטמיע שני כלי פיתוח של צד שלישי:

  1. הכלי Signal Graph: מאפשר לנציגים להמחיש את הקשרים בין המצב לתצוגה, ועוזר להם לזהות תלות שגורמת ללולאות אינסופיות או לעדכונים שנכשלו.
  2. כלי לגרף של הזרקת תלות (DI): חושף את מזרקי הרכיבים, ומאפשר לסוכנים לראות בדיוק איפה שירות מסופק או איפה הוא חסר. מכיוון שגרף ה-DI של Angular הוא מבנה שקיים רק בזמן ריצה, אי אפשר לנפות שגיאות של ספקי שירותים רק באמצעות ניתוח סטטי.
צילום מסך שמציג סוכן AI שמשתמש בכלי Angular Signal Graph כדי לנפות באגים בלולאה ריאקטיבית.

צוות React התחיל גם להתנסות בכלים למפתחים של צד שלישי.

הצטרפות אלינו ליצירת העתיד של ניפוי הבאגים באמצעות סוכנים

התכונה הניסיונית הזו זמינה בכלי הפיתוח ל-Chrome לסוכנים החל מגרסה 0.25.0. כדי להפעיל אותו, משתמשים בדגל --categoryExperimentalThirdParty של שורת הפקודה.

אם אתם מנהלים framework, ספרייה או כלי ורוצים לשפר את חוויית הניפוי באגים של סוכני קידוד, נשמח לשתף פעולה:

הצטרפו אלינו כדי לבנות יחד את העתיד של פיתוח אתרים מבוסס-סוכנים.