מה חדש בכלי הפיתוח (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.

בוחר הצבעים, שעון הזווית וכלי העריכה של אפקטי ה-Easing בגיבויים של var()

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

הכלים לבחירת צבעים, שעון הזווית ועורך המעברים לפני ואחרי העיבוד ב-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

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

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

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

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