מה חדש בכלי הפיתוח, גרסה 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 בחלונית רכיבים כדי לעבור הלוך ושוב בין עץ ה-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).
  • רשת: הסמלים של הנקודה לביטול הגדרות ברירת המחדל ואזהרת הקובצים קוקי מוצגים עכשיו משמאל לשם הכרטיסייה, במקום מימין (crbug.com/390556283).

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

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

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

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

  • אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
  • אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
  • שולחים ציוץ אל ‎@ChromeDevTools.
  • אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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