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

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

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

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

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

בעיה ב-Chromium #946975

מגדלור 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, וה-TBT הוא שרת proxy למדידת נתוני מעבדה של מדד ליבה אחר לבדיקת חוויית המשתמש באתר – השהיית קלט ראשון.

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

מדדי ביצועים חדשים בגרסה 6.0 של Lighthouse

בעיה ב-Chromium #772558

אנחנו מוציאים משימוש את ההגדרה 'הצגת תוכן ראשוני (FMP)'

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

בעיה ב-Chromium #1096008

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium #955497

אירועים של respondWith בקובץ שירות (service worker) בכרטיסייה 'תזמון'

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

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

בעיה ב-Chromium #1066579

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

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

בעיה ב-Chromium #1073899

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

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

היסט קוד בייט

בעיה ב-Chromium #1071432

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

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

בעיה ב-Chromium #800028

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

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

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

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

בעיה ב-Chromium #1082963

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

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

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

בעיה ב-Chromium #1055875

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

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

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

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

בעיה ב-Chromium #912581

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

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

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

בעיה ב-Chromium #974550

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

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

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

בעיה ב-Chromium #1041830

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

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

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

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

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

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59