כלי הפיתוח ל-Chrome לסוכנים מאפשרים לסוכן לאמת פריסות רספונסיביות, לבדוק ממשקי API שמודעים למיקום ולדמות מהירויות שונות של מעבד או רשת. אתם יכולים להשתמש בכלים האלה כדי לזהות מקרים חריגים ולבצע ביקורות ביצועים בצורה יעילה יותר.
תכונות ההדמיה האלה פועלות עם כלים אחרים שמאפשרים לסוכן שלכם לבצע אינטראקציה עם האתר, כמו לחיצה על אלמנטים, מילוי טפסים וניווט בדפים.
דוגמאות למה שאפשר לדמות:
- אזור התצוגה ו-סוכן משתמש: אפשר לדמות גדלים ספציפיים של מסכים ומזהי מכשירים.
- מיקום גיאוגרפי: אפשר לזייף קואורדינטות של מיקום כדי לבדוק ממשקי API שמודעים למיקום.
- רשת ומעבד: ויסות נתונים (throttle) של תנאי הרשת ומהירות המעבד כדי לדמות מגבלות ביצועים בעולם האמיתי.
- ערכת צבעים: אפשר לעבור בין מצב בהיר למצב כהה.
כשמשתמשים באמולציה, חשוב לזכור את הנקודות הבאות:
- תמיכה במכשירים: הסוכן יכול לבצע אמולציה של כל מכשיר ברשימה של Puppeteer
KnownDevices. הפעולה הזו כוללת הדמיה של אירועי מגע באזורי תצוגה בנייד. - התנהגות של מנוע הדפדפן: הכלי מדמה מאפיינים של מכשירים, אבל הוא לא מדמה מנועי דפדפן שאינם מבוססים על Chromium או מערכות הפעלה שונות. הסוכן תמיד פועל ב-Chrome במערכת ההפעלה הנוכחית שלכם.
תרחישי שימוש באמולציית משתמש
אפשר להנחות את הסוכן לדמות סביבות ולאמת את ממשק המשתמש בשבילכם, במקום לשנות את הגודל של הדפדפנים באופן ידני, לזייף כתובות IP או להגביל את רוחב הפס של הרשתות אחרי כל שינוי בקוד.
אפשר לשלב אמולציה בתהליך הפיתוח באמצעות תהליכי העבודה האלה.
איטרציה על עיצוב רספונסיבי
דפוסי הניווט משתנים בדרך כלל באופן משמעותי בין גורמי הצורה של הנייד והמחשב. במהלך פיתוח האפליקציה, אפשר להנחות את הסוכן לוודא שהרכיבים שהוא כתב מוצגים בצורה נכונה ומספקים את אותו תוכן בכל המכשירים.
הנחיה לדוגמה:
Go to developer.chrome.com. Click the burger menu on mobile, check the top level
items and ensure the same items are available for a desktop device.
דוגמה להרצת סוכן: הסוכן פותח חלון Chrome, עובר לדף, מתחיל הדמיה ומשווה פריטים בשני אזורי התצוגה. הוא מאשר שתצוגת הנייד (תפריט המבורגר) ותצוגת המחשב (כותרת) מכילות את הקישורים הצפויים.
אימות אינטראקציות בין אזורי תצוגה
הפריסות נשברות במהלך אינטראקציות, ולא רק ב-CSS. בצילומי מסך סטטיים לרוב לא רואים באגים שקורים כשמשתמשים נוגעים בממשק המשתמש. אתם יכולים להטיל על הסוכן משימה של בדיקת תהליכי אינטראקציה ספציפיים בכמה חלונות תצוגה כדי לזהות באגים פונקציונליים נסתרים.
הנחיה לדוגמה:
Go to https://developer.chrome.com/ on mobile, tablet and desktop device, type
in a search query but don't submit it and wait for the type-ahead suggestions.
Ensure the Sign in button is visible all the time. Let me know if that's not the
case.
דוגמה להרצת סוכן: הסוכן מקליד שאילתת חיפוש ומשנה את גודל המסך לכל אחד משלושת הגדלים. בדוגמה הזו, הסוכן שלכם מזהה שבטאבלט ובנייד, סרגל החיפוש מתרחב כך שהוא ממלא את כל הרוחב של הכותרת, ומסתיר את הקישור כניסה.
יצירת אב טיפוס של תכונות שמודעות למיקום
בדרך כלל, כדי לבדוק ממשקי API שמסתמכים על המיקום הפיזי של המשתמש (כמו חיפושים של 'בסביבתי' או איתור חנויות), צריך להגדיר חיישנים באופן ידני. עכשיו אפשר להנחות את הסוכן לזייף מיקומים גיאוגרפיים ספציפיים כדי לאמת את הלוגיקה של חזית האתר והקצה העורפי בצורה חלקה.
הנחיה לדוגמה:
Go to chrome.dev/devtools-store-locator. Search for Berlin, and confirm there's
a store showing. Confirm there's no store for Washington. Finally, simulate
Paris as location and verify there are stores listed.
דוגמה להרצת סוכן: הסוכן עובר לאתר, מחפש את ברלין, ואז מוסיף באופן דינמי קואורדינטות ספציפיות של קווי רוחב ואורך כדי לדמות את פריז, לפני שהוא מקיים אינטראקציה עם התכונה שימוש במיקום שלי כדי לוודא שהחנויות הנכונות יופיעו.