מה חדש בכלי הפיתוח (Chrome 85)

Jecelyn Yeen

עריכת סגנון למסגרות CSS-in-JS

בחלונית Styles (סגנונות) יש עכשיו תמיכה טובה יותר בעריכת סגנונות שנוצרו באמצעות ממשקי ה-API של CSS Object Model‏ (CSSOM). הרבה מסגרות וספריות של CSS-in-JS משתמשות בממשקי ה-API של CSSOM כדי ליצור סגנונות.

עכשיו אפשר גם לערוך סגנונות שנוספו ב-JavaScript באמצעות גיליונות סגנונות שאפשר ליצור. גיליונות סגנונות שאפשר ליצור הם דרך חדשה ליצור סגנונות שאפשר לעשות בהם שימוש חוזר ולהפיץ אותם כשמשתמשים ב-Shadow DOM.

לדוגמה, אי אפשר היה לערוך בעבר את הסגנונות h1 שנוספו באמצעות CSSStyleSheet (ממשקי CSSOM API). אפשר לערוך עכשיו בחלונית 'סגנונות':

בעיה ב-Chromium‏ ‎#946975

‫Lighthouse 6 בחלונית Lighthouse

החלונית Lighthouse מריצה עכשיו את Lighthouse 6. במאמר מה חדש ב-Lighthouse 6.0 מופיע סיכום של כל השינויים העיקריים, ובנתוני הגרסה v6.0.0 מופיעה רשימה מלאה של כל השינויים.

ב-Lighthouse 6.0 נוספו לדוח שלושה מדדים חדשים: המהירות שבה נטען רכיב התוכן הכי גדול (LCP), שינוי הפריסה המצטבר (CLS) וזמן החסימה הכולל (TBT). ‫LCP ו-CLS הם שניים מתוך המדדים הבסיסיים החדשים של Google לבדיקת חוויית המשתמש באתר, ו-TBT הוא מדד מעבדתי שמשמש כפרוקסי למדד נוסף לבדיקת חוויית המשתמש באתר, מהירות התגובה לאינטראקציה ראשונה (FID).

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

מדדי ביצועים חדשים ב-Lighthouse 6.0

בעיה ב-Chromium ‎#772558

הוצאה משימוש של מדד הצגת התוכן העיקרי (FMP)

המדד 'הצגת התוכן העיקרי (FMP)' הוצא משימוש ב-Lighthouse 6.0. הוא הוסר גם מחלונית הביצועים. המדד המומלץ במקום FMP הוא Largest Contentful Paint. במאמר הצגת התוכן העיקרי (FMP) מוסבר למה המדד הזה הוצא משימוש.

בעיה ב-Chromium‏ #1096008

תמיכה בתכונות חדשות של JavaScript

עכשיו יש ב-DevTools תמיכה משופרת בחלק מהתכונות העדכניות של שפת JavaScript:

  • השלמה אוטומטית של תחביר שרשור אופציונלי – ההשלמה האוטומטית של מאפיינים במסוף תומכת עכשיו בתחביר של שרשור אופציונלי, למשל name?. פועל עכשיו בנוסף ל-name. ול-name[.
  • הדגשת תחביר של שדות פרטיים – שדות פרטיים של מחלקות מודגשים עכשיו בצורה נכונה ומודפסים בצורה ברורה בחלונית Sources (מקורות).
  • הדגשת תחביר של Nullish coalescing operator – כלי DevTools מדפיס עכשיו בצורה נכונה את Nullish coalescing operator בחלונית Sources.

בעיות ב-Chromium‏ #1083214, ‏ #1073903, ‏ #1083797

אזהרות חדשות לגבי קיצורי דרך לאפליקציות בחלונית Manifest

קיצורי דרך לאפליקציות עוזרים למשתמשים להתחיל במהירות משימות נפוצות או מומלצות באפליקציית אינטרנט.

בחלונית Manifest מוצגות עכשיו אזהרות אם:

  • הסמלים של קיצורי הדרך לאפליקציה קטנים מ-96x96 פיקסלים
  • סמלי קיצור הדרך של האפליקציה וסמלי המניפסט לא מרובעים (כי המערכת תתעלם מהם)

אזהרות לגבי קיצורי דרך של אפליקציות

בעיה ב-Chromium‏ #955497

אירועים של Service Worker respondWith בכרטיסייה Timing

בכרטיסייה Timing (תזמון) בחלונית Network (רשת) מוצגים עכשיו אירועים של respondWith service worker. ‫respondWith is the time immediately before the service worker fetch event handler runs to the time when the fetch handler's respondWith promise is settled.

‫service worker ‏ `respondWith`

בעיה ב-Chromium‏ #1066579

תצוגה עקבית של החלונית Computed

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

בעיה ב-Chromium‏ #1073899

היסטים של קוד בייט לקובצי WebAssembly

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

היסטים של בייטקוד

בעיה ב-Chromium ‎#1071432

העתקה וגזירה של שורות בחלונית 'מקורות'

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

בעיה ב-Chromium ‎#800028

עדכונים בהגדרות המסוף

ביטול הקיבוץ של הודעות זהות במסוף

המתג קיבוץ הודעות דומות בהגדרות המסוף חל עכשיו על הודעות כפולות. בעבר, ההגדרה הזו חלה רק על הודעות דומות.

לדוגמה, בעבר, כלי הפיתוח לא ביטלו את הקיבוץ של ההודעות hello גם אם Group similar is unchecked. עכשיו, ההודעות hello לא מקובצות:

בעיה ב-Chromium‏ #1082963

שמירת ההגדרות של ההקשר שנבחר בלבד

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

ההקשר שנבחר בלבד

בעיה ב-Chromium‏ #1055875

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

מידע על מטמון הידור של JavaScript בחלונית הביצועים

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

מידע על מטמון הידור של JavaScript

בעיה ב-Chromium‏ ‎#912581

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

התאמת התזמון של הניווט בחלונית הביצועים

עדכנו גם את הזמנים של האירועים DOMContentLoaded, הצגת התוכן הראשוני (FCP) והצגת התוכן הגדול ביותר (LCP) כך שיהיו יחסיים לתחילת הניווט. המשמעות היא שהם תואמים לזמנים שמדווחים על ידי PerformanceObserver.

בעיה ב-Chromium‏ #974550

סמלים חדשים לנקודות עצירה (breakpoint), לנקודות עצירה מותנות ולנקודות רישום (logpoint)

בלוח Sources יש עיצובים חדשים לנקודות עצירה, לנקודות עצירה מותנות ולנקודות רישום (logpoints). נקודות עצירה מקבלות עיצוב חדש של דגל עם צבעים בהירים וידידותיים יותר. סמלים נוספים כדי להבדיל בין נקודות עצירה מותנות לבין נקודות רישום ביומן.

נקודות עצירה (breakpoint)

בעיה ב-Chromium‏ #1041830

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

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

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

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

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

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