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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1152089

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

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

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

בעיה ב-Chromium: 1140516

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

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

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

בעיה ב-Chromium: 1147479

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

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

בעיה ב-Chromium: 1178530

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

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

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

בעיה ב-Chromium: 1126824

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

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

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

בעיה ב-Chromium: 1073887

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

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

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

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

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

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

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

בעיה ב-Chromium: 1128885

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1158827

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

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

בעיה ב-Chromium: 1161427

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

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

באופן מסורתי, 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 הוסר הוצא משימוש.

בעיה ב-Chromium: 1056922

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

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

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

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

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

בעיה ב-Chromium: 1155460

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

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

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

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

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

בעיה ב-Chromium: 887173

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

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

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

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

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

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

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