מה חדש בכלי הפיתוח, גרסה 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.

התמונות שלפני ואחרי השיפור של מצבים ריקים בחלוניות Network ו-Search.

האפשרות 'שאילתת 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

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

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

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