מה חדש בכלי הפיתוח, גרסה 135 של Chrome

Sofia Emelianova
Sofia Emelianova
GitHub

שיפורים בחלונית הביצועים

הגרסה הזו כוללת מספר שיפורים בחלונית ביצועים.

קישורים למקור ולסקריפט של פרופילים ושל קריאות לפונקציות בדף 'ביצועים'

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

התמונה שלפני ואחרי הוספת המקור והמוצא לכרטיסייה 'סיכום'.

בנוסף, כשמעבירים את העכבר מעל אירועים בטראקים Network ו-Main, מוצגים שמות של צדדים שלישיים, אם יש כאלה, בתיאורי הכלים.

בעיה ב-Chromium: ‏ 368541957.

תמיכה בנתונים מהשטח של המדד 'LCP לפי שלב'

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

התובנה 'LCP לפי שלב' תומכת בנתונים של שדות לפני ואחרי הוספתם.

תובנה לגבי 'עץ תלות ברשת'

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

כאן מוסבר איך להימנע משרשור של בקשות קריטיות.

הדגשה של ה-Call stack הכבד ביותר

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

תצוגת עץ נגישות ברכיבים

התצוגה של עץ הנגישות במסך מלא מופעלת עכשיו כברירת מחדל בחלונית Elements.

בעבר, יכולתם לעיין בעץ נגישות נפרד בכרטיסייה Elements > Accessibility. עכשיו אפשר ללחוץ על הלחצן מעבר לתצוגת עץ הנגישות בפינה השמאלית העליונה של עץ ה-DOM בחלונית Elements כדי לעבור הלוך ושוב בין ה-DOM לבין עץ הנגישות של הדף המלא. כך תוכלו לבדוק אותם ואת הקשר ביניהם בקלות רבה יותר.

התצוגה לפני ואחרי הפעלת התצוגה של עץ הנגישות במסך מלא כברירת מחדל .

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

בעיה ב-Chromium: 40808541.

שיפור המצבים הריקים בחלוניות שונות

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

התצוגה לפני ואחרי השיפור של מצבים ריקים בחלוניות 'רשת' ו'חיפוש'.

האפשרות 'עזרה מ-AI' הועברה לחלק התחתון של התפריט

האפשרות Ask AI נמצאת עכשיו בחלק התחתון של התפריטים הנפתחים, במקום בחלק העליון.

התפריט הנפתח לפני ואחרי העברת האפשרות 'עזרה מ-AI' לחלק התחתון של התפריט.

אתם מוזמנים לשלוח משוב על החלונית AI assistance בכתובת crbug.com/364805393.

‫Lighthouse 12.4.0

החלונית Lighthouse מריצה עכשיו את Lighthouse 12.4.0.

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

כדי ללמוד את היסודות של השימוש בחלונית Lighthouse בכלי הפיתוח, אפשר לעיין במאמר Lighthouse: אופטימיזציה של מהירות האתר.

בעיה ב-Chromium: 40543651.

מידע חשוב נוסף

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

  • ביצועים > סיכום: החלפנו את שני הקווים Total time ו-Self time בקו אחד Duration שמוצגות בו גם (self time) בסוגריים, אם יש כאלה (crbug.com/395572753).
  • בעיות: נוספו סוגים חדשים של בעיות: <select> בעיות בעץ הנגישות ושגיאות בחתימת ההודעה של SRI שמתרחשות במהלך ניתוח או אימות בשירות הרשת (crbug.com/381044049, ‏ crbug.com/347890366).
  • נגישות: בכרטיסייה Elements > Styles מוצג עכשיו מתאר של רכיבים שאתם עוברים ביניהם באמצעות ניווט במקלדת (crbug.com/396311936).
  • רכיבים: יש עכשיו תמיכה בבעיות שקשורות ל-<select>, והן מסומנות בקו תחתון גלי (crbug.com/378738916).
  • רשת: הסמל של הנקודה לביטול ברירת המחדל והסמל של אזהרת קובצי Cookie מוצגים עכשיו משמאל לשם הכרטיסייה, במקום מימין (crbug.com/390556283).

הורדת ערוצי התצוגה המקדימה

מומלץ להשתמש ב-Chrome Canary,‏ Dev או Beta כדפדפן ברירת המחדל לפיתוח. ערוצי התצוגה המקדימה האלה מאפשרים לכם לגשת לתכונות העדכניות ביותר של DevTools, לבדוק ממשקי API מתקדמים של פלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים שלכם ייתקלו בהן.

יצירת קשר עם הצוות של כלי הפיתוח ל-Chrome

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

מה חדש בכלי הפיתוח

רשימה של כל הנושאים שמופיעים בסדרת המאמרים מה חדש בכלי הפיתוח.