נשמע מוכר? אתם לנפות באגים בבעיה בביצועים בכלי הפיתוח ל-Chrome, אבל בגלל כמויות המידע המדהימות בחלונית הביצועים, קשה להתמקד רק בחלקים הרלוונטיים ביותר שבהם ניתן להתמקד. בין אורך ציר הזמן, עומק תרשים הלהבות והיקף המגוון של מסלולים שונים של נתונים, הניווט באתר יכול להיות מאתגר. לוח הביצועים הוא כלי חזק מאוד, אבל לא צריך להקריב את נוחות השימוש בו כדי ליהנות מהיתרונות שלו.
כחלק מהתוכנית שלנו לשיפור הכלים לבדיקת הביצועים של Chrome, השקנו לאחרונה שלוש תכונות חדשות שמטרתן לצמצם את צפיפות המידע ולעזור למפתחים להתאים אישית את תהליכי העבודה שלהם:
בפוסט הזה נבחן לעומק כל אחת מהתכונות האלה ונראה איך אפשר להשתמש בהן כדי להתמקד רק במידע החשוב ביותר.
הסתרת חלקים לא רלוונטיים בציר הזמן
ביצועי האתר פועלים בקנה מידה של אלפיות השנייה, כך שגם אם הקלטת הביצועים נמשכת רק כמה שניות, יש מספיק הזדמנויות לאבד את המיקום.
בגרסה 122 של Chrome, הוספנו את היכולת ליצור נתיבי ניווט. התכונה הזו מאפשרת לך לצמצם את גבולות ציר הזמן כך שניתן יהיה להגדיל את התצוגה או להזיז את התצוגה בתוך אזור עניין שהגדרת. הגבלת ציר הזמן בדרך הזו יכולה להיות שימושית במיוחד אם אתם מנסים לאתר באגים בבעיות שקשורות לתגובה מהירה, למשל, כדי שתוכלו להתמקד באינטראקציה אחת או במשימה ארוכה עם בעיה.
בצילום המסך הקודם מוצג תקריב של הסקירה הכללית של ציר הזמן, שבו רואים את הפעילות הראשית בשרשור, כמו הפעלת סקריפט ועבודה במצגת. כשמקישים עליו, מופיע לחצן חדש שמגדיר את גבולות ציר הזמן לחלון הנוכחי. הלחצן מסומן לפי רוחב חלון הזמן, באלפיות שנייה, והסמל . נתיבי הניווט נמצאים מעל לסקירה הכללית של ציר הזמן, וכל אחד מהם מסומן לפי גודל חלון הזמן שלו.
כדי להשתמש בתכונה הזו:
- משנים את מרחק התצוגה ומזיזים את ציר הזמן לאזור העניין.
- לוחצים על סמל הזכוכית המגדלת בסקירה הכללית של ציר הזמן כדי לקבע את ציר הזמן ולהגדיר נתיב ניווט.
- חוזרים על הפעולה לפי הצורך כדי להגדיל את האזור הרצוי בתוך אזור עניין.
- לוחצים על נתיב הניווט כדי לחזור לאזורי עניין קודמים או לטווח המלא של ציר הזמן.
חיתוך ציר הזמן עוזר לוודא שלעולם לא תגללו בטעות מחוץ לגבולות אל חלק לא רלוונטי בציר הזמן. עם זאת, אם צריך, אפשר ללחוץ על קורות הלחם כדי להתרחק שוב. יתרון נוסף הוא שהסקירה הכללית של ציר הזמן תישאר מותאמת לטראקים הבאים. כך יהיה קל יותר לזהות הזדמנויות לשיפור הביצועים כמו הזרמות מחדש מאולצות ולזהות את שורש הבעיות שלהן בתרשים הלהבות.
הסתרת חלקים לא רלוונטיים בתרשים הלהבות
ניתוח הפעילות של ה-thread הראשי הוא לא עניין פשוט. החלק הזה בחלונית 'ביצועים' נקרא תרשים הלהבות, כי סטאקי הקריאות יכולים להיות ארוכים ודקים. במקרים קיצוניים, יכול להיות שהסטאקים האלה יהיו לא נוחים לשימוש, כך שיהיה קשה להבין את הכול ולהתמקד במה שאתם מנסים לבצע אופטימיזציה שלו.
החל מגרסה 124 של Chrome, אפשר להחליט בדיוק אילו רשומות בתרשים הלהבה יהיו מוסתרות, כדי להתמקד במידע שהכי שימושי לכם.
כשלוחצים לחיצה ימנית על פונקציה בתרשים הלהבות, מופיע תפריט הקשר עם מספר אפשרויות להסתרת רשומות:
- הסתרת פונקציה: הסרת הפונקציה שנבחרה מתרשים הלהבות. צאצאים יופיעו למעלה מיד לאחר תפקיד ההורה.
- הסתרת הצאצאים: גיזום של תרשים הלהבה לפי הפונקציה שנבחרה, והסתרה של כל הצאצאים שלה.
- הסתרת צאצאים חוזרים: הסרת כל המופעים של הפונקציה שנבחרה משאר תרשים הלהבות.
יש גם כמה מקשי קיצור שימושיים שאפשר להשתמש בהם כשבוחרים פונקציה:
- H: הסתרת הפונקציה שנבחרה
- C: הסתרת הצאצאים של הפונקציה שנבחרה
- R: הסתרת מופעים של הפונקציה שנבחרה בשלב מאוחר יותר במקבץ
- U: הצגת הצאצאים המוסתרים של הפונקציה שנבחרה
הסתרה לצמיתות של סקריפטים לא רלוונטיים
האפשרות הוספת סקריפט לרשימת קטעי הקוד להתעלמות מסתירה את הפונקציה שנבחרה מתרשים הלהבות, וגם את כל שאר הפונקציות שמוגדרות באותו קובץ סקריפט. הסקריפט מתווסף גם לרשימת הפריטים להתעלמות, שבה הכלי לניפוי באגים ב-DevTools משתמש כדי לדלג על פונקציות ולהתעלם מהחרגות שמקורן בסקריפט.
סקריפטים שנוספו לרשימת ההתעלמות נשמרים, כך שהם ימשיכו להסתתר בתרשים הלהבה בשרטוטים חדשים. סקריפטים שלא נמצאים בשליטתך יכולים להיות מועמדים טובים לרשימת קטעי הקוד להתעלמות. לעומת זאת, הסתרת פונקציות ספציפיות היא זמנית ומתבצעת בניתוח הנוכחי, והיא תלויה יותר במצב. לדוגמה, יכול להיות שתרצו להסתיר סטאק מסורבל של קריאות פונקציה רפלקסיביות כדי שיהיה קל יותר לעבוד עם המעקב.
כדי להחזיר את רשימת ההתעלמות או כל פונקציה מוסתרת אחרת בתרשים הלהבה למצב הקודם, אפשר להשתמש בתפריט ההקשר כדי לאפס את הצאצאים של הפונקציה שנבחרה או לאפס את כל הפונקציות המוסתרות לאורך המעקב. לפונקציות עם צאצאים מוסתרים נוספות הערות עם הסמל ▼, ומאפס גם את הצאצאים כשלוחצים עליהם.
כל עומק או מורכבות מיותרים שאפשר להסיר מתרשים הלהבות הופכים אותו לשימושי הרבה יותר. במקרה הצורך, היכולת להתאים אישית את הפריטים שאתם רואים היא שיפור ארגונומי, כדי שתוכלו להתמקד במידע המשמעותי ביותר למשימה הרלוונטית.
הסתרת טראקים לא רלוונטיים
הפעילות של הליבה היא רק טראק אחד בחלונית 'ביצועים'. מסלולים בחלונית הביצועים מציגים באופן חזותי את הפעילות של תהליך, וכולם מותאמים לציר זמן משותף כדי לסייע בניפוי באגים. בנוסף לטראק ראשי, יש טראקים נפרדים לשאר הפריימים המשניים, לשרשור ולעוזרים (workers) שבהם הדף משתמש, וגם לטראקים רשת, פריימים, אנימציות ואינטראקציות. עוד יותר טראקים מסמנים את הפעילות של תהליכים ברמה נמוכה יותר ב-Chrome, כמו IO, GPU ו-Compositor. זה הרבה מידע! עם זאת, ברוב תהליכי העבודה של ביצועים, אתם צריכים להתמקד רק במידע מכמה טראקים בכל פעם.
החל מגרסה 125 של Chrome, יש מצב תצורה חדש שמאפשר לך להסתיר טראקים שלא נחוצים או לשנות את הסדר שלהם לפי רצונך. לדוגמה, אם אתם מבצעים אופטימיזציה של אינטראקציה איטית, תוכלו להסתיר את כל הפריטים חוץ מהמסלולים אינטראקציות, ראשי וGPU.
כדי לערוך את הטראקים, לוחצים לחיצה ימנית על שם הטראק הרצוי ובוחרים באפשרות הגדרת טראקים…. מצב ההגדרה ייפתח, ותוכלו להציג, להסתיר או לסדר מחדש טראקים ספציפיים. לוחצים על הלחצן סיום הגדרת הטראקים כדי לשמור את ההעדפות.
הגדרת מסלולים מאפשרת לכם לקבוע איך חלונית הביצועים מציגה מידע חשוב לתהליך העבודה. ניתן להשתמש בהגדרות האלה כדי להסתיר את הפעילות מתהליכים לא קשורים, ולהזיז את המסלולים בדרך שתאפשר לכם לגשת בצורה הקלה ביותר לנתונים שדרושים לכם.
סיכום
שלוש התכונות האלה מספקות אמצעי בקרה ארגונומיים חדשים וחזקים להתאמה אישית של תהליכי העבודה שלכם בנושא ביצועים. אם תשתמשו בתכונות האלה ותפחיתו את כמות הרעשים, יהיה לכם קל יותר למצוא את מה שאתם מחפשים ולהבין את הנתונים.
נשמח לשמוע מה עובד טוב או איך אפשר לשפר את החוויה שלך. אם יש לך שאלות או משוב כללי, אפשר לפנות אל @ChromeDevTools. אם משהו לא עובד או שיש לכם הצעה לתכונות חדשות, תוכלו להשאיר תגובה בבעיה הזו שעדיין לא נפתרה.
זוהי רק ההתחלה של היוזמה שלנו לשיפור הכלים לשיפור הביצועים ב-Chrome, ואנחנו שמחים לשתף את כל מה שאנחנו מבשלים כדי להפוך את חלונית הביצועים לקלה יותר ויעילה יותר מאי פעם. הפוסט הבא שלנו, שבו נציג את הקבוצה הבאה של התכונות, יפורסם כאן בבלוג Chrome למפתחים. בינתיים, מומלץ להיכנס לדף מה חדש ב-Chrome כדי להתעדכן בכל מה שחדש בכלי הפיתוח וב-Chrome.