כלים חדשים לניפוי באגים ב-CSS Flexbox
בכלי הפיתוח יש עכשיו כלים ייעודיים לניפוי באגים ב-CSS flexbox.
כשמאפיינים display: flex או display: inline-flex מוחלים על רכיב HTML בדף, אפשר לראות את התג flex לצד הרכיב בחלונית Elements. לוחצים על התג כדי להפעיל או להשבית את התצוגה של שכבת-על גמישה בדף.
בחלונית סגנונות, אפשר ללחוץ על הסמל החדש לצד display: flex או display: inline-flex כדי לפתוח את העורך Flexbox. עורך Flexbox מאפשר לערוך במהירות את מאפייני ה-Flexbox. רוצה לנסות?
בנוסף, בחלונית פריסה יש קטע Flexbox שבו מוצגים כל רכיבי ה-Flexbox בדף. אפשר להפעיל או להשבית את שכבת העל של כל אלמנט.
בעיות ב-Chromium: 1166710, 1175699
שכבת-על חדשה של דוח ה-Web Vitals הבסיסיים
שכבת-העל החדשה של מדדי הליבה לבדיקת חוויית המשתמש באתר מאפשרת לכם לראות ולמדוד את ביצועי הדף בצורה טובה יותר.
מדדי הליבה לבדיקת חוויית המשתמש באתר הם יוזמה של Google שמטרתה לספק הנחיות אחידות לגבי אותות איכותיים שחיוניים למתן חוויית משתמש מעולה באינטרנט.
פותחים את תפריט הפקודות, מריצים את הפקודה הצגת עיבוד ומסמנים את תיבת הסימון Core Web Vitals.
שכבת-העל מציגה כרגע:
- המהירות שבה נטען רכיב התוכן הכי גדול (LCP): מודד את ביצועי הטעינה. כדי לספק חוויית משתמש טובה, ה-LCP צריך להתרחש תוך 2.5 שניות מהרגע שבו הדף מתחיל להיטען.
- השהיה לאחר קלט ראשוני (FID): מודד את האינטראקטיביות. כדי לספק חוויית משתמש טובה, ה-FID בדפים צריך להיות פחות מ-100 אלפיות השנייה.
- מדד יציבות חזותית (CLS): מודד את היציבות החזותית. כדי לספק חוויית משתמש טובה, ה-CLS בדפים צריך להיות פחות מ-0.1.
בעיה ב-Chromium: 1152089
עדכונים בכרטיסייה 'בעיות'
העברנו את מספר הבעיות לסרגל הסטטוס של המסוף
כדי לשפר את הנראות של אזהרות לגבי בעיות, הוספנו עכשיו כפתור חדש לספירת בעיות בסרגל הסטטוס של המסוף. הפעולה הזו תחליף את הודעת הבעיה ב-Console.
בעיה ב-Chromium: 1140516
דיווח על בעיות בפעילות Trusted Web
בכרטיסייה 'בעיות' מדווחים עכשיו על בעיות בפעילות מהימנה באינטרנט. המטרה היא לעזור למפתחים להבין ולפתור את הבעיות שקשורות לפעילות מהימנה באינטרנט באתרים שלהם, וכך לשפר את האיכות של האפליקציות שלהם.
פותחים פעילות Trusted Web. לאחר מכן, לוחצים על הלחצן מספר הבעיות בסרגל הסטטוס של המסוף כדי לפתוח את הכרטיסיות בעיות ולראות את הבעיות. בהרצאה הזו של אנדרה אפשר לקבל מידע נוסף על יצירה ופריסה של פעילות מהימנה באינטרנט.
בעיה ב-Chromium: 1147479
עיצוב מחרוזות כליטרלים של מחרוזות JavaScript (תקינים) במסוף
עכשיו, המסוף מעצב מחרוזות כספרות מחרוזת תקפות של JavaScript במסוף. בעבר, המסוף לא ביטל את המשמעות של מרכאות כפולות כשמחרוזות הודפסו.
בעיה ב-Chromium: 1178530
חלונית חדשה של Trust Tokens בחלונית האפליקציות
בכלי הפיתוח מוצגים עכשיו כל הטוקנים הזמינים של אימות בהקשר הגלישה הנוכחי בחלונית החדשה Trust Tokens, בחלונית Application.
Trust Token הוא API חדש שעוזר להילחם בהונאות ולהבחין בין בוטים לבין בני אדם אמיתיים, בלי מעקב פסיבי. איך מתחילים לעבוד עם Trust Tokens
בעיה ב-Chromium: 1126824
אמולציה של לוח הצבעים לתכונת מדיה ב-CSS
שאילתת המדיה color-gamut מאפשרת לבדוק את טווח הצבעים המשוער שנתמך בדפדפן ובמכשיר הפלט. לדוגמה, אם שאילתת המדיה color-gamut: p3 תואמת, זה אומר שהמכשיר של המשתמש תומך במרחב הצבעים Display-P3.
פותחים את תפריט הפקודות, מריצים את הפקודה הצגת עיבוד ואז מגדירים את התפריט הנפתח אמולציה של לוח הצבעים לתכונת מדיה ב-CSS.
בעיה ב-Chromium: 1073887
שיפור כלי Progressive Web Apps
במסוף של כלי הפיתוח מוצגת עכשיו הודעת אזהרה מפורטת יותר לגבי האפשרות להתקין אפליקציות מסוג Progressive Web App (PWA), עם קישור לתיעוד.
אם התיאור במניפסט חורג מ-324 תווים, מוצגת עכשיו הודעת אזהרה בחלונית Manifest.
בנוסף, בחלונית Manifest מוצגת עכשיו הודעת אזהרה אם צילום המסך של ה-PWA לא עומד בדרישות. מידע נוסף על המאפיין screenshots (צילומי מסך) של PWA והדרישות שלו
בעיה ב-Chromium: 1146450, 1169689, 965802
עמודה חדשה של Remote Address Space בחלונית הרשת
בעמודה Remote Address Space החדשה בחלונית 'רשת' אפשר לראות את מרחב כתובות ה-IP של הרשת של כל משאב רשת.
בעיה ב-Chromium: 1128885
שיפורי ביצועים
הביצועים של טעינת הדף עם כלי הפיתוח פתוחים השתפרו. במקרים קיצוניים מסוימים, ראינו שיפורים בביצועים של פי 10.
כלי הפיתוח אוספים עקבות מחסנית ומצרפים אותם להודעות במסוף או למשימות אסינכרוניות, כדי שהמפתחים יוכלו להשתמש בהם בהמשך במקרה של בעיה. מכיוון שהאיסוף הזה צריך להתבצע באופן סינכרוני במנוע הדפדפן, איסוף איטי של מעקב אחר מחסנית יכול להאט משמעותית את הדף כשכלי הפיתוח פתוחים. הצלחנו לצמצם באופן משמעותי את התקורה של איסוף עקבות מחסנית.
בקרוב נפרסם פוסט מפורט יותר בבלוג בנושא הנדסה, עם הסבר על ההטמעה.
בעיות ב-Chromium: 1069425, 1077657
הצגת התכונות שמותרות או אסורות בתצוגת פרטי המסגרת
בתצוגת הפרטים של המסגרת מוצגת עכשיו רשימה של תכונות מותרות ואסורות בדפדפן, שנשלטות על ידי מדיניות ההרשאות.
Permissions policy הוא API של פלטפורמת אינטרנט שמאפשר לאתר לאשר או לחסום את השימוש בתכונות של הדפדפן במסגרת שלו או במסגרות iframe שהוא מטמיע.
בעיה ב-Chromium: 1158827
עמודה חדשה SameParty בחלונית Cookies (עוגיות)
בחלונית Cookies (קובצי Cookie) בחלונית Application (אפליקציה) מוצג עכשיו המאפיין SameParty של קובצי ה-Cookie. המאפיין
SameParty הוא מאפיין בוליאני חדש שמציין אם קובץ Cookie צריך להיכלל בבקשות למקורות של אותם דומיינים של צד ראשון.
בעיה ב-Chromium: 1161427
תמיכה לא סטנדרטית שהוצאה משימוש fn.displayName
התמיכה במאפיין fn.displayName שאינו סטנדרטי הוצאה משימוש. במקום זאת, אתם צריכים להשתמש ב-fn.name.
באופן מסורתי, Chrome תומך במאפיין fn.displayName שאינו סטנדרטי, כדי לאפשר למפתחים לשלוט בשמות של ניפוי באגים לפונקציות שמופיעות ב-error.stack ובמעקב אחר מחסנית בכלי הפיתוח. בדוגמה שלמעלה, Call Stack יציג קודם את noLongerSupport.
מחליפים את הערך fn.displayName בערך הסטנדרטי fn.name, שהוגדר כניתן להגדרה (באמצעות