איך להפוך תהליכי עבודה חוזרים בדפדפן לאוטומטיים באמצעות ה-CLI של כלי הפיתוח ל-Chrome

כלי הפיתוח ל-Chrome לסוכני AI כוללים ממשק שורת פקודה (CLI) שמאפשר לסוכן התכנות או לכם להריץ את כלי הפיתוח כפקודות מעטפת רגילות. במקום להפעיל כלים באופן דינמי דרך שרת ה-MCP, הסוכן כותב את אותן פעולות כפקודות מעטפת ויכול לשרשר אותן לסקריפט שאפשר להריץ מחדש בכל שלב. לדוגמה, הסוכן יכול ליצור תסריט כזה:

chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"

גם שרת ה-MCP וגם ה-CLI מתחברים לאותו מנוע: דימון (daemon) קבוע ברקע שמתקשר עם Chrome דרך פרוטוקול כלי הפיתוח ל-Chrome‏ (CDP). ההבדל הוא באופן שבו הנציג מגיע למנוע הזה:

  • שרת MCP: הסוכן מתחבר באמצעות קלט/פלט סטנדרטי באמצעות JSON-RPC ומתייחס לכל כלי בדפדפן כקריאה אינטראקטיבית להפעלת פונקציה.
  • ‫CLI: הנציג מריץ פקודות מעטפת ישירות מול אותו הדימון שפועל ברקע.

אתם יכולים להשתמש ב-CLI כדי:

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

בוחרים בין CLI לבין שרת MCP

הבחירה בין ה-CLI לבין שרת ה-MCP היא החלטה הנדסית שקשורה לעלות, להקשר ולתהליך העבודה.

  • עלות חלון ההקשר: כשרושמים את שרת ה-MCP, כל הגדרת כלי וסכימת JSON מוזרקות להנחיית המערכת של ה-LLM בכל שיחה. עם מיומנות ה-CLI, הנציג טוען רק סיכום Markdown קומפקטי ומשלם את עלות הטוקן כשהוא מחליט לקרוא את המיומנות המלאה וליצור את הפקודות שהוא צריך. בסשנים ארוכים של נציגים עם כמה סבבים, ההבדל הזה מצטבר גם בעלות וגם בזמן האחזור.
  • חקירה לעומת ביצוע: כלי MCP מצוינים לניפוי באגים דינמי וחקירתי, כשאתם או הנציג שלכם עדיין לא יודעים מה צריך לבדוק. כשהנציג יודע מראש על כל הכלים הזמינים, יש סיכוי גבוה יותר שהוא ישתמש בהם כדי להגיע ליעד שלו. כשהנתיב כבר ידוע, ה-CLI מאפשר להריץ רק את השלבים שצריך.
  • שימוש חוזר: אתם יכולים לשמור סקריפט CLI, להשתמש בו שוב במיומנות או להריץ אותו באופן ידני מחוץ ללולאת סוכן. אי אפשר לעשות את זה עם קריאות API לכלי MCP.
שימוש בשרת ה-MCP כשרוצים מתי כדאי להשתמש ב-CLI?
אתם חוקרים בעיה לא ידועה וצריכים את כל ארגז הכלים הזמין. אתם כבר מכירים את השלבים ורוצים לחזור עליהם בצורה מהימנה.
אתם רוצים לפתור בעיות בזמן אמת, באופן דינמי, ולבחון לעומק את הדפדפן. אתם רוצים מיומנויות סוכן חסכוניות בטוקנים או אוטומציה מבוססת-טרמינל.
הנציג פועל בסביבת פיתוח משולבת (IDE) או בלקוח עם תמיכה ב-MCP. הסביבה שלכם לא תומכת בלקוחות MCP.

כשמשתמשים ב-CLI, חשוב לזכור את הנקודות הבאות:

  • היקף הכלים: ה-CLI תומך ברוב הכלים של כלי הפיתוח ל-Chrome לסוכני AI לאוטומציה מבוססת-מעטפת. לרשימה המלאה של הפקודות, ראו חומרי עזר בנושא מיומנויות CLI.
  • הפעלה משתמעת: שרת הרקע מופעל באופן אוטומטי בשימוש הראשון. אין צורך להריץ את start,‏ status או stop לפני כל פקודה.
  • מצב מתמשך: מצב הדפדפן נשמר בין הפקודות, כך שדף שפתחתם בפקודה אחת עדיין זמין בפקודה הבאה, אלא אם סגרתם אותו באופן מפורש.
  • מזהי דפים ומזהי UID של רכיבים: רוב הפקודות מקבלות מזהה דף כארגומנט הראשון שלהן. מריצים את chrome-devtools list_pages כדי למצוא אותו, ואת chrome-devtools take_snapshot כדי לקבל את המזהים הייחודיים של הרכיבים שרוצים להשתמש בהם.
  • פורמט הפלט: כברירת מחדל, הפלט הוא טקסט פשוט דמוי Markdown. אם רוצים להשתמש בתוצאות בסקריפטים אחרים או בצינורות עיבוד נתונים של CI, צריך להעביר את הערך --output-format=json.
  • גישה לקבצים: כברירת מחדל, ל-CLI יש גישה מלאה למערכת הקבצים בשביל פרמטרים של שמירת קבצים ו-upload_file. מעבירים את --allowUnrestrictedPaths=false כדי להגביל את הגישה לקבצים לספרייה הזמנית של מערכת ההפעלה.
  • ‫Lighthouse ב-CI: אפשר להריץ את lighthouse_audit מה-CLI, אבל Lighthouse CLI העצמאי וה-GitHub Actions שלו מתאימים יותר אם אתם צריכים רק את הציונים של Lighthouse ב-CI.
  • הפשטה פשוטה יותר מסקריפטים של אוטומציה בדפדפן: בניגוד לכתיבת סקריפטים מלאים של Puppeteer או Playwright ב-JavaScript או ב-TypeScript, ממשק שורת הפקודה של כלי הפיתוח מספק ממשק API מוגבל וממוקד מאוד. תחביר המעטפת הזה קל יותר לקריאה ולתחזוקה על ידי בני אדם, וקל יותר באופן משמעותי למודלים ברמה נמוכה ליצור אותו באופן מהימן בלי הזיות.

דרישות מוקדמות

לפני שמשתמשים ב-CLI, צריך לוודא שיש לכם:

  • כלי פיתוח ל-Chrome לסוכני AI מותקנים: פועלים לפי המדריך לתחילת הדרך. תוספים ופלאגינים ספציפיים לסוכן (לדוגמה, התוסף ל-Gemini CLI) כוללים את היכולות של הסוכן לצד שרת ה-MCP.
  • ה-CLI שזמין במעטפת: ההתקנה היא שלב חד-פעמי והיא לא חלק מתהליך העבודה הרגיל של הסוכן. הוראות להתקנה
  • המיומנות chrome-devtools-cli (מותקנת עם כלי הפיתוח ל-Chrome לסוכני AI): המיומנות הזו מלמדת את הסוכן איך לכתוב סקריפטים של מעטפת או להריץ פקודות מעטפת באמצעות ה-CLI.

מבנה הפקודה

הפקודות פועלות לפי התבנית chrome-devtools <tool> [arguments] [flags]. ארגומנטים נדרשים הם תלויי מיקום, וארגומנטים אופציונליים משתמשים בדגלים. כדי לקבל פרטים, אפשר להשתמש ב---help בכל פקודה.

לדוגמה:

chrome-devtools new_page "https://example.com"      # Open a page
chrome-devtools list_pages                          # Find the page ID
chrome-devtools take_snapshot 1                     # Get element UIDs for page 1
chrome-devtools fill 1 "1_4" "hello"                # Fill an input
chrome-devtools click 1 "1_7" --includeSnapshot true
chrome-devtools list_console_messages 1 --types error
chrome-devtools take_screenshot 1 --filePath "result.png"

תרחישים לדוגמה לשימוש ב-CLI של כלי הפיתוח ל-Chrome

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

שמירת סשן ניפוי באגים כסקריפט לשימוש חוזר

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

הנחיה לדוגמה:

Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.

דוגמה להרצת נציג: הנציג בודק את שלבי הניווט, הקלט והבדיקה שהוא ביצע במהלך הסשן ומתרגם אותם לרצף של פקודות chrome-devtools, לדוגמה new_page,‏ take_snapshot,‏ fill,‏ click ו-list_console_messages. הסקריפט נשמר בתור test.sh. בפעם הבאה שתנפו באגים באזור הזה, תוכלו להפנות את הסוכן לסקריפט כדי להגיע שוב לאותו מצב, או להריץ אותו מחוץ ללולאת הסוכן כדי לנפות באגים באופן ידני.

שחזור מצב האפליקציה לפני הבדיקה

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

הנחיה לדוגמה:

Run ./scripts/checkout-flow.sh to get the browser into the payment step, then check why the "Pay now" button stays disabled after I select Google Pay.

דוגמה להרצת הנציג: הנציג מריץ את הסקריפט, שמנווט לדף התשלום, ממלא את טופס הכתובת ובוחר אפשרות משלוח. מצב הדפדפן נשמר בין הפקודות, ולכן הנציג משתמש ב-take_snapshot וב-evaluate_script באותו דף כדי לבדוק את מצב הלחצן ואת הגורמים המטפלים באירועים שמצורפים לבורר התשלומים.

בדיקות חזותיות של קבוצות באזורי תצוגה שונים

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

הנחיה לדוגמה:

Write a chrome-devtools CLI script that opens http://localhost:3000/pricing, captures a full-page screenshot at 375x667, 768x1024, and 1920x1080, and saves them to ./screenshots with the viewport size in the filename.

דוגמה להרצת נציג: הנציג כותב לולאה שקוראת ל-chrome-devtools emulate 1 --viewport "<size>" ואז ל-chrome-devtools take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png" לכל אזור תצוגה. אפשר להריץ מחדש את הסקריפט אחרי כל שינוי ב-CSS בלי לפתוח שיחה.

בדיקת עשן של תהליך שבו אין לקוח MCP זמין

בסביבות מסוימות, כמו קונטיינרים של CI או הגדרות ארגוניות נעולות, אין תמיכה בלקוחות MCP. כמעט כל טרמינל, מעטפת משנה, קונטיינר CI ו-framework של סוכן תומכים בהרצה של סקריפטים מעטפת ובקריאה של stdout, ולכן ה-CLI מתאים לבדיקות קלות במקומות האלה.

הנחיה לדוגמה:

Create a shell script that opens the sign-up page on the staging URL passed as the first argument, submits the form with test data, and exits with a non-zero code if any console errors are logged. Use --output-format=json so the script can parse the result.

דוגמה להרצת סוכן: הסוכן כותב סקריפט שמשתמש ב-new_page, ב-take_snapshot, ב-fill וב-click, ואז קורא ל-list_console_messages 1 --types error --output-format=json ומנתח את פלט ה-JSON כדי להחליט על קוד היציאה.

אריזת תהליך עבודה כמיומנות קלה

אם תהליך מסוים שימושי בכמה פרויקטים או לחברי צוות שונים, הנציג יכול להפוך את הסקריפט למיומנות. זו המיומנות של ממשק שורת הפקודה (CLI) של כלי הפיתוח: קובץ עזר קל שמאפשר לסוכן להריץ פקודות ספציפיות בדפדפן בלי לשלם את עלות הטוקנים מראש לכל הכלים.

הנחיה לדוגמה:

Turn ./scripts/checkout-flow.sh into a skill named "reproduce-checkout" with a short description of when to use it, so I can invoke it in future sessions.

דוגמה להפעלת נציג: הנציג יוצר SKILL.md עם שם, תיאור בשורה אחת של המקרים שבהם המיומנות רלוונטית והוראות שמפנות לסקריפט. בסשנים הבאים, הנציג קורא את המיומנות המלאה רק כשהמשימה תואמת לתיאור שלה.

השלבים הבאים