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

Sofia Emelianova

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

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

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

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

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

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

הדגשה של בעיה ב-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.
כלי ההקלטה: עכשיו מוצג אותו דו-שיח אישור כמו בהדבקת קוד כשמפעילים הקלטה בפעם הראשונה.
שכבות: עכשיו מוצג המספר הכולל של השכבות והזיכרון הכולל של כל השכבות שגלויות בסרגל הסטטוס בתחתית.
זיכרון: שיפרנו את האתחול של תמונת מצב של הערימה על ידי הפעלת משימות במקביל בין שני עובדים במקום להשתמש בעובד אחד (42203857).
בעיות: נוסף דיווח על שגיאות CORS בגישה לרשת מקומית (LNA) (395895368).
נגישות:
- הסברים קצרים: עכשיו הם מופיעים בלחיצה על מקש קיצור במקום בהתמקדות (396311936).
- ‫Elements (רכיבים) > ‏Styles (סגנונות): עכשיו אפשר להשתמש בפונקציה var() באמצעות המקלדת. כלומר, אפשר לבחור באפשרות --custom-property ולהקיש על Enter כדי לעבור ליעד הקישור שלה (401212692).

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

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

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

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

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