מה חדש בכלי הפיתוח (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 הם 2 מתוך המדדים הבסיסיים החדשים של Google לבדיקת חוויית המשתמש באתר, ו-TBT הוא מדד מעבדתי שמשמש כפרוקסי למדד בסיסי אחר לבדיקת חוויית המשתמש באתר, מהירות התגובה לאינטראקציה ראשונה (FID).

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

בעיה ב-Chromium‏ #772558

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

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

בעיה ב-Chromium‏ ‎#1096008

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

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

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

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

בעיה ב-Chromium‏ #912581

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

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

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

בעיה ב-Chromium‏ #974550

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

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

בעיה ב-Chromium‏ #1041830

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

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

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

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

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

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

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