דף זה תורגם על ידי Cloud Translation API.

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

Jecelyn Yeen

כלים חדשים לניפוי באגים של Flexbox בשירות CSS

בכלי הפיתוח יש עכשיו כלים ייעודיים לניפוי באגים של Flexbox ב-CSS.

כלים לניפוי באגים של CSS Flexbox

כשמחילים את התג display: flex או display: inline-flex על רכיב HTML בדף, התג flex מופיע לידו בחלונית הרכיבים. לוחצים על התג כדי להפעיל או להשבית את התצוגה של שכבת-על גמישה בדף.

בחלונית Styles אפשר ללחוץ על הסמל החדש ליד display: flex או display: inline-flex כדי לפתוח את כלי העריכה של Flexbox. עורך Flexbox מאפשר לערוך במהירות את המאפיינים של Flexbox. כדאי לנסות!

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

הקטע Flexbox בחלונית Layout (פריסה)

בעיות ב-Chromium: 1166710, 1175699

שכבת-על חדשה של Core Web Vitals

שכבת-העל החדשה של Core Web Vitals עוזרת להציג ולמדוד את ביצועי הדפים בצורה טובה יותר.

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

פותחים את תפריט הפקודות, מריצים את הפקודה Show Rendering ומפעילים את תיבת הסימון Core Web Vitals.

שכבת-העל מציגה כרגע:

המהירות שבה נטען רכיב התוכן הכי גדול (LCP): מודדת את ביצועי הטעינה. כדי לספק חוויית משתמש טובה, LCP צריך להתרחש תוך 2.5 שניות מהמועד שבו הדף מתחיל להיטען לראשונה.
עיכוב קלט ראשון (FID): מדידה של אינטראקטיביות. כדי לספק חוויית משתמש טובה, ה-FID של הדפים צריך להיות פחות מ-100 אלפיות השנייה.
Cumulative Layout Shift (CLS): מדידה של היציבות החזותית. כדי לספק חוויית משתמש טובה, ערך ה-CLS בדפים צריך להיות פחות מ-0.1.

שכבת-על בדוח בנושא Core Web Vitals

בעיה ב-Chromium: 1152089

עדכונים בכרטיסייה 'בעיות'

מספר הבעיות הועבר לשורת הסטטוס במסוף

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

מספר הבעיות בשורת הסטטוס במסוף

בעיה ב-Chromium: 1140516

דיווח על בעיות בפעילות מהימנה באינטרנט

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

פותחים פעילות מהימנה באינטרנט. אחר כך פותחים את הכרטיסיות Issues בלחיצה על Issues count בשורת הסטטוס של המסוף כדי לראות את הבעיות. כדאי לצפות בשיחה הזו של אנדריי כדי לקבל מידע נוסף על יצירה ופריסה של 'פעילות באינטרנט מהימנה'.

בעיות מהימנות באינטרנט בכרטיסייה 'בעיות'

בעיה ב-Chromium: 1147479

עיצוב מחרוזות כליטרלים של מחרוזת JavaScript (חוקיות) במסוף

עכשיו, המסוף מעצב מחרוזות כליטרלים חוקיים של מחרוזת JavaScript במסוף. בעבר, המסוף לא היה תו בריחה (escape) במירכאות כפולות בהדפסת מחרוזות.

עיצוב מחרוזות כליטרלים של מחרוזת JavaScript (חוקיות)

בעיה ב-Chromium: 1178530

החלונית 'אסימוני אמון חדשים' בחלונית 'אפליקציה'

עכשיו מוצגים כל אסימוני Trust Token הזמינים בהקשר הגלישה הנוכחי בחלונית Trust Tokens החדשה בחלונית Application.

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

החלונית החדשה Trust Tokens

בעיה ב-Chromium: 1126824

אמולציה של תכונת המדיה של סולם הצבעים של CSS

שאילתת המדיה color-gamut מאפשרת לבדוק את טווח הצבעים המשוער שנתמך על ידי הדפדפן ומכשיר הפלט. לדוגמה, אם שאילתת המדיה color-gamut: p3 תואמת, סימן שהמכשיר של המשתמש תומך במרחב הצבעים Display-P3.

פותחים את תפריט הפקודות, מריצים את הפקודה Show Rendering וקובעים את התפריט הנפתח Emulate CSS features media-media-gamut בתפריט הנפתח.

בעיה ב-Chromium: 1073887

כלים משופרים ב-Progressive Web Apps

כלי הפיתוח מציגים עכשיו במסוף הודעת אזהרה מפורטת יותר לגבי יכולת ההתקנה של Progressive Web Apps (PWA), עם קישור למסמכי התיעוד.

אזהרה לגבי יכולת ההתקנה של PWA

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

אזהרה על חיתוך של תיאור PWA

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

אזהרה לגבי צילום מסך של PWA

בעיה ב-Chromium: 1146450, 1169689, 965802

עמודת `Remote Address Space` חדשה בחלונית 'רשת'

משתמשים בעמודה Remote Address Space החדשה בחלונית Network כדי לראות את המרחב של כתובת ה-IP ברשת של כל משאב רשת.

עמודה חדשה 'מרחב כתובות מרוחקות'

בעיה ב-Chromium: 1128885

שיפורי ביצועים

ביצועי הטעינה של דפים בפתיחה של כלי הפיתוח השתפרו. במקרים קיצוניים, הביצועים השתפרו פי 10.

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

בקרוב נוסיף עוד פוסט עם הסבר מפורט על ההטמעה בבלוג להנדסה.

בעיות ב-Chromium: 1069425, 1077657

הצגת תכונות מותרות/לא מותרות בתצוגת הפרטים של המסגרת

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

מדיניות ההרשאות היא API של פלטפורמת אינטרנט שמאפשר לאתר לאפשר או לחסום את השימוש בתכונות הדפדפן במסגרת שלו או במסגרות iframe שהוא מטמיע.

תכונות מותרות או אסורות בהתאם למדיניות ההרשאה

בעיה ב-Chromium: 1158827

עמודה חדשה `SameParty` בחלונית 'קובצי Cookie'

בחלונית 'קובצי Cookie' שבחלונית האפליקציה מוצג עכשיו המאפיין SameParty של קובצי ה-Cookie. המאפיין SameParty הוא מאפיין בוליאני חדש שמציין אם צריך לכלול קובץ cookie בבקשות למקורות של אותן קבוצות של צד ראשון.

עמודה של SameParty

בעיה ב-Chromium: 1161427

תמיכה לא סטנדרטית ב-`fn.displayName` שהוצא משימוש

התמיכה ב-fn.displayName לא סטנדרטי הוצאה משימוש. במקומה צריך להשתמש במדיניות fn.name.

שימוש לדוגמה ב-displayName

באופן מסורתי, Chrome תומך במאפיין fn.displayName הלא סטנדרטי כדרך למפתחים לשלוט בשמות של ניפוי באגים לפונקציות שמופיעות ב-error.stack ובמעקבי סטאק של כלי פיתוח. בדוגמה שלמעלה, מקבץ השיחות היה בעבר noLongerSupport.

מחליפים את fn.displayName במאפיין fn.name הרגיל, שהוגדר (דרך Object.defineProperty) ב-ECMAScript 2015, כדי להחליף את המאפיין fn.displayName הלא סטנדרטי.

התמיכה ב-fn.displayName לא הייתה אמינה ולא עקבית במנועי דפדפנים שונים. הוא מאט את האיסוף של דוחות הקריסות, שמפתחים משלמים להם תמיד, לא משנה אם הם משתמשים בפועל ב-fn.displayName או לא.

שימוש לדוגמה בשם

בעיה ב-Chromium: 1177685

הוצאה משימוש של `Don't show Chrome Data Saver warning` בתפריט ההגדרות

ההגדרה Don't show Chrome Data Saver warning הוסרה כי חוסך הנתונים (Data Saver) של Chrome הוצא משימוש.

הגדרות מסוג 'אין להציג אזהרה של חוסך הנתונים ב-Chrome' שהוצאו משימוש

בעיה ב-Chromium: 1056922

תכונות ניסיוניות

דיווח אוטומטי על בעיות עם ניגודיות נמוכה בכרטיסייה 'בעיות'

בכלי הפיתוח נוספו באופן אוטומטי תמיכה ניסיונית לדיווח על בעיות בניגודיות בכרטיסייה 'בעיות'.

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

פותחים דף עם בעיות של ניגודיות נמוכה (למשל: ההדגמה הזו). לאחר מכן, פותחים את הכרטיסיות Issues בלחיצה על הלחצן Issues count בשורת הסטטוס של המסוף כדי לראות את הבעיות.

דיווח אוטומטי על בעיות עם ניגודיות נמוכה

בעיה ב-Chromium: 1155460

תצוגה מלאה של עץ הנגישות בחלונית הרכיבים

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

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

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

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

תצוגה מלאה של עץ הנגישות

בעיה ב-Chromium: 887173

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

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

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

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

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