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

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

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

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

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

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

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

שכבת-על חדשה של דוח ה-Web Vitals הבסיסיים

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

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

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

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

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

בעיה ב-Chromium: 1152089

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

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

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

בעיה ב-Chromium: ‏ 1140516

דיווח על בעיות בפעילות Trusted Web

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

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

בעיה ב-Chromium: ‏ 1147479

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

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

בעיה ב-Chromium: ‏ 1178530

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

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

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

בעיה ב-Chromium: ‏ 1126824

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

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

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

בעיה ב-Chromium: ‏ 1073887

שיפור כלי Progressive Web Apps

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

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

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

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

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

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

בעיה ב-Chromium: 1128885

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1158827

עמודה חדשה SameParty בחלונית Cookies (עוגיות)

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

בעיה ב-Chromium: ‏ 1161427

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

התמיכה במאפיין fn.displayName שאינו סטנדרטי הוצאה משימוש. במקום זאת, אתם צריכים להשתמש ב-fn.name.

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

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

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

בעיה ב-Chromium: ‏ 1177685

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

ההגדרה Don't show Chrome Data Saver warning הוסרה כי הוצאנו משימוש את התכונה Data Saver ב-Chrome.

בעיה ב-Chromium: ‏ 1056922

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

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

ב-DevTools נוספה תמיכה ניסיונית בדיווח אוטומטי על בעיות בניגודיות בכרטיסייה Issues (בעיות).

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

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

בעיה ב-Chromium: ‏ 1155460

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

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

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

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

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

בעיה ב-Chromium: ‏ 887173

הורדת ערוצי התצוגה המקדימה

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

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

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

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

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

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