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

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

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

כלים לניפוי באגים ב-flexbox של שירות CSS

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

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

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

הקטע Flexbox בחלונית Layout

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

שכבת-על חדשה של מדדי ליבה לבדיקת חוויית המשתמש באתר

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

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

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

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

שכבת-על של מדדי ליבה לבדיקת חוויית המשתמש באתר

בעיה ב-Chromium: 1152089

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

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

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

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

בעיה ב-Chromium: 1140516

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

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

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

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

בעיה ב-Chromium: 1147479

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

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

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

בעיה ב-Chromium: 1178530

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

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

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

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

בעיה ב-Chromium: 1126824

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

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

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

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

בעיה ב-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 לפלטפורמת אינטרנט שמאפשר לאתר לאשר או לחסום שימוש בתכונות הדפדפן במסגרת שלו או במסגרות iframe שהוא מטמיע.

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

בעיה ב-Chromium: 1158827

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

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

עמודה SameParty

בעיה ב-Chromium: 1161427

התמיכה הלא רגילה ב-fn.displayName הוצאה משימוש

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

שימוש לדוגמה ב-displayName

באופן מסורתי, Chrome תמך במאפיין fn.displayName הלא סטנדרטי כדרך למפתחים לשלוט בשמות של ניפוי באגים לפונקציות שמופיעות ב-error.stack ובמעקבי הערימה של DevTools. בדוגמה שלמעלה, מקבץ השיחות היה מראה בעבר 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 הוצא משימוש.

הגדרות 'אין להציג את האזהרה 'חוסך הנתונים' של Chrome' הוצאו משימוש

בעיה ב-Chromium: 1056922

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

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

.

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

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

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

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

בעיה ב-Chromium: 1155460

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

.

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

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

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

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

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

בעיה ב-Chromium: 887173

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

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

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

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

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

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

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

Chrome 123

גרסה 122 של Chrome

גרסה 121 של Chrome

Chrome 120

גרסה 119 של Chrome

גרסה 118 של Chrome

גרסה 117 של Chrome

גרסה 116 של Chrome

Chrome 115

Chrome 114

גרסה 113 של Chrome

גרסה 112 של Chrome

גרסה 111 של Chrome

Chrome 110

Chrome 109

גרסה 108 של Chrome

גרסה 107 של Chrome

Chrome 106

Chrome 105

Chrome 104

גרסה 103 של Chrome

גרסה 102 של Chrome

גרסה 101 של Chrome

Chrome 100

גרסה 99 של Chrome

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

גרסה 92 של Chrome

גרסה 91 של Chrome

Chrome 90

גרסה 89 של Chrome

גרסה 88 של Chrome

גרסה 87 של Chrome

גרסה 86 של Chrome

גרסה Chrome 85

גרסה 84 של Chrome

גרסה 83 של Chrome

גרסה 82 של Chrome

Chrome 82 בוטל.

גרסה 81 של Chrome

גרסה 80 של Chrome

גרסה 79 של Chrome

גרסה 78 של Chrome

גרסה 77 של Chrome

גרסה 76 של Chrome

גרסה 75 של Chrome

גרסה 74 של Chrome

גרסה 73 של Chrome

גרסה 72 של Chrome

גרסה 71 של Chrome

גרסה 70 של Chrome

גרסה Chrome 68

Chrome גרסה 67

Chrome 66

גרסה Chrome 65

Chrome 64

Chrome 63

גרסה 62 של Chrome

גרסה 61 של Chrome

Chrome 60

Chrome 59