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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

לחיצה כדי להדגיש

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

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

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

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

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

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

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

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

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

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

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

ההשלמה האוטומטית תומכת ב-corner-shape וב-corner-*-shape בקטע 'רכיבים' > 'סגנונות'

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

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

בעיה ב-Chromium: 402346406.

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

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

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

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

בעיה ב-Chromium: ‏ 378738916.

Lighthouse 12.5.0

בחלונית Lighthouse פועלת עכשיו גרסת Lighthouse 12.5.0.

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

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

בעיה ב-Chromium: 40543651.

רגעי שיא שונים

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

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

מורידים את הערוצים של התצוגה המקדימה.

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.