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

Jecelyn Yeen

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

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

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

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

בעיה ב-Chromium‏ ‎#946975

Lighthouse 6 בחלונית של Lighthouse

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

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

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

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

בעיה ב-Chromium‏ #772558

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

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

בעיה ב-Chromium‏ #1096008

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium‏ #955497

אירועי respondWith של שירות עובדים בכרטיסייה 'תזמון'

הכרטיסייה Timing בחלונית Network כוללת עכשיו אירועים מסוג respondWith של שירותי עבודה. respondWith הוא הזמן שחלף מרגע שבו פונקציית הטיפול באירועים fetch של ה-service worker מופעלת ועד לרגע שבו הבטחה respondWith של הטיפול fetch מתקבלת.

'respondWith' של קובץ השירות

בעיה ב-Chromium‏ #1066579

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

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

בעיה ב-Chromium‏ #1073899

סטיות בקוד בייט לקובצי WebAssembly

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

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

בעיה ב-Chromium‏ #1071432

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

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

בעיה ב-Chromium‏ #800028

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

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

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

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

בעיה ב-Chromium‏ #1082963

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

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

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

בעיה ב-Chromium‏ #1055875

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

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

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

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

בעיה ב-Chromium‏ #912581

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

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

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

בעיה ב-Chromium‏ #974550

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

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

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

בעיה ב-Chromium‏ #1041830

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.