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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

קישורים למקור ולסקריפט של פרופילים ופונקציות בשיחות בביצועים

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

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

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

בעיה ב-Chromium: ‏ 368541957.

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

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

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

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

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

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

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

בחלונית ביצועים, כשמעבירים את העכבר מעל פריטים ב-Main track ב-Call tree או ב-Bottom-up > Heaviest stack בסרגל הצד, הפריטים האלה מודגשים והשאר מוצגים בצבעים עמומים יותר. כך תוכלו לזהות באופן ויזואלי פריטים מוטמעים במחסנית הקריאות שצורכים הכי הרבה זמן.

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

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

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

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

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

בעיה ב-Chromium: ‏ 40808541.

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

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

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

האפשרות 'עזרה מ-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).
  • בעיות: נוספו סוגים חדשים של בעיות: בעיות ב-accessibility tree ושגיאות בחתימת הודעה של SRI שמתרחשות במהלך ניתוח או אימות בשירות הרשת (crbug.com/381044049, ‏ crbug.com/347890366).<select>
  • נגישות: בכרטיסייה Elements > Styles מוצגת עכשיו מסגרת סביב רכיבים שמתבצע בהם מעבר באמצעות ניווט במקלדת (crbug.com/396311936).
  • רכיבים: יש עכשיו תמיכה בבעיות שקשורות ל-<select>, והן מסומנות בקו תחתון גלי (crbug.com/378738916).
  • רשת: הסמל של הנקודה לביטול ברירת המחדל והסמל של אזהרת קובצי Cookie מוצגים עכשיו משמאל לשם הכרטיסייה, במקום מימין (crbug.com/390556283).

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

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

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

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

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

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