מה חדש בכלי הפיתוח (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 ‏(LCP). במאמר הצגת התוכן העיקרי (FMP) מוסבר למה המדד הזה הוצא משימוש.

בעיה ב-Chromium מספר 1096008

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

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

  • השלמה אוטומטית של תחביר שרשור אופציונלי – ההשלמה האוטומטית של מאפיינים במסוף תומכת עכשיו בתחביר של שרשור אופציונלי, למשל name?. פועל עכשיו בנוסף ל-name. ול-name[.
  • הדגשת תחביר של שדות פרטיים – שדות פרטיים של מחלקה מודגשים עכשיו בצורה נכונה בתחביר ומודפסים בצורה יפה בחלונית Sources (מקורות).
  • הדגשת תחביר של אופרטור איחוד ערכים שהם null או undefined – כלי DevTools מדפיס עכשיו בצורה תקינה את אופרטור איחוד הערכים שהם null או undefined בחלונית 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

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

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

בעיה ב-Chromium‏ #800028

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

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

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

לדוגמה, בעבר, DevTools לא ביטל את הקיבוץ של ההודעות hello גם אם Group similar לא היה מסומן. עכשיו, ההודעות hello לא מקובצות:

בעיה ב-Chromium‏ #1082963

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

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

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

בעיה ב-Chromium‏ #1055875

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

מידע על מטמון של קומפילציית JavaScript בחלונית 'ביצועים'

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

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

בעיה ב-Chromium‏ #912581

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

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

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

בעיה ב-Chromium מספר 974550

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

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

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

בעיה ב-Chromium מספר 1041830

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

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

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

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

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

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