תאריך פרסום: 13 בנובמבר 2024
נניח שאתם בודקים נתיב ביצועים ואתם רוצים להדגיש אזור ספציפי, כמו המשימה הארוכה ביותר או קטע עבודה מיותר. אולי רצית לכתוב הערות לשימוש עתידי או לשתף את הממצאים שלך עם עמית. מה הדרך הטובה ביותר לעשות זאת?
כמובן, אפשר להדפיס את המעקב על פיסת נייר ענקית ולצייר ולכתוב את ההערות באופן ידני, או להשתמש בתוכנה של צד שלישי כדי לצייר הערות על צילום מסך של מעקב. (אבל זו הייתה הדרך הטובה ביותר עד עכשיו).
כחלק מהמחויבות של הצוות שלנו לשיפור תהליכי העבודה של המפתחים, אנחנו שמחים להציג חלופה לאפשרויות האלה: היכולת להוסיף הערות ישירות למעקב בחלונית ביצועים.
עכשיו אפשר להוסיף הערות למעקבים במקום, לנווט בהערות בקלות ואפילו לשמור אותן ישירות בקובץ המעקב. כך שיתוף התובנות המודגשות פשוט כמו שליחת קובץ, בלי צורך בכלים חיצוניים או בפתרונות חלופיים. הערות יכולות לעזור לכם לא רק לנפות באגים בביצועים, אלא גם להבין במהירות מה קורה, או לשפר את ההבנה של הקולגה שלכם בלי הרבה הודעות הלוך ושוב.
יש שלושה סוגים של הערות:
טווחי זמן עם הערות: הוספת תוויות לכל טווח זמן בציר הזמן
הערות על רשומות: הוספת תווית לכל רשומה בציר הזמן
קישורים בין רשומות: חיבור של שתי רשומות באמצעות חץ כדי להציג את הקשר ביניהן
נבחן כל סוג של הערה ונראה אילו תרחישים יכולים להתרחש שבהם הערות כאלה יהיו שימושיות.
טווחי זמן עם הערות
תהליך עבודה נפוץ ב-DevTools הוא הקלטת נתיב כדי לנפות באגים באינטראקציה איטית. תצוגת המעקב עשויה להיראות מרתיעה בהתחלה, אבל ככל שתעמיקו בטיפול באירועים ספציפיים ובמקבצי הקריאה, היא תתחיל להיראות הגיונית. כדי להקל על העבודה עם תצוגת המעקב, אפשר ליצור הערה ולתייג בה את האופן שבו בדרך כלל מנוצל מקטע זמן מסוים. לדוגמה, כדאי להוסיף הערה לטווח הזמן כדי שממשק המשתמש יתעדכן באופן משמעותי אחרי אינטראקציה של משתמש.
כדי להוסיף הערה לטווח זמן: לוחצים לחיצה ארוכה על Shift וגוררים מתחילת האינטראקציה עד לעדכון בממשק המשתמש. לאחר מכן, מקלידים תווית כדי ליצור את ההערה. אם הטווח שנבחר לא נכון, לוחצים במקום אחר לפני שמתחילים להקליד כדי לבטל אותו. לחלופין, כדי לערוך את התווית של הערה, לוחצים עליה לחיצה כפולה. בשלב הזה אי אפשר לשנות את טווח הזמן של הערה קיימת. אם מסגרת הזמן שגויה, מוחקים את ההערה ויוצרים הערה חדשה.
התווית הזו תאפשר לכם לראות בצורה ברורה יותר את כל העבודה שצריך לבצע לפני שהשינוי יהיה גלוי למשתמשים, וכך תוכלו למקד את ניפוי הבאגים בהתאם.
רשומות עם הערות
כדי שהמשתמשים יבחינו בשינוי, אפשר גם להוסיף הערה למשימה שאחראית למעבר באמצעות תווית כניסה.
כדי ליצור תווית לכניסה: לוחצים לחיצה כפולה על הכניסה שנבחרה ומקלידים את התווית, או לוחצים לחיצה ימנית על הכניסה ובוחרים באפשרות 'תיוג הכניסה' בתפריט ההקשר. כדי לערוך את התווית של הערה, לוחצים לחיצה כפולה על הכניסה או על התווית. לחלופין, בוחרים באפשרות 'הוספת תווית' מתפריט ההקשר.
התיאורים האלה של הרשאות הגישה עוזרים לכם לזהות בקלות את העבודה שחשובה (או לא חשובה) לאינטראקציה ואת משך הזמן הנדרש להשלמת העבודה.
חיבורי רשומות
הדרך השלישית שבה אפשר להוסיף הערות למעקב היא לצייר את החיבור בין האינטראקציה לבין המשימה הארוכה שאחראית למעבר.
כדי ליצור חיבור בין רשומות: לוחצים לחיצה כפולה על הרשומה שרוצים לחבר לרשומה אחרת, ואז לוחצים על החץ שמופיע משמאל לרשומה הזו. לאחר מכן, לוחצים על הרשומה שאליה רוצים לקשר את האירוע. לחלופין, לוחצים לחיצה ימנית על הרשומה ובוחרים באפשרות 'קישור רשומות' מתפריט ההקשר של הרשומה.
לכן, למרות שהאינטראקציה עצמה הסתיימה, אפשר להשתמש בסוג הזה של הערה כדי להראות בצורה ברורה יותר איך היא קשורה למשימות הארוכות הבאות שסוף סוף חוסמות את ממשק המשתמש.
מחיקת אנוטציות והסתרתן
אפשר למחוק במהירות את כל ההערות בתצוגת רשימת ההערות בסרגל הצד. כשמעבירים את העכבר מעל הערה מופיע סמל של פח אשפה . לוחצים על הסמל הזה כדי למחוק את ההערה.
לחלופין, כדי למחוק תוויות של רשומות והערות על קישורים בין רשומות שמשויכות לאירוע ספציפי, לוחצים לחיצה ימנית על האירוע ובוחרים באפשרות 'מחיקת ההערות'. אפשר גם למחוק הערות עם תוויות על ידי הסרת התווית ושמירת ההערות.
אם רוצים להסתיר את ההערות בלי למחוק אותן כדי שלא יפריעו לבדיקה של המעקב, פשוט מסמנים את התיבה 'הסתרת ההערות' שבתחתית סרגל הצד של ההערות. ההעדפה הזו תישמר. כשאתם טוענים נתיב עם הערות כשההגדרה הזו מופעלת, ההערות יישארו מוסתרות עד שתבטלו את הסימון בתיבה.
שמירה או טעינת נתוני מעקב עם הערות
מצוין, הוספת את כל ההערות האלה כדי לעזור לך ולאחרים להבין את המעקב. מה השלב הבא?
אין צורך לצלם צילומי מסך של המעקב כדי לשלוח אותם לעמית, כמו בימים ההם, לפני ההערות. פשוט שומרים את הקובץ עם ההערות ושולחים אותו. זהו – הם יוכלו להעלות את הקובץ לחלונית ביצועים ולראות את כל ההערות שהוספתם בהקשר של המעקב, או אפילו להוסיף הערות ולשלוח אותן חזרה אליכם.
DevTools ישמור גם סוגים אחרים של התאמות אישיות בתצוגת המעקב. לדוגמה, אפשר לבודד אזור עניין על ידי הגדלת התצוגה והגדרת נתיב ניווט, או להסתיר רשומות בסטאקים של קריאות לא רלוונטיות. כל ההגדרות האלה יישמרו בקובץ המעקב, כך שיהיה קל יותר לשתף פעולה בניפוי באגים בביצועים. בעזרת כל ההתאמות האישיות האלה, אפשר להפנות את תשומת הלב לדברים החשובים ביותר תוך מתן ההקשר של כל המעקב האינטראקטיבי – בניגוד לצילום מסך.
כדי לשמור את ההערות וההתאמות אישיות האחרות, לוחצים על האפשרות שמירת המסלול מתחת לסמל ההורדה . כשעומסים מעקב, הוא מכיל את כל ההתאמות האישיות האלה. שמירה עם הערות היא אפשרות ברירת המחדל, אבל אם רוצים לשמור רק את קובץ המעקב הגולמי, בוחרים באפשרות שמירת המעקב ללא הערות.
סיכום
יכול להיות שזה נראה כמו הרבה מידע לספוג, אבל אל דאגה! תמיד אפשר למצוא הוראות ליצירת הערות בכרטיסייה 'הערות' בסרגל הצד של החלונית ביצועים. הכרטיסייה הזו מספקת הוראות כשאין הערות, ומציגה תצוגת רשימה של ההערות אחרי שיוצרים אותן.
כך, הערות בחלונית ביצועים מאפשרות למפתחים לזהות רגעים קריטיים בתוך מעקב, ולהוסיף הקשר ותובנות בהתאמה אישית. כך תהליך הניתוח יתבצע בצורה יעילה יותר, וקל יותר לשתף את האופטימיזציות של הביצועים ולעבוד עליהן בשיתוף פעולה. כדאי לנסות את ההערות בחלונית 'ביצועים' ולספר לנו מה דעתכם. אם יש לך משוב, נשמח לקרוא את התגובות שלך בבעיה הציבורית.
נגיד שלום לצורך בכלים חיצוניים ונשמח לקבל תהליך עבודה יעיל יותר.