כלי הפיתוח ל-Chrome לסוכנים הם חבילת כלים שמאפשרת לכם להשתמש ביכולות של כלי הפיתוח ל-Chrome בתהליכי העבודה שלכם בתכנות באמצעות AI. התקנת כלי הפיתוח ל-Chrome עבור נציגים מאפשרת לכם לגשת אל:
- שרת MCP: מחבר את סוכן ה-AI שלכם למופע פעיל של דפדפן באמצעות Model Context Protocol (פרוטוקול הקשר של המודל) בקוד פתוח.
- Chrome DevTools CLI: ממשק לאינטראקציה עם הדפדפן ישירות מהטרמינל.
- יכולות של סוכנים: הוראות מומחה שמלמדות את הסוכן איך לתאם בין כמה כלים למשימות מורכבות כמו נגישות או ניפוי באגים בביצועים.
בהקשר של פיתוח אתרים, כלי פיתוח ל-Chrome לסוכנים משלבים יכולות ניפוי באגים בסוכן ה-AI שלכם.
לדוגמה, סוכן יכול להשתמש בכלים כדי לתעד ולהעריך עקבות של ביצועים, כדי לנתח את הביצועים של אתר ולזהות שיפורים פוטנציאליים. בנוסף לפיתוח אתרים, כלי הפיתוח לסוכנים מאפשרים לסוכן שלכם לגלוש באינטרנט בזמן אמת במקום רק לאחזר קובצי HTML סטטיים.
הגדרה
במדריך הזה מוסבר איך להגדיר את כלי פיתוח ל-Chrome לסוכנים כדי לעזור לסוכן התכנות לשלוט בדפדפן Chrome פעיל ולבדוק אותו.
אפשר להשתמש בחבילת chrome-devtools-mcp כדי לשלוט בדפדפן Chrome פעיל ולבדוק אותו מסוכן תכנות (כמו Gemini, Claude, Cursor או Copilot). שימו לב: כלי הפיתוח ל-Chrome לסוכנים מספקים את כל חבילת הכלים, אבל ממשק ה-CLI תומך רק בקבוצת משנה ממוקדת לאוטומציה מבוססת-shell.
סביבות פיתוח משולבות (IDE) ומודלים נתמכים
כלי הפיתוח ל-Chrome לנציגים תומך בכל כלי או IDE שתומכים בפרוטוקול MCP. היא כוללת את Antigravity, Gemini CLI, Claude Code, Cursor, Copilot ועוד.
שיקולי אבטחה
הנציג יוכל לראות את הדפים שהוא ניגש אליהם וליצור איתם אינטראקציה, ולכן הוא יוכל לפעול בשמכם אם תחברו אותו לדפדפן עם סשן פעיל ומאומת. אל תשתפו מידע רגיש או פרטים אישיים שלא הייתם רוצים לשתף עם נציגים.
דרישות מוקדמות
לפני שמתקינים את כלי פיתוח ל-Chrome לסוכנים, צריך לוודא שהסביבה עומדת בדרישות הבאות:
כדי להגדיר את כלי פיתוח ל-Chrome לסוכנים, בוחרים את השיטה שמתאימה לסביבת הקידוד המועדפת. חלק מהסוכנים דורשים התקנה ידנית, ואחרים מגיעים עם כלים משולבים מראש.
Antigravity
כלי הפיתוח ל-Chrome עבור סוכנים מגיעים עם חבילה מראש של Antigravity 2.0. אפשר להתחיל להשתמש בו מיד באמצעות סוכן המשנה של הדפדפן. אפשר לנסות להשתמש בפקודה דרך שורת הפקודות, כמו:
/browser Navigate to the Google homepage
כדי לגשת למיומנויות מיוחדות של נציגים, מומלץ להתקין את הפלאגין DevTools במהלך השלב Build with Google של ההגדרה הראשונית או בהגדרות האפליקציה. מידע נוסף זמין במסמכי התיעוד של Antigravity Browser Subagent.
התקנה באמצעות CLI
כדי להגדיר את כלי הפיתוח ל-Chrome לסוכנים, אפשר להשתמש בקובץ הגדרות JSON או בפקודת CLI כדי להתקין את השרת ישירות אם הסוכן תומך בכך. חלק מהסוכנים מציעים גם תוספים או פלאגינים רשמיים שכוללים מיומנויות של סוכנים, והוראות מומחה שעוזרות לסוכן להשתמש בתכונות של כלי הפיתוח.
אם הסוכן שלכם לא מופיע כאן, תוכלו למצוא הוראות להתקנה שלו במאגר GitHub של כלי הפיתוח ל-Chrome עבור סוכנים.
כדי להוסיף כלי פיתוח ל-Chrome לסוכנים בסוכן של שורת פקודה, משתמשים בפקודות ה-CLI המובנות של הסוכן הספציפי:
Gemini CLI
כדי להתקין את התוסף ל-Gemini CLI שכולל את חבילת ה-MCP ואת היכולות הנלוות, מריצים את הפקודה הבאה:
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
מתקינים רק את חבילת ה-MCP באמצעות הפקודה הבאה:
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
כדי להתקין את כלי הפיתוח ל-Chrome עבור סוכנים כפלאגין קוד של Claude, משתמשים בפקודות הבאות עם לוכסן ב-Claude Code. מוסיפים את הרישום ב-Marketplace:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
ומתקינים את הפלאגין ממרשם Marketplace:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
מידע נוסף זמין בדף הרשמי של הפלאגין Claude בכלי הפיתוח ל-Chrome.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
התקנה באמצעות הגדרות JSON
לסוכנים אחרים שתומכים במפתח ההגדרה mcpServers, צריך להוסיף את הרשומה הזו באופן ידני ולוודא שכלי הפיתוח לסוכנים מותקנים דרך npm i
chrome-devtools-mcp.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
התקנה בסוכנים אחרים
כדי להגדיר סוכן שלא מופיע ברשימה, אפשר לעיין במאגר כלי פיתוח ל-Chrome MCP GitHub.
בדיקת ההגדרה
מזינים את ההנחיה הבאה לסוכן כדי לבדוק שהכול עובד:
Check the performance of https://developers.chrome.com
הסוכן צריך לפתוח חלון דפדפן ולהקליט מעקב אחר ביצועים.
פתרון בעיות בהגדרה
אם הסוכן לא מצליח להפעיל כלים ויש לו גישה למיומנויות של כלי הפיתוח ל-Chrome, יכול להיות שהוא ינסה לפתור את הבעיה באופן אוטומטי. אם לא, אפשר לתת לסוכן הנחיות מפורשות:
Use the Chrome DevTools troubleshooting skill to fix my setup.
אפשר גם להיות יותר ספציפיים:
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
הגדרה מתקדמת
אלה כמה דרכים נוספות שבהן הסוכן יכול לגשת לדפדפן.
הגדרת מצב 'דפדפן ללא GUI'
אם רוצים לבצע משימות ברקע בלי חלון דפדפן גלוי, אפשר להפעיל את Chrome במצב headless (ללא ממשק משתמש). מוסיפים את הדגל --headless לארגומנטים של השרת:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
התחברות לסשן קיים של הדפדפן
כברירת מחדל, כלי הפיתוח לנציגים מפעיל מופע חדש של Chrome. עם זאת, אפשר לקשר את הסוכן לסשן קיים בדפדפן באמצעות הדגל --autoConnect. האפשרות הזו שימושית במיוחד אם הנציג צריך לבדוק בעיה שמוגבלת מאחורי כניסה או סשן שכבר התחלתם.
יש שתי דרכים להתחבר לסשן קיים:
שימוש בחיבור אוטומטי (Chrome 144 ואילך)
כששרת ה-MCP של כלי פיתוח ל-Chrome מוגדר עם האפשרות --autoConnect, שרת ה-MCP מתחבר למופע פעיל של Chrome ומבקש סשן ניפוי באגים מרחוק.
- בדפדפן Chrome שפועל, עוברים אל
chrome://inspect/#remote-debuggingכדי להפעיל ניפוי באגים מרחוק. מעדכנים את ההגדרות של MCP כך שיכללו את הדגל
--autoConnect:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }נותנים הנחיה לסוכן. ב-Chrome תוצג תיבת דו-שיח שבה המשתמש יתבקש לאשר את סשן ניפוי הבאגים מרחוק. לוחצים על אישור.
חיבור ידני באמצעות יציאת ניפוי באגים מרחוק
אם אי אפשר להשתמש ב---autoConnect (לדוגמה, אם מריצים את הסוכן בסביבת ארגז חול), אפשר להפעיל את Chrome באופן ידני עם יציאת ניפוי באגים.
לדוגמה (ב-macOS):
מפעילים את דפדפן Chrome עם יציאת ניפוי הבאגים מרחוק. מטעמי אבטחה, צריך גם לציין ספרייה מותאמת אישית של נתוני משתמשים.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableמגדירים את הנציג להתחבר באמצעות הפרמטר
--browser-url:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }