פורסם: 23 בספטמבר 2025
היום אנחנו משיקים תצוגה מקדימה ציבורית של שרת חדש של פרוטוקול הקשר של מודל כלי הפיתוח ל-Chrome (MCP), שמאפשר להשתמש ביכולות של כלי הפיתוח ל-Chrome בעוזרים מבוססי-AI לכתיבת קוד.
סוכני קידוד מתמודדים עם בעיה בסיסית: הם לא יכולים לראות מה הקוד שהם יוצרים עושה בפועל כשהוא פועל בדפדפן. הם למעשה מתכנתים עם כיסוי עיניים.
השרת של Chrome DevTools MCP משנה את זה. עוזרי תכנות מבוססי-AI יכולים לנפות באגים בדפי אינטרנט ישירות ב-Chrome, וליהנות מהיכולות של ניפוי באגים בכלי הפיתוח ומהתובנות לגבי הביצועים. כך הם יוכלו לזהות ולתקן בעיות בצורה מדויקת יותר.
כך זה עובד:
מה זה Model Context Protocol (MCP)?
Model Context Protocol (MCP) הוא תקן קוד פתוח לחיבור מודלים גדולים של שפה (LLM) לכלים חיצוניים ולמקורות נתונים. שרת ה-MCP של כלי הפיתוח של Chrome מוסיף יכולות ניפוי באגים לסוכן ה-AI שלכם.
לדוגמה, שרת ה-MCP של כלי הפיתוח ל-Chrome מספק כלי שנקרא performance_start_trace. כשמטילים על מודל שפה גדולה (LLM) לחקור את הביצועים של האתר שלכם, הוא יכול להשתמש בכלי הזה כדי להפעיל את Chrome, לפתוח את האתר ולהשתמש בכלים למפתחים של Chrome כדי לתעד את נתוני הביצועים. לאחר מכן, מודל ה-LLM יכול לנתח את עקבות הביצועים כדי להציע שיפורים פוטנציאליים. באמצעות פרוטוקול ה-MCP, שרת ה-MCP של כלי הפיתוח ל-Chrome יכול להוסיף יכולות חדשות לניפוי באגים לסוכן הקידוד שלכם, כדי לשפר את היכולת שלו לבנות אתרים.
במסמכי התיעוד של MCP יש מידע נוסף על אופן הפעולה של MCP.
למה אפשר להשתמש בו?
הנה כמה דוגמאות להנחיות שאפשר לנסות בעוזר הדיגיטלי מבוסס-AI שתבחרו, כמו Gemini CLI.
אימות שינויים בקוד בזמן אמת
מפיקים תיקון באמצעות סוכן ה-AI, ואז מאמתים באופן אוטומטי שהפתרון פועל כמצופה באמצעות כלי ה-MCP של כלי הפיתוח ל-Chrome.
הנחיה שאפשר לנסות:
Verify in the browser that your change works as expected.
אבחון שגיאות ברשת ובמסוף
הסוכן יכול לנתח בקשות רשת כדי לגלות בעיות ב-CORS או לבדוק יומני מסוף כדי להבין למה תכונה מסוימת לא פועלת כצפוי.
הנחיה שאפשר לנסות:
A few images on localhost:8080 are not loading. What's happening?
סימולציה של התנהגות המשתמשים
אפשר לנווט, למלא טפסים וללחוץ על לחצנים כדי לשחזר באגים ולבדוק תהליכי משתמש מורכבים – והכול תוך כדי בדיקת סביבת זמן הריצה.
הנחיה שאפשר לנסות:
Why does submitting the form fail after entering an email address?
ניפוי באגים בבעיות שקשורות לעיצוב ולפריסה בשידור חי
אפשר לבקש מסוכן ה-AI להתחבר לדף פעיל, לבדוק את ה-DOM ואת ה-CSS ולקבל הצעות קונקרטיות לפתרון בעיות מורכבות בפריסה, כמו רכיבים שגולשים מהמסגרת, על סמך נתונים פעילים מהדפדפן.
הנחיה שאפשר לנסות:
The page on localhost:8080 looks strange and off. Check what's happening there.
אוטומציה של ביקורות ביצועים
מנחים את נציג ה-AI להריץ מעקב אחר ביצועים, לנתח את התוצאות ולבדוק בעיות ספציפיות בביצועים, כמו ערכי LCP גבוהים.
הנחיה שאפשר לנסות:
Localhost:8080 is loading slowly. Make it load faster.
במסמכי העזר של הכלי מפורטת רשימה של כל הכלים הזמינים.
שנתחיל?
כדי לנסות את זה, מוסיפים את רשומת ההגדרה הבאה ללקוח ה-MCP:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
כדי לבדוק אם זה עובד, מריצים את ההנחיה הבאה בסוכן התכנות:
Please check the LCP of web.dev.
פרטים נוספים זמינים במאמרי העזרה בנושא MCP בכלים למפתחים ב-Chrome ב-GitHub.
הצטרפו לפעילות
אנחנו בונים את Chrome DevTools MCP בהדרגה, החל מגרסת התצוגה המקדימה הציבורית שאנחנו משיקים היום. אנחנו מחפשים באופן פעיל משוב מכם ומהקהילה לגבי היכולות שכדאי לנו להוסיף בהמשך. בין אם אתם מפתחים שמשתמשים בעוזרי תכנות מבוססי-AI, או ספקים שיוצרים את הדור הבא של כלי פיתוח מבוססי-AI, התובנות שלכם חשובות לנו מאוד. אם משהו חסר או לא עובד, אתם מוזמנים לפתוח בעיה ב-GitHub.