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

Sofia Emelianova
Sofia Emelianova
GitHub

חיפוש ביצת הפתעה

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

כדי למצוא אותו, מחפשים את האמוג'י הצבעוני 💫.

עדכונים בחלונית הרכיבים

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

יצירת אמולציה של דף במיקוד בכרטיסייה Elements > Styles

בכרטיסייה Elements (רכיבים) > Styles (סגנונות), נוספה האפשרות Emulate a focused page (הדמיה של דף עם מיקוד) מתחת ללחצן Toggle elements state (החלפת מצב הרכיבים) (:hov). בעבר, האפשרות הזו הייתה זמינה רק בחלונית Rendering.

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

התצוגה לפני ואחרי של אמולציה של דף במיקוד בכרטיסייה Styles (סגנונות).

בעיה ב-Chromium: ‏ 1468393.

בוחר הצבעים, שעון הזווית ועורך ההאצה בגיבויים של var()

כדי לפשט את העריכה של CSS, בכרטיסייה Elements > Styles אפשר עכשיו להשתמש בColor Picker, בAngle Clock ובEasing Editor ב-var() fallbacks.

הכלים לבחירת צבעים, שעון הזווית ועורך המעברים לפני ואחרי העיבוד ב-var() fallbacks.

בעיה ב-Chromium: ‏ 1520417.

הכלי למדידת אורך CSS יצא משימוש

הוצאנו משימוש את כלי העריכה של אורך ה-CSS בעקבות משוב שקיבלנו, שלפיו הוא מאט את תהליך העבודה ולא מוסיף הרבה ערך.

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

כדי להפעיל מחדש את כלי האורך, צריך לבטל את הסימון של הגדרות > ניסויים > הוצאה משימוש של כלי ליצירת CSS ‏<length> בכרטיסייה 'סגנונות'.

אם אתם עדיין רוצים להשתמש בכלי הזה, צוות כלי הפיתוח ישמח לשמוע את דעתכם ולדעת איך הכלי הזה עוזר לכם בתהליך העבודה. אתם מוזמנים לשלוח משוב בכתובת crbug/1522657.

הניסוי להוצאה משימוש מושבת.

חלון קופץ לתוצאת החיפוש שנבחרה בדף 'ביצועים' > 'המסלול הראשי'

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

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

בעיה ב-Chromium: ‏ 1523279.

עדכונים בחלונית 'רשת'

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

כפתור הניקוי ומסנן החיפוש בכרטיסייה Network > EventStream

בכרטיסייה רשת > EventStream מוצגים:

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

התמונה מציגה את המסך לפני ואחרי הוספת לחצן &#39;ניקוי&#39; ומסנן חיפוש.

צוות כלי הפיתוח רוצה להודות לצ'ארלס ואזאק על השקת התכונה הזו.

בנוסף, בכרטיסייה EventStream מוצגים עכשיו גם אירועים ששרתים שולחים באמצעות fetch/XHR, ולא רק EventSource API. אפשר לנסות את התכונה בדף ההדגמה.

בעיה ב-Chromium: 1488863, 40659493.

הצגת טיפים עם סיבות לפטור מקובצי Cookie של צד שלישי בקטע Network > Cookies

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

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

יכול להיות שקובצי Cookie של צד שלישי מותרים בגלל הסיבות הבאות:

בעיה ב-Chromium: ‏ 41491846.

הפעלה והשבתה של כל נקודות העצירה (breakpoint) בכרטיסייה Sources

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

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

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

בעיה ב-Chromium: ‏ 1522037.

הצגת סקריפטים שנטענו בכלי הפיתוח של Node.js

ב-DevTools for Node.js, הסקריפטים שנטענו מוצגים עכשיו בעץ הניווט במקורות > סקריפטים.

תמונה שמציגה את החלונית לפני ואחרי הוספת הכרטיסייה Scripts עם עץ של סקריפטים שנטענו.

בעיה ב-Chromium: 1518364.

Lighthouse 11.5.0

החלונית Lighthouse מריצה עכשיו את Lighthouse 11.5.0. רשימת השינויים המלאה

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

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

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

בעיה ב-Chromium: ‏ 772558.

נגישות

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

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

בעיות ב-Chromium: 1516957, ‏ 324282443, ‏ 324467508, ‏ 324930007.

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

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

  • הגופנים בכלי הפיתוח עודכנו כך שיתאימו לגופנים ב-Chrome‏ (1523538).
  • ביצועים: תוקנה בעיה שגרמה לכך שצילומי מסך לא הוצגו כשמעבירים את העכבר מעל ציר הזמן (1519469).
  • מקורות: גובה השורה בכלי העריכה גדל כדי לשפר את קריאות הקוד (1523640).
  • Network > Responses: תוקנו בעיות שונות בתצוגה בפורמטים ובקידודים שונים (1523128, 1509336, 1523128, 41481944, 1509336).

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

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

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

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

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

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