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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

שיפורים ברשת

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיות ב-Chromium: 1511813.

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

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

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

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

מעכשיו אפשר לערוך את ::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).
  • חיישנים: תוקן באג שקשור לקריאה חוזרת (callback) שגויה של מיקום לא זמין (1486859).
  • ביצועים:
    • ללחצן איסוף אשפה יש עכשיו סמל מתאים, 'מגב' במקום 'פח' (1507530).
    • מעקב אחר ביצועים שומר עכשיו נתונים כשעוברים אל about:blank (1509947).

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

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

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

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

  • אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
  • אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
  • שולחים ציוץ אל ‎@ChromeDevTools.
  • אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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