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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

שיפורים ברשת

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

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

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

הסיבה לכך שהמוצר לא אושר מוצגת בעמודת הסטטוס.

בעיות ב-Chromium: 1506760.

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

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

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

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

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

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

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

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

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

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

בעיות ב-Chromium: ‏ 1467739.

האירועים שמתחילים את התהליך בנתיב הראשי

המסלול Performance > Main מציג עכשיו כברירת מחדל חצים שמקשרים בין הגורמים המפעילים לבין האירועים הבאים שהם גרמו להם.

  • ביטול תוקף של סגנון או פריסה -> חישוב מחדש של סגנונות או פריסה
  • ‫Request Animation Frame ->‏ Animation Frame Fired
  • ‫Request Idle Callback -> Fire Idle Callback
  • התקנת טיימר -> הופעל הטיימר
  • ‫Create WebSocket (יצירת WebSocket) -> ‏Send...‎ (שליחה...) ו-Receive WebSocket Handshake (קבלת לחיצת יד של WebSocket) או Destroy WebSocket (כיבוי סופי של WebSocket)

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

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

בעיות ב-Chromium: ‏ 1434596.

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

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

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

בעיות ב-Chromium: 1511813.

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

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

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

עכשיו אפשר לערוך את ::view-transition pseudo-element ב-Styles

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

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

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

בעיות ב-Chromium: 1511233.

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

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

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

בעיות ב-Chromium: 1500511.

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1066842.

שינוי דינמי של העיצוב

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

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

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

בעיות ב-Chromium: 1483276.

אזהרות לגבי הוצאה משימוש של קובצי Cookie של צד שלישי בחלוניות Network (רשת) ו-Application (אפליקציה)

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

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

התמונות הבאות מציגות את קובצי ה-Cookie של צד שלישי לפני ואחרי הלכידה בחלונית 'רשת'.

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

הדגשה של קובצי Cookie מצד שלישי בחלונית Application לפני ואחרי.

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

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

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

‫Lighthouse 11.4.0

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

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

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

בעיה ב-Chromium: 772558.

נגישות

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

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

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

מידע חשוב נוסף

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

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

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

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

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

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

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

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