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