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

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

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

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

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

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

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

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

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

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

פותחים את תפריט הפקודות, מריצים את הפקודה Show Rendering ומסמנים את תיבת הסימון 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 במסוף. בעבר, המסוף לא ביצע escape למירכאות כפולות כשנדפסו מחרוזות.

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

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

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

בנוסף, בחלונית 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 הוסרה כי הוצאנו משימוש את התכונה 'חיסכון בנתונים' ב-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.

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

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