דף זה תורגם על ידי Cloud Translation API.

מה חדש בכלי הפיתוח בגרסה 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

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