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

Sofia Emelianova
Sofia Emelianova

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

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

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

שיפורי רשת

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

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

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

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

בעיות ב-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.

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

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

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

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

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

בעיות ב-Chromium: 1511233.

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

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

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

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

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

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

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

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

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

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

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

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

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

בעיה ב-Chromium: ‏ 1066842.

עיצוב דינמי

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

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

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

בעיות ב-Chromium: 1483276.

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

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

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

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

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

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

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

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

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

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