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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

תובנות חדשות לגבי הביצועים

בכרטיסייה ביצועים > תובנות מוצגות תובנות חדשות:

  • HTTP מודרני שמדגיש בקשות שמשתמשות בפרוטוקול HTTP/1.1 הישן.
  • שימוש בזמני אחסון יעילים במטמון: התכונה הזו מדגישה בקשות שיכולות להפיק תועלת מזמני אחסון ארוכים יותר במטמון, ומאפשרת לקצר את זמן הטעינה של האתר.
  • תצוגת גופן שבה מוצגות הערכות לחיסכון בזמן אם תבצעו אופטימיזציה של font-display.

שלוש תובנות חדשות בכרטיסייה 'תובנות'.

לחיצה להדגשה

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

תזמוני שרת בסיכום של בקשות רשת

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

הטבלה 'Server timings' (תזמוני שרת) בסיכום של בקשת רשת.

החלונית ביצועים מקבלת את הנתונים מהכותרת Server-Timing של תגובת ה-HTTP.

סינון קובצי Cookie בקטע 'פרטיות ואבטחה'

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

המסנן בטבלה 'קובצי Cookie של צד שלישי'.

גדלים ביחידות של קילו-בייט בטבלאות בכל החלוניות

כדי לשמור על אותן יחידות באותו ההקשר, בטבלאות בחלוניות Network ו-Memory ובטבלה 1p / 3p בPerformance > Summary, כל הגדלים מוצגים עכשיו ב-kB. כך אפשר להשוות ישירות בין מספרים באותה עמודה ובחלוניות שונות, במקום לעקוב אחרי יחידות של MB לעומת kB לעומת B.

הנתונים לפני ואחרי איחוד יחידות הגודל.

ההשלמה האוטומטית תומכת ב-corner-shape וב-corner-*-shape בקטע Elements > Styles

ההשלמה האוטומטית בElements > Styles יכולה להציע עכשיו את הערכים המתאימים למאפיינים corner-shape ו-corner-*-shape.

אפשרויות ההשלמה האוטומטית של המאפיין corner-shape.

בעיה ב-Chromium: 402346406.

ניסיוני: הדגשת בעיות ברכיבים ובמאפיינים ב-DOM

.

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

הדגשה של בעיה ב-DOM בעץ ה-DOM עם תיאור קצר וקישור לחלונית הבעיות, לפני ואחרי.

בשלב הזה, בחלונית Elements מודגשים צאצאים לא חוקיים של <select>, הגדרות ARIA לא תואמות ומאפייני ARIA לא תקינים.

בעיה ב-Chromium: ‏ 378738916.

‫Lighthouse 12.5.0

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

השינוי הבולט ביותר בגרסה הזו הוא ש-legacy-javascript משתמש עכשיו ב-Baseline במקום ב-esmodules. הרשימה המלאה של השינויים

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

בעיה ב-Chromium: 40543651.

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

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

  • ביצועים > תובנות > עץ התלות ברשת: עכשיו מוצג הזמן של כל בקשות הרשת בעץ הרשת (400708304).
    • עץ תלות ברשת: עכשיו מוצג הזמן של כל בקשות הרשת בעץ הרשת (400708304).
  • אנימציות: תוקן באג שגרם לאלמנטים מנותקים להופיע בחלונית זיכרון בגלל אנימציות שנתפסו 400635410.
  • כלי ההקלטה: עכשיו מוצג אותו דו-שיח אישור כמו בהדבקת קוד כשמפעילים הקלטה בפעם הראשונה.
  • שכבות: עכשיו מוצג המספר הכולל של השכבות והזיכרון הכולל של כל השכבות שגלויות בסרגל הסטטוס בתחתית.
  • זיכרון: שיפרנו את האתחול של תמונת מצב של ה-Heap על ידי הרצת משימות במקביל בין שני עובדים במקום אחד (42203857).
  • בעיות: נוסף דיווח על שגיאות CORS בגישה לרשת מקומית (LNA) (395895368).
  • נגישות:
    • הסברים קצרים: מוצגים עכשיו בלחיצה על מקש קיצור במקום במיקוד (396311936).
    • ‫Elements (רכיבים) > Styles (סגנונות): עכשיו אפשר להשתמש בפונקציה var() באמצעות המקלדת. כלומר, אפשר לבחור באפשרות --custom-property ולהקיש על Enter כדי לעבור ליעד הקישור שלה (401212692).

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

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

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

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

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

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