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

Jecelyn Yeen

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

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

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

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

בחלונית סגנונות, אפשר ללחוץ על הסמל החדש לצד 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 תיבת סימון של תפקוד האפליקציה.

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

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

בעיה ב-Chromium: 1152089

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

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

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

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

בעיה ב-Chromium: 1140516

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

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

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

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

בעיה ב-Chromium: 1147479

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

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

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

בעיה ב-Chromium: 1178530

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

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

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

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

בעיה ב-Chromium: 1126824

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

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

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

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

בעיה ב-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 החדשה בחלונית 'רשת' כדי לראות את המרחב של כתובת ה-IP של הרשת של כל משאב רשת.

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

בעיה ב-Chromium: 1128885

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

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

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

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

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

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

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

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

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

בעיה ב-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

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

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

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

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

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

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

בעיה ב-Chromium: 1155460

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

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

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

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

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

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

בעיה ב-Chromium: 887173

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

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

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

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

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

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

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