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

Jecelyn Yeen

עריכת סגנון ב-frameworks של CSS-in-JS

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

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

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

בעיה ב-Chromium #946975

Lighthouse 6 בחלונית Lighthouse

בחלונית Lighthouse פועל עכשיו Lighthouse 6. במאמר What's New in Lighthouse 6.0 תוכלו לקרוא סיכום של כל השינויים העיקריים, או בנתוני הגרסה של גרסה 6.0.0 כדי לראות רשימה מלאה של כל השינויים.

ב-Lighthouse 6.0 נוספו שלושה מדדים חדשים לדוח: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) ו-Total block Time (TBT). LCP ו-CLS הם 2 מהמדדים החדשים של Google מדדי ליבה לבדיקת חוויית המשתמש באתר.

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

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

בעיה ב-Chromium #772558

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

התכונה First Meaningful Paint (FMP) הוצאה משימוש ב-Lighthouse 6.0. הוא הוסר גם מחלונית הביצועים. המהירות שבה נטען רכיב התוכן הכי גדול (LCP) הוא התחליף המומלץ ל-FMP. במאמר המהירות שבה נטען רכיב כלשהו, הסבר למה הוא הוצא משימוש.

בעיה ב-Chromium #1096008

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium #955497

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

הכרטיסייה 'תזמון' בחלונית 'רשת' כוללת עכשיו אירועים מסוג respondWith של קובץ שירות (service worker). respondWith הוא הזמן שחולף לפני שה-handler של האירוע fetch של ה-Service Worker פועל עד למועד שבו הוסדרת ההבטחה respondWith של ה-handler של fetch.

תגובה של קובץ שירות (service worker)

בעיה ב-Chromium #1066579

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

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

בעיה ב-Chromium #1073899

הבדלי בייטקוד (Bytecode) לקובצי WebAssembly

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

הבדלי בייטקוד

בעיה ב-Chromium #1071432

העתקה וקיצוץ של הטקסט בחלונית המקורות

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

בעיה ב-Chromium #800028

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

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

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

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

בעיה ב-Chromium #1082963

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

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

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

בעיה ב-Chromium #1055875

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

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

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

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

בעיה ב-Chromium #912581

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

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

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

בעיה ב-Chromium #974550

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

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

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

בעיה ב-Chromium #1041830

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

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

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

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

  • אפשר לשלוח לנו הצעה או משוב דרך crbug.com.
  • כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות   עוד   > עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח.
  • שליחת ציוץ אל @ChromeDevTools.
  • נשמח לשמוע מה חדש בסרטונים ב-YouTube של כלי הפיתוח או בסרטונים ב-YouTube שקשורים לכלי פיתוח.

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 בוטל.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59