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

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

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

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

בחלונית Styles, אפשר ללחוץ על הסמל החדש לצד 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 אלפיות השנייה.
• Cumulative Layout Shift ‏ (CLS): מדד שמודד את היציבות החזותית. כדי לספק חוויית משתמש טובה, הערך של CLS בדפים צריך להיות קטן מ-0.1.

בעיה ב-Chromium: 1152089

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

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

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

בעיה ב-Chromium: 1140516

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

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

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

בעיה ב-Chromium: 1147479

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

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

בעיה ב-Chromium: 1178530

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

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

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

בעיה ב-Chromium: 1126824

יצירת אמולציה של תכונת המדיה color-gamut ב-CSS

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

פותחים את תפריט הפקודות, מריצים את הפקודה Show Rendering (הצגת העיבוד) ומגדירים את התפריט הנפתח Emulate CSS media feature color-gamut (יצירת אמולציה של לוח הצבעים לתכונת מדיה ב-CSS).

בעיה ב-Chromium: 1073887

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

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

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

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

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

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

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

בעיה ב-Chromium: 1128885

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

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

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

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

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

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

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

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

בעיה ב-Chromium: 1158827

העמודה החדשה SameParty בחלונית 'עוגיות'

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

בעיה ב-Chromium: 1056922

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

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

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

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

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

בעיה ב-Chromium: 1155460

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

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

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

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

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

בעיה ב-Chromium: 887173

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

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

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

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

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

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

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.