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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium‏ #800028

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

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

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

לדוגמה, בעבר, כלי הפיתוח לא ביטלו את הקיבוץ של ההודעות 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

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

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

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

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