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

Sofia Emelianova
Sofia Emelianova
GitHub

איך מוצאים את ביצת ההפתעה

כדי לחגוג את ה-1 באפריל השנה, צוות 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 של צד שלישי ב'רשת' > 'קובצי Cookie'

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

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

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

בעיה ב-Chromium: ‏ 41491846.

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

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

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

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

בעיה ב-Chromium: ‏ 1522037.

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

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

תמונה שמציגה את החלונית לפני ואחרי הוספת הכרטיסייה 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

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

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

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