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

Sofia Emelianova
Sofia Emelianova
GitHub

האוסף הרשמי של תוספים למכשיר ההקלטה זמין

האוסף הרשמי של תוספים של Recorder לייצוא ולהשמעה חוזרת זמין עכשיו.

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

שיפורים ברשת

בגרסה הזו נוספו כמה שיפורים לחלונית רשת.

הסיבה לכישלון בעמודה 'סטטוס'

בעמודה סטטוס מוצגת עכשיו תמיד הסיבה לכישלון. בעבר היה צריך להפעיל את Big request rows (שורות בקשה גדולות) או לבחור את הבקשה בטבלה.

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

בעיות ב-Chromium: 1506760.

תפריט משנה משופר של העתקה

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

התפריט המשני 'העתקה' לפני ואחרי השיפור.

בנוסף, האפשרות העתקה כ-cURL מעתיקה עכשיו את הפקודה הנכונה ללוח ב-Windows.

בעיות ב-Chromium: ‏ 1267033, ‏ 1276452, ‏ 798498.

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

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

נתיבי ניווט בציר הזמן

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

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

בעיות ב-Chromium: 1467739.

יוזמי האירועים בטראק הראשי

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

  • אימות לא תקין של סגנון או פריסה –> חישוב מחדש של סגנונות או פריסה
  • בקשה לפריים אנימציה -> הופעל פריים אנימציה
  • Request Idle Callback -> Fire Idle Callback
  • התקנת טיימר -> הופעל הטיימר
  • יצירת WebSocket -> שליחת… וקבלת לחיצת יד של WebSocket או כיבוי סופי של WebSocket

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

חץ מהבקשה והפעלה של קריאה חוזרת (callback) ללא פעילות.

בעיות ב-Chromium: 1434596.

תפריט הבחירה של מכונות ה-VM של JavaScript ב-Node.js DevTools

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

התמונה הקודמת והתמונה הבאה ממחישות את ההבדל בין המצב לפני הוספת תפריט חדש שמאפשר לבחור מופע VM של JavaScript לבין המצב אחרי ההוספה.

בעיות ב-Chromium: 1511813.

שיפורים ברכיבים

בגרסה הזו נוספו כמה שיפורים לחלונית רכיבים.

בנוסף לשני הפיצ'רים הבאים, החלונית Elements (רכיבים) שומרת עכשיו את הכרטיסייה האחרונה שפתחתם, למשל Computed (מחושב) או Properties (נכסים).

עכשיו אפשר לערוך את רכיב הסימון ::view-transition בסגנונות

עכשיו אפשר לערוך את רכיבי ה-CSS ::view-transition בסגנונות באמצעות גיליון הסגנונות של הכלי לבדיקת מודעות.

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

מידע נוסף זמין במאמר מעבר חלק ופשוט באמצעות View Transitions API.

בעיות ב-Chromium: 1511233.

תמיכה במאפיין align-content במאגרי בלוקים

נכס align-content פועל עכשיו עם כל מאגרי בלוקים, כולל table-caption ו-table-cell. בעבר, האפשרות הזו פעלה רק עם grid ו-flex.

התמיכה ב-align-content לפני ואחרי בקונטיינרים של בלוקים.

בעיות ב-Chromium: 1500511.

קיצור דרך ופקודה חדשים בקטע 'מקורות'

עכשיו אפשר ללחוץ על מספר שורה במקורות ולהקיש על Cmd (ב-Mac) או על Ctrl (ב-Windows) + Shift כדי ליצור נקודת התחלה ביומן. קיצור הדרך הזה הוא תוספת לקיצור הדרך הקיים Cmd (Mac) / Ctrl (Win) + לחיצה כדי להגדיר נקודות עצירה מותנות.

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

הפקודה החדשה להצגת הקובץ הפעיל בסרגל הצד של כלי הניווט.

בעיות ב-Chromium: 1486933, ‏ 1467464.

תמיכה בתנוחות למכשירים מתקפלים שהודמתו

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

תפריט נפתח עם אפשרויות של תנוחת הגוף.

בנוסף, לרשימת המכשירים נוספה מכשיר מתקפל חדש: Asus Zenbook Fold.

בעיה ב-Chromium: ‏ 1066842.

עיצוב דינמי

כלי הפיתוח מתאימים עכשיו באופן אוטומטי לערכת הצבעים של Chrome. כדי להגדיר עיצוב:

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

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

בעיות ב-Chromium: 1483276.

אזהרות לגבי ההוצאה משימוש של קובצי cookie של צד שלישי בחלוניות 'רשת' ו'אפליקציה'

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

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

לפני ואחרי תיעוד קובצי cookie של צד שלישי בחלונית 'רשת'.

בקטע Application (אפליקציה), עוברים אל Storage (אחסון) > Cookies (קובצי cookie) ולוחצים על דומיין. קובצי cookie מודגשים בצהוב לא נשמרים בדפדפן.

לפני ואחרי הדגשת קובצי cookie של צד שלישי בחלונית 'אפליקציה'.

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

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

בעיות ב-Chromium: ‏ 1506225, ‏ 1503961.

Lighthouse 11.4.0

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

ביקורת שמזהה קובצי cookie של צד שלישי.

במאמר Lighthouse: אופטימיזציה של מהירות האתר מוסבר על היסודות של השימוש בחלונית Lighthouse ב-DevTools.

בעיה ב-Chromium: ‏ 772558.

נגישות

בגרסה הזו יש את שיפורי הנגישות הבאים:

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

בעיות ב-Chromium: ‏ 1504938, ‏ 1499868, ‏ 1512161, ‏ 1515224, ‏ 1515418, ‏ 1516998, ‏ 1517015.

רגעי שיא שונים

ריכזנו כאן כמה מהתיקונים והשיפורים החשובים בגרסה הזו:

  • אנימציות:
    • תוקן באג שבו הפורמט של חלון הקופץ של צילום המסך לא היה תואם למסך (1506991).
    • תוקן באג שבו צמתים של אנימציות שהוסרו לא סומנו כ'הוסר' (1506561).
  • Network:
    • שינויים בכותרות: תוקן באג שקשור לסמל של נקודה סגולה מזויפת בכרטיסייה Headers (1507856).
    • תצוגה מקדימה: תוקן באג שקשור לפענוח כפול מיותר (1509336).
    • תוקן באג שגרם לכך שבקשות קצרות לא הוצגו (1509862).
  • Application‏ > IndexedDB: סידור מחדש של הלחצנים בסרגל הפעולות כדי לשמור על עקביות עם חלוניות אחרות (1393800).
  • חיישנים: תוקנה באג שבו נקלט קריאה חוזרת מוצלחת למיקום לא זמין (1486859).
  • ביצועים:
    • הלחצן איסוף אשפה כולל עכשיו סמל מתאים, 'סמרטוט' במקום 'פח' (1507530).
    • מעקב הביצועים שומר עכשיו נתונים כשמנווטים אל about:blank (1509947).

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

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

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

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

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

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