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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

לחיצה להדגשה

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

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

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

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

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

סינון קובצי 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

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

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

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